前言
前面两篇介绍的是lodop打印，本篇介绍的富文本编辑器tinymce在我的项目中与之有所关联。
正文
tinymce在富文本编辑器中绝对是第一梯队的，而且无需后端做什么，前端引入也简单。
英文官网：https://www.tiny.cloud/docs/
中文文档：http://tinymce.ax-z.cn/
引入项目中：
npm install tinymce -S
npm @tinymce/tinymce-vue -S
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
引入插件(插件很多，我这里只是做表格需要的，如果你需要更多，可去中文文档网站内的插件使用中查找):
import 'tinymce/plugins/table'
import 'tinymce/plugins/contextmenu'
将node_moudles里面tinymce里的skins文件复制，放入public中。
中文语言包zh_CN.js也需要放入目录中，然后在配置中引入。
template：
<div class="tinymce-editor"> <editor v-model="myValue" :init="init"></editor> </div>
script：
import tinymce from 'tinymce/tinymce' import Editor from '@tinymce/tinymce-vue' import 'tinymce/plugins/table' import 'tinymce/plugins/contextmenu' import 'tinymce/themes/modern/theme' components: { Editor }, data() { return { myValue: '', init: { selector: '#tinymce', // 容器，可使用css选择器 language_url: '/static/tinymce4.7.5/langs/zh_CN.js', //public目录下 language: 'zh_CN', height: 300, branding: false, // 去掉底部水印 // statusbar: false, // 隐藏编辑器底部的状态栏(如果隐藏,则拖拽功能也隐藏) elementpath: false, // 禁用编辑器底部的状态栏 menubar: false, // 隐藏最上方menu plugins: ['table contextmenu'], // 引入插件 toolbar: 'bold italic underline strikethrough table | fontsizeselect | alignleft aligncenter alignright alignjustify |outdent indent blockquote | undo redo | removeformat' // 菜单配置（一个单词代表了一个功能） } } }
如果报“theme.js:1 Uncaught SyntaxError: Unexpected token <”这个错，很可能是你在配置项plugins属性中写了一个插件，但没有使用import引入此插件
如果要使用打印功能，我上篇写了一个lodop打印工具，tinymce和lodop结合如下（预览功能）：
this.LODOP = getLodop() // 获取Lodop var strFormHtml="<body>" + this.myValue + "</body>"; LODOP.ADD_PRINT_HTML(0,0,"210mm","297mm",strFormHtml); this.LODOP.PREVIEW();
如果要把富文本功能写入公共组件，可参考此文章：https://blog.csdn.net/Amanda_wmy/article/details/88550155