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

前言

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

tinyMCE

TinyMCE是一个时尚直观的富文本编辑器,对比百度的UEditor,tinyMCE功能更加丰富,最重要的是tinyMCE还在更新维护中,如果你想要找一款富文本编辑器推荐使用。tinyMCE的使用很简单,下载依赖包并在页面中引入,然后init初始化,传递一个选择器用来渲染tinyMCE.如果我们用的是vue,可以引入tinymce-vuetinymce-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源码中没有对应的字体,这时候我们就要手动添加这些字体。

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

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

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

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

总结

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

相关推荐
林希_Rachel_傻希希几秒前
this 的指向与 bind() 方法详解
前端·javascript
Komorebi゛1 分钟前
【Vue3】使用websocket实现前后端实时更新数据
前端·websocket
想要狠赚笔的小燕2 分钟前
老项目救星:Vue3/Vite/JS 项目渐进式引入「代码 + Commit」自动化规范全指南(多人协作)
前端·vue.js
用户352120195608 分钟前
React-router v7(下)
前端
枫,为落叶8 分钟前
【vue】设置时间格式
前端·javascript·vue.js
郝学胜-神的一滴30 分钟前
Linux系统函数link、unlink与dentry的关系及使用注意事项
linux·运维·服务器·开发语言·前端·c++
昔人'1 小时前
css`text-wrap:pretty`
前端·css
勇敢di牛牛1 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
Sheldon一蓑烟雨任平生1 小时前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
詩句☾⋆᭄南笙1 小时前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单