TinyMCE插件安裝

vue3安裝方法參考 https://www.tiny.cloud/blog/tinymce-vue-3-support/

1.安裝 tinymce官方的 tinymce-vue 組件

npm install @tinymce/tinymce-vue -S

2. 如果有購買 tinymce 的服務(wù)，可以參考 tinymce-vue 的說明，通過 api-key 直接使用 tinymce。
   若沒有注冊、購買過服務(wù)，就直接下載TinyMCE。

npm install tinymce -S

3. 安裝成功之后，在node_modules目錄中，查找tinymce/skins目錄，將skins目錄拷貝到static/tinymce目錄下。
4. 下載中文的語言包。并復(fù)制到static/tinymce目錄下。
   

初始化

1. 引入文件

import tinymce from 'tinymce/tinymce'
import editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/skins/ui/oxide/skin.css';//這里很重要，不引編輯器出不來

2. tinymce-vue是組件，需要在components中注冊，才能使用。

<editor v-model="myValue" :init="init"></editor>

3. init是初始化配置項，具體API請參考官方文檔。

init: {  
        language_url: '/static/tinymce/zh_CN.js',  
        language: 'zh_CN',  
        height: 300,   
        content_css:'/static/tinymce/skins/content/default/content.css',//這個也加上，不然會報錯
        branding: false,  
        menubar: false,  
   }

自定義按鈕

1. 在init里配置setup

init: {
        language_url: "/static/tinymce/zh_CN.js",
        language: "zh_CN",
        height: 500,
        skin_url: "/static/tinymce/skins/ui/oxide",
        content_css: "/static/tinymce/skins/content/default/content.css",
        branding: false,
        plugins: "image",
        menubar: false,
        toolbar: "imageUpload",
        setup: (editor) => {//設(shè)置自定義功能的按鈕
          editor.ui.registry.addButton("imageUpload", {//單個按鈕，此處的imageUpload是該按鈕的名稱
            tooltip: "上傳圖片",
            icon: 'image',
            onAction: () => {
              //點擊按鈕執(zhí)行的操作
              this.showImg = true;//我這邊是展示一個選擇圖片的modal組件
              this.editor = editor;//把當(dāng)前的編輯器保存下來
            }
          });
        }
      }

2. 向編輯器插入內(nèi)容

methods: {
    insertImage (imageList) {
      this.showImg = false;
      let insertHtml = "";
      imageList.map((item, index) => {
        insertHtml = insertHtml + "<img src=" + item + ">";
      });
      //向編輯器插入內(nèi)容
      this.editor.execCommand('mceInsertContent', false, insertHtml);
    }
}