tinymce是一个功能齐全的富文本编辑器插件,但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利,tinymce本身并不适配Vue,还需要引入@tinymce/tinymce-vue,并且它是国外的富文本插件,没有通过中文版本,需要在其官网下载翻译包(可能需要翻墙)。下面介绍在vue中使用tinymce的具体步骤
1. 安装插件
npm install --save tinymce @tinymce/tinymce-vue
注意:某些版本可能无法使用,目前我使用的是"@tinymce/tinymce-vue": "^2.0.0" 和 "tinymce": "^5.3.0",若出现无法使用的情况可以安装特定版本
2. 引入插件
import tinymce from 'tinymce' // vue中tinymce无法直接使用需要借助@tinymce/tinymce-vue
import Editor from '@tinymce/tinymce-vue' // @tinymce/tinymce-vue 是一个组件
3. tinymce和Editor
在官方中需要对tinymce进行初始化并将相应配置传入参数对象 tinymce.init({}); 但在vue中并不需要这样做,只需要在mounted选项中编写tinymce.init({})即可,因为在vue中这些配置需要传给Editor的init属性。
Editor组件有两个必备属性 id init,id的作用是供组件获取dom元素,tinymce官方文档中有提到为什么要获取dom元素,在这里不细说。init就是tinymce的初始化配置对象。
4. init属性
可参考官方文档,重点的是language_url、language、skin_url、height这四个属性。
language_url是翻译包的绝对路径,language是语言类型,skin_url是skin文件夹路径,height是富文本高度
我是将翻译包和skin文件夹放置在assets文件夹中,并用一个tinymce文件夹存储,skin文件夹需要在node_modules中的tinymce文件夹中copy出来。
进行配置时两个路径需要是绝对路径,打包后assets文件夹中的文件夹/文件是处在根目录的因此可以直接/开头引用
language 中文即zh_CN,事实上翻译包的文件名就是语言类型
此时富文本的基础效果暂时出来了,这时候需要配置富文本插件以及工具栏,plugins和toolbar属性
这两个都需要参考官方文档,在此不一一列举。
需要注意的是插件必须先引入
如引入表格插件 import 'tinymce/plugins/table'
也就是说tinymce的插件都在tinymce/plugins目录中需要哪个引入哪个。
plugis以及toolbar都是字符串属性, 因此插件项与操作项都需要空格相隔。
如:
plugins: 'link lists image code table',
toolbar: 'bold italic underline'
具体参考官方文档
简略介绍步骤
1. 安装插件
2. 引入插件
3. 注册组件
4. 使用组件
5. 设置组件属性
6. 下载翻译包拷贝skin文件夹并放入asstes文件夹中
7. 引入图标库即主题样式
8.引入插件并配置
9. 初始化富文本
可能会遇到的问题
版本不兼容
由于引入了两个插件, 两个插件之间可能不兼容,导致无法使用,因此最好引入特定版本。
属性配置错误
仔细查看官方文档配置属性
控制台报错
大部分是某些文件找不到,那就是没有引入当前vue文件,根据反馈的路径引入相应文件即可