不为人知的tinyMCE增加字体方法

最新推荐文章于 2024-05-06 15:16:12 发布
原创 最新推荐文章于 2024-05-06 15:16:12 发布 · 6.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#tinymce #fonts

本文介绍了解决tinyMCE编辑器中汉字字体显示问题的方法。主要原因是汉字的UTF-8编码包含分号，这与tinyMCE的字体字符串解析方式冲突。通过修改字体字符串的分隔符为竖线字符解决了这一问题。
 前几天将字体写入editor_template.js后，发现不起作用。
对此，网上并未有明确解释，因为涉及到汉字编码的utf8转换。
今天查找出了问题原因：
例如：黑体转换为utf8后成为黑体，包含分号，而js函数从字体字符串中取字体时，以“;”为分隔符，导致出错。修改分隔符为“|”，并且修改
var fonts = tinyMCE.getParam("theme_advanced_fonts", nFonts).split(';');
为
var fonts = tinyMCE.getParam("theme_advanced_fonts", nFonts).split('|');
解决了这个问题。

可以下载我修改后的tinyMCE
http://download.youkuaiyun.com/source/255545
Tinymce 富文本
weixin_60172238的博客
05-29 615
宋体=\'宋体\';黑体=\'黑体\';language_url: "tinymce/langs/zh_CN.js", //引入汉化包。
Vue项目引入自定义字体 && tinymce自定义字体的使用
a945919556的博客
08-26 2765
字体也不是随便就能使用的，如果是有版权的字并且进行了大规模商用，很有可能面临着一大笔的赔偿金，所以公司会购买一些字体的使用权，所以在日常做项目时会经常使用到自定义字体引入的问题。我遇到的是Vue项目的自定义字体的使用和tinymce富文本编辑器的自定义字体使用的问题。 我这边买的是汉仪的字体，把ttf文件放到项目中，然后自定义font.css font.css代码 font-family是在以后的引用会用到的名称 @font-face { font-family: 'HYLi...
tinymce添加新的字体文件使用
speechless fish 的博客
07-13 2613
一、找到以下三个css文件,这三个css文件是创建富文本的时候引入的css 1、public/tinymce/skins/lightgray/content.min.css 2、public/tinymce/skins/content/default/content.min.css 3、public/tinymce/skins/lightgray/skin.min.css 在里面像html一样引入字体文件即可 @font-face { font-family: FangSongGB2312
Vue Tinymce富文本组件添加自定义字体项
gdgztt的专栏
12-31 1932
Vue Tinymce富文本组件添加自定义字体项
tinymce修改默认字体
青春正在燃烧的博客
04-26 4721
tinymce修改默认字体
tinyMCE新增下载的字体
前端程序猿的博客
02-27 2637
三、在tinyMCE配置里找到font_formats后将你的新字体放入'新罗马字体=TimeNewRoman;注意每个字体用分号隔开。
vue TinyMCE编辑器增加字体
qq_36611673的博客
12-04 1342
1.首先在toolbar.js中加入fontselect 2.在index.vue （使用了element-admin）在window.tinymce.init中加入以下代码： font_formats: "Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; AkrutiKndPadmini=Akpdmi-n;宋体=宋体;黑体=黑体;仿宋=仿宋;微软雅黑=微软雅黑;楷体-GB2312=楷体-..
TinyMCE提交AjaxForm获取不到数据的解决方法
12-13
本文实例分析了TinyMCE提交AjaxForm获取不到数据的解决方法。分享给大家供大家参考。具体分析如下： 在没有使用AjaxForm前，我做的一个小小的评论提交的Web form，评论内容使用了TinyMCE做文本编辑。为了增加一点点...
Vue中tinymce4.7.5设置字体大小和字体样式
qq_42822463的博客
07-18 1万+
1.第一步： 在toolbar中添加 fontsizeselect （字体大小）和 fontselect （字体样式） 2第二步： 我引用的是tinymce4.7.5 组件 Editor 在初始化editorInit中添加 以下 ， 代表字体小大格式范围 fontsize_formats: “8pt 10pt 12pt 14pt 18pt 24pt 36pt”, 代码示例 import E...
精选资源
tinymce_charactercount:TinyMCE的字符计数插件是为TinyMCE添加字符计数功能的插件
05-26
TinyMCE字符计数插件为TinyMCE添加了字符计数功能。 初始化例1 tinymce . init ( { plugins : "charactercount" } ) ; 初始化实例2 tinyMCE . init ( { theme : "advanced" , mode : "textareas" , plugins ...
前端富文本tinymce中文包
05-30
前端富文本tinymce中文包
Tinymce 增加字体字号设置
且听风吟的博客
03-24 6951
toolbar字段增加 fontsizeselect 和 fontselect 。
tinymce 字体样式_vue项目使用tinymce添加新字体，后端配置及前端相关样式设置
weixin_42297746的博客
12-24 1798
后台配置：1.首先在toolbar.js中加入fontselect​2.在index.vue (使用了element-admin)在window.tinymce.init中加入以下代码：font_formats: "Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; AkrutiKndPadmin...
修改tinymce默认字体和字号
QAEARQ的博客
10-09 3622
setup: function (editor) { editor.on('init', function (e) { this.getBody().style.fontSize = '14pt'; this.getBody().style.fontFamily = '微软雅黑'; }); }
tinymce编辑器自定义中文字体
weixin_45816407的博客
12-01 2137
1.toolbar中添加 fontselect属性 2.window.tinymce.init中添加这句代码 font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua
TinyMCE富文本更改默认文字颜色、字号、字体
热门推荐
王红珠的博客
05-09 1万+
TinyMCE富文本更改默认文字颜色、字号、字体 一、content_style（直接为编辑区编写css） 在此选项内编写的css将直接注入到编辑器创建的iframe内部（在head内创建style），其创建的样式不会与内容一起被提交，可以放心使用。 tinymce.init({ selector: '#textarea1', content_style: "div {font-size:24px; color: #843FA1; font-famliy: impact,chicago;}"
前端分享之tinymce编辑器设置默认字体
ygxyvip的博客
01-14 4048
tinymce默认字体为Verdana，想要修改为 其他字体，查了很多资料，终于实现了 tinymce.init({ ... //各种基本配置，此处不做详细说明 //设置默认字体 setup: function(editor) { editor.on('init', function(ed) { console.log(ed); ed.target.editorCommands.execCommand("fon
VSCode 开发Vue必备插件
2301_78416672的博客
05-06 1081
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
tinymce 字体样式_TinyMCE-添加中文字体及修改字体大小
weixin_42501035的博客
12-24 5352
tinymce不管哪个版本，中文的默认字体都是太小了，编辑了保存以后再拿出来还莫名其妙的变的很大。解决方案：js\themes\advanced\css\editor_content.css中的body, td, pre {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;}10px改为12px就可以了。关于Tin...
tinymce 英文字体
最新发布
06-12
### 如何在 TinyMCE 中配置和使用英文字体 TinyMCE 是一个功能强大的富文本编辑器，支持多种字体的自定义配置。以下是如何在 TinyMCE 中设置和使用英文字体的方法。 #### 1. 配置字体选项 通过 `font_family` 参数可以添加或修改可用的字体列表。默认情况下，TinyMCE 提供了一些常用的英文字体。如果需要自定义英文字体，可以在初始化时进行如下配置： ```javascript tinymce.init({ selector: '#mytextarea', font_family_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; Times New Roman=times new roman,times,serif', toolbar: 'fontselect | fontsizeselect', menubar: false, }); ``` 上述代码中，`font_family_formats` 定义了可用的字体及其对应的 CSS 字体族[^1]。用户可以通过下拉菜单选择这些字体。 #### 2. 设置默认字体 如果希望 TinyMCE 默认使用某种英文字体，可以通过 `content_style` 参数来实现。例如，设置默认字体为 Arial： ```javascript tinymce.init({ selector: '#mytextarea', content_style: "body { font-family: Arial, sans-serif; }", }); ``` 此配置会将编辑器的内容区域默认字体设置为 Arial[^2]。 #### 3. 移除不必要的字体选项 如果不需要显示某些字体选项（如中文或其他语言字体），可以通过调整 `menu` 和 `toolbar` 配置来移除它们。例如： ```javascript tinymce.init({ selector: '#mytextarea', menu: { format: { title: 'Format', items: 'bold italic underline strikethrough | fontsize | forecolor backcolor' } }, toolbar: 'fontselect | fontsizeselect', }); ``` 上述配置去除了与字体族无关的选项，仅保留了英文字体相关的功能[^3]。 #### 4. 引入外部字体 如果需要使用 Google Fonts 或其他外部字体库中的英文字体，可以通过 `content_css` 参数引入相应的样式文件。例如： ```javascript tinymce.init({ selector: '#mytextarea', content_css: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', font_family_formats: 'Roboto=Roboto, sans-serif; Arial=arial,helvetica,sans-serif', }); ``` 这将加载 Roboto 字体并将其添加到可用字体列表中[^1]。 --- ### 注意事项 - 确保所有字体文件均可正常访问，尤其是在跨域环境中。 - 如果需要支持多语言环境，请确保正确配置语言包。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值