Vue后台 TinyMCE 富文本配置工具栏

本篇文章记录下vue-element-admin管理系统，整合TinyMCE 富文本的配置经验。

根据业务需求以及使用频率，需要将段落模块放置到快速工具栏：

实现效果：

因为vue-element-admin整合的TinyMCE插件，引入文件部署在云端：

const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'

再不改变TinyMCE版本的情况下，只能使用旧版本的配置了。找到TinyMCE文件目录下的toolbar.js文件：

在toolbar数组中

const toolbar = [
'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 

'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'

]

export default toolbar

新增一项：

const toolbar = [
'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 

'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen',

'undo redo styleselect bold italic link image'
]

export default toolbar

'undo redo styleselect bold italic link image'

比如我在最后新增，则展示在最下方：

所属插件为核心的项为基本包里自带的功能，直接写在toolbar里就可以，属于插件的项需要引入插件(plugins: '插件名')然后在toolbar中配置。

TinyMCE中文官方文档：http://tinymce.ax-z.cn/

vue-element-admin中文官方项目地址： https://panjiachen.github.io/vue-element-admin/#/dashboard