前言
前面兩篇介紹的是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