tinymce 5更新后，如何使用tinymce-vue

項目中原本使用的富文本編輯器是 wangEditor，這是一個很輕量、簡潔編輯器

但是公司的業務升級，想要一個功能更全面的編輯器，我找了好久，目前常見的編輯器有這些：

UEditor：百度前端的開源項目，功能強大，基於 jQuery，但已經沒有再維護，而且限定了后端代碼，修改起來比較費勁

bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery...

kindEditor：功能強大，代碼簡潔，需要配置后台，而且好久沒見更新了

wangEditor：輕量、簡潔、易用，但是升級到 3.x 之后，不便於定制化開發。不過作者很勤奮，廣義上和我是一家人，打個call

quill：本身功能不多，不過可以自行擴展，api 也很好懂，如果能看懂英文的話...

summernote：沒深入研究，UI挺漂亮，也是一款小而美的編輯器，可是我需要大的

 

在有這么參考的情況下，我最終還是選擇了 tinymce 這個不搭梯子連官網都打不開的編輯器（簡直是自討苦吃），主要因為兩點：

1. GitHub 上星星很多，功能也齊全；

2. 唯一一個從 word 粘貼過來還能保持絕大部分格式的編輯器；

3. 不需要找后端人員掃碼改接口，前后端分離；

4. 說好的兩點呢！

 

 

項目使用vue-cli 3.x版本，tinymce5

1. 安裝及引用

注：只安裝tinymce-vue不可以，還需安裝tinymce，否則會報錯

npm install tinymce
npm install @tinymce/tinymce-vue

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'

2. 初始化編輯器（記錄出現的問題和解決方案）

• 按示例初始化發現編輯器不顯示，報“theme.js:1 Uncaught SyntaxError: Unexpected token <”這個錯。

  解決方案：手動引入tinymce主題，在init({})方法里加 theme: 'silver',沒用。

  import 'tinymce/themes/silver'

• 不報錯了但是編輯器還是不顯示，繼續研究，發現還需要定義皮膚，在init({})里加skin: "oxide"沒用。

  解決方案：先在public目錄下新建一個文件夾命名為tinymce，然后在node_modules里找到tinymce的skin包，復制到public/tinymce里，最后在初始化tinymce時的init里配置skin_url：

  <editor :init="{skin_url:'/tinymce/skins/ui/oxide'}"></editor>

  注：資源用絕對路徑引入時，讀取的是public文件夾里的資源。如果應用沒有部署在域名的根部，那么需要為 URL 配置 publicPath前綴。

  <editor :init="{skin_url:`${publicPath}tinymce/skins/ui/oxide`}"></editor> ... data () { return { publicPath: process.env.BASE_URL } }

3. 配置

• 一些常用的配置屬性

   browser_spellcheck: true, // 拼寫檢查  branding: false, // 去水印  elementpath: false, //禁用編輯器底部的狀態欄  statusbar: false, // 隱藏編輯器底部的狀態欄  paste_data_images: true, // 允許粘貼圖像  menubar: false, // 隱藏最上方menu

• plugins

  使用某個插件需要先引入這個插件，例：

  import 'tinymce/plugins/fullscreen' import 'tinymce/plugins/preview' plugins: 'fullscreen preview'

• toolbar

  可以使用“|”給工具欄分組，把某一類功能划分成一組，例：

  toolbar: 'bold italic underline | alignleft aligncenter alignright'

4. 定制

• 將語言改為中文

  步驟：

  1. 在官網下載語言包https://www.tiny.cloud/get-tiny/language-packages/
  2. 把下載的語言包放到之前新建的tinymce文件夾里
  3. 初始化時添加以下代碼

        language_url: `/tinymce/langs/zh_CN.js`, language: 'zh_CN',

• 在tinymce5工具欄添加自定義功能按鈕

  this.tinymceInit = { ... toolbar: 'imageUpload', setup: (editor) => { editor.ui.registry.addButton('imageUpload', { tooltip: '插入圖片', icon: 'image', onAction: () => { } }) } }