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

在vue項目中使用tinymce編輯器（tinymce-vue）

項目使用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/theme'

• 不報錯了可是編輯器仍是不顯示，繼續研究，發現還須要定義「skin_url」，在init({})里加skin: "oxide"沒用。先在public目錄下新建一個文件夾命名爲tinymce，而後在node_modules裏找到tinymce的skin包，複製到public/tinymce裏，在建立tinymce時的init({})裏添加下面這行代碼：

  skin_url: '/tinymce/skins/ui/oxide',

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: () => {
  
        }
      })
    }
  }

關於tinymce完整的例子在個人github項目裏https://github.com/Inspiration1/asteroid