填坑小能手——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自身不支持,就需要下载字体进行添加。

相关推荐
wkj0013 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
GoldKey7 小时前
gcc 源码阅读---语法树
linux·前端·windows
Xf3n1an8 小时前
html语法
前端·html
张拭心8 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
烛阴8 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python
@大迁世界9 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
红尘散仙9 小时前
Rust 终端 UI 开发新玩法:用 Ratatui Kit 轻松打造高颜值 CLI
前端·后端·rust
mldong9 小时前
mldong-goframe:基于 GoFrame + Vben5 的全栈快速开发框架正式开源!
vue.js·后端·go
新酱爱学习9 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
袁煦丞10 小时前
把纸堆变数据流!Paperless-ngx让文件管理像打游戏一样爽:cpolar内网穿透实验室第539个成功挑战
前端·程序员·远程工作