前言

公司项目中用了tinyMCE富文本编辑器，初始化的时候基本就是默认配置，这也就导致客户提出了修改配置的要求，主要是对字体与字号进行修改，本节就来介绍一下如何修改相关配置。

tinyMCE

TinyMCE是一个时尚直观的富文本编辑器，对比百度的UEditor，tinyMCE功能更加丰富，最重要的是tinyMCE还在更新维护中，如果你想要找一款富文本编辑器推荐使用。tinyMCE的使用很简单，下载依赖包并在页面中引入，然后init初始化，传递一个选择器用来渲染tinyMCE.如果我们用的是vue，可以引入tinymce-vue，tinymce-vue可以双向绑定，并且传入配置项就行，可以方便我们的开发。

js 复制代码

   <tinymce-editor :id="id" v-model="tinymceContent" :init="initOptions" />
   
   
   import TinymceEditor from '@tinymce/tinymce-vue' // TinyMCE vue wrapper

具体的工具插件可以按需引入，插件名称我们查阅官网即可。

注意多媒体上传，可能需要我们单独配置，项目一般会把图片保存到文件服务器上面。写好配置项，启动项目，就能看到tinyMCE。

接下来就是满足客户的需求。

字号修改

客户首先提出将字号单位进行修改，并且增加几种字号。我们在页面上可以看到，tinyMCE字号工具的单位是pt ，而客户想要变成px。我们查阅官方文档，可以找到字号的配置属性------fontsize_formats ，文档具体介绍了该属性及其默认值。注意，如果我们看的是TinyMCE中文文档，会发现默认值的单位是px，但是官方文档是pt。不是官方中译的，大家最好还是对比一下官方文档，当然对于无私中译的前辈表达敬意。

根据客户要求加上fontsize_formats配置项，我们可以声明一个config.ts的文件，将自定义的配置在该文档中声明，然后在编辑器页面进行引入。

js 复制代码

   export const fontSizeFormats = '12px 16px 20px'

到此字号就修改完成了，后续想要修改字号就按照这个步骤来就可以了。

字体修改

客户之所以提出将字体修改，是因为tinyMCE默认的字体有的不是免费商用的字体 。这点还是很重要的，如果后续大家想用这个插件，可以在初始化的时候就把字体替换一下。tinyMCE可以用font_formats 自定义字体列表，跟字号的配置一样，我们在配置文件添加字体配置，在此之前我们要先找到免费商用字体网站，然后选择免费商用的去添加。

js 复制代码

   export const fontFormats ='思源宋体=Source Han Serif SC;站酷意大利体=ZCOOL Italy Italic;'

字体配置我们有以下两点需要注意：

中文字体我们需要换成对应的英文，可以百度进行查询。
了解字体族，有些字体名称是统称，比如寒蝉圆黑体，有着好几种字体形式，再配置时可以多加上几种。

配置好之后，打开页面我们会发现，有些字体样式是不生效，因为tinyMCE源码中没有对应的字体，这时候我们就要手动添加这些字体。

首先我们把需要添加的字体包下载下来。
将对应的字体包放到fonts文件夹里面。

前面提到了字体族，如果我们要用多个形式，就得都添加进来。
将字体添加到css文件中，用@font-face进行添加，里面是字体名及字体路径。主要多个字体要多个@font-face。

我们需要在两个css文件中引入，一个是工具栏样式，一个是内容编辑框样式。

此时字体也被我们修改为免费商用。

总结

以上就是tinyMCE字号与字体修改的步骤，两者都有对应的配置项目，操作起来很简单，需要注意的是如果我们设置的字体如果tinyMCE自身不支持，就需要下载字体进行添加。

填坑小能手——tinyMCE字号与字体配置

前言

tinyMCE

字号修改

字体修改

总结