vue+tinymce5 富文本编辑器使用、踩坑
注：此教程适用于 tinymce 5.x 版本（如果是tinymce 4.x，则可能不会实现 ） 
安装与配置操作 （1）安装
npm install -s @tinymce/tinymce-vue
npm install -s tinymce（2）在node_modules找到tinymce
将相关文件放到public中 
langs文件夹存放的是语言包，tinymce默认是英文 具体实现 实现如下，有问题，出现not Found
查看，发现出现了包的导入路径错误 
注释掉语言包相关代码，依旧出现，说明不是语言包问题； 注释掉皮肤包依旧会报此错误； 仔细查看，是 icons.js 出现问题 依据教程，发现是 icons.js 包引入错误，尝试手动引入 icons.js ，成功实现。 （最基础的编辑器功能，若需要拓展，则需要进行配置，相关配置见下方） 
具体代码： html部分： tinymcejs部分：
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver' // 引入主题包 themes.js
import 'tinymce/icons/default/icons.js' // 引入图标包 icons.js
import Editor from '@tinymce/tinymce-vue'export default {components: { Editor }, //注册组件data() {return {tinymceHtml: '测试tinymce',// 初始化定义tinymceeditorInit: {language_url: '/tinymce/langs/zh_CN.js', // 中英文包language: 'zh_CN', // 语言设置为中文height: 300,skin_url: '/tinymce/skins/ui/oxide' // 皮肤包}}},mounted() {tinymce.init({})}}
进行相关配置（添加官方功能插件）
插件需引入，按需配置； 在 import 中进行引入； 在 init 中进行定义； 如图，tinymce中相关定义如下
（一）工具栏配置 通过init中的toolbar来配置工具栏是否启用的项目和显示的顺序，使用 | 来分割各个项 editorInit: {language_url: '/tinymce/langs/zh_CN.js',language: 'zh_CN',height: 300,skin_url: '/tinymce/skins/ui/oxide',toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',branding: false, // 是否禁用 “Power by Tinymce”menubar: false // 菜单栏显示(默认为true)}效果：
菜单栏隐藏，添加了 Tx 清除格式
（二）其他配置项 配置工具项
所属插件为核心的项为基本包里自带的功能，直接写在toolbar里就可以；
属于插件的项需要引入插件( plugins: '插件名')然后在 toolbar中配置。import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons.js'
import Editor from '@tinymce/tinymce-vue'// 添加配置
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'editorInit: {language_url: '/tinymce/langs/zh_CN.js',language: 'zh_CN',height: 300,skin_url: '/tinymce/skins/ui/oxide',// 添加的配置的定义plugins: 'link code table lists contextmenu wordcount textcolor image media',toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',branding: false, // 是否禁用 “Power by Tinymce”menubar: false // 菜单栏显示(默认为true)}效果：
增加的相关配置
另一种配置写法： 通过props将组件中的配置项传入 export default {components: { Editor },// 引入配置项，其他的如toolbar也可通过props引入props: {plugins: {type: [String, Array],default: 'lists image media table textcolor wordcount contextmenu'},},data() {return {tinymceHtml: '测试tinymce',editorInit: {language_url: '/tinymce/langs/zh_CN.js',language: 'zh_CN',height: 300,skin_url: '/tinymce/skins/ui/oxide',// plugins: 'link code table lists contextmenu wordcount textcolor image media',plugins: this.plugins, // this.plugins直接获取props中传来的数据toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',branding: false, // 是否禁用 “Power by Tinymce”menubar: false // 菜单栏显示(默认为true)}}},mounted() {tinymce.init({})}};
（三）图片上传使用base64格式
editorInit: {language_url: '/tinymce/langs/zh_CN.js',language: 'zh_CN',height: 300,skin_url: '/tinymce/skins/ui/oxide',// plugins: 'link code table lists contextmenu wordcount textcolor image media',plugins: this.plugins,toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',branding: false, // 是否禁用 “Power by Tinymce”menubar: false, // 菜单栏显示(默认为true)images_upload_handler: (blobInfo, success, failure) => {const img = 'data:image/jpeg;base64,' + blobInfo.base64()success(img)}}
补充1： （1）由于引入的插件太多，多余的隐藏掉了，样式如下 
将其全部展示出来： 使用数组，分成两项 
效果： 
（3）报错 
查看官网， 
进行修改，如下： 
成功，没有报错信息 （4）发现有一部分依旧是中文 
查看官方（中文文档）内容 
对比相关代码，没有问题； 查看汉化文件zh_CN.js 发现没有对应的中文； 下载最新的汉化包，还是不行（判断：汉化包内容不全，没有对应的中文），自行添加 ； 直接在汉化包中添加相应中英文以及Unicode编码 // 补充
"Alternative source URL": "\u66ff\u4ee3\u8d44\u6e90\u5730\u5740",
"Alternative description": "\u66ff\u4ee3\u8bf4\u660e\u6587\u5b57"注：
汉化包中文是Unicode格式，转换过来即是所得汉字 （Unicode在线转换 https://www.bejson.com/convert/unicode_chinese/） 也可直接写成中文，具体可使用莫若卿大神的汉化包（ 详见tinymce中文文档 http://tinymce.ax-z.cn/general/localize-your-language.php ） 最后，在tiny的git上，发现已经有同行提出了官方汉化包的内容缺失问题。。。补充2： 使用时出现bug如下：
选择缩进后，每行都会缩进，不是首行缩进分析 ：
官方版本并没有首行缩进功能； 若想实现首行缩进，必须升级到版本5，并使用莫若卿大神的首行缩进插件（详见tinymce中文文档 http://tinymce.ax-z.cn/more-plugins/indent2em.php） （1）添加“首行缩进”插件 按照教程，成功实现：
详细过程如下 ： （1）下载插件 插件： indent2em.zip （2） 将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹内。 放到node_modules/tinymce/plugins中； 同时放到/static/tinymce/plugins中 
注意： 下载下来的插件缺少内容，需手动添加 下载的插件只包含这两个文件： 
运行时会报错，找不到此插件 
与官方插件进行对比，发现缺少index.js文件，即动态引入该插件，将此文件复制粘贴到indent2em文件夹中 （官方插件中，每个插件都会有index.js文件，且每个文件中内容一样，都为require动态引入插件） 
（3）导入使用 在plugis 和 toolbar中添加indent2em，如下 ： 
运行，成功实现。 （2）出现警告信息 plugin.js:16 Text color plugin is now built in to the core editor, please remove it from your editor configuration
plugin.js:16 Context menu plugin is now built in to the core editor, please remove it from your editor configuration
plugin.js:16 Color picker plugin is now built in to the core editor, please remove it from your editor configuration如下：
出现相关警告信息
分析发现，text color、context menu、color picker 插件 现在内置到核心编辑器中， 请将其从编辑器配置中删除 将3个插件从plugins中删除 ， 如下 
没有任何问题，且控制台无警告信息 
本文参考内容 https://www.jianshu.com/p/b5eb986c16ed（安装基本配置） https://blog.csdn.net/liub37/article/details/83310879?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase（基本初始化详细解释，部分配置化写法与网上的不同） https://blog.csdn.net/zjiang1994/article/details/79880806?utm_source=blogxgwz5 （配置详细解释） http://tinymce.ax-z.cn/general/localize-your-language.php（t inymce中文文档）
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！