TinyMCE的使用

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

1、npm install tinymce -S

2、npm install @tinymce/tinymce-vue

3、public 文件夾下新建文件夾 tinymce ，在 node_modules 中找到 tinymce/skins 目錄，然后將 skins 目錄拷貝到 tinymce 目錄下 ，

4、還需要下載一個中文語言包 (https://www.tiny.cloud/get-tiny/language-packages/)，然后將這個語言包放到 tinymce  - lang 目錄下

5、components 中注冊 tinymce-vue 組件

　　

<template>
<div>
  <!--
    給editor加key是因為給tinymce keep-alive以后組件切換時tinymce編輯器會顯示異常，
    在activated鈎子里改變key的值可以讓編輯器重新創建
  -->
  <editor id="tinymceEditor" :init="tinymceInit" v-model="content" :key="tinymceFlag"></editor>
  <Upload
      multiple
      ref="imageUpload"
      action="//jsonplaceholder.typicode.com/posts/"
      :on-success="insertImage"
      style="display:none">
  </Upload>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'

import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullscreen'

export default {
  name: 'TinymceEditor',
  components: {
    'editor': Editor
  },
  data () {
    return {
      tinymceFlag: 1,
      tinymceInit: {},
      content: '本地圖片上傳功能僅為演示，實際使用需要補全圖片存儲地址'
    }
  },
  methods: {
    // 插入圖片至編輯器
    insertImage (res, file) {
      let src = '' // 圖片存儲地址
      tinymce.execCommand('mceInsertContent', false, `<img src=${src}>`)
    }
  },
  created () {
    const that = this
    this.tinymceInit = {
      skin_url: '/tinymce/skins/ui/oxide',
      language_url: `/tinymce/langs/zh_CN.js`,
      language: 'zh_CN',
      height: document.body.offsetHeight - 300,
      browser_spellcheck: true, // 拼寫檢查
      branding: false, // 去水印
      // elementpath: false,  //禁用編輯器底部的狀態欄
      statusbar: false, // 隱藏編輯器底部的狀態欄
      paste_data_images: true, // 允許粘貼圖像
      menubar: false, // 隱藏最上方menu
      plugins: 'advlist table lists paste preview fullscreen',
      toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | imageUpload quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
      /**
       * 下面方法是為tinymce添加自定義插入圖片按鈕
       * 借助iview的Upload組件,將圖片先上傳到存儲雲上，再將圖片的存儲地址放入編輯器內容
       */
      setup: (editor) => {
        editor.ui.registry.addButton('imageUpload', {
          // text: '插入圖片',
          tooltip: '插入圖片',
          icon: 'image',
          onAction: () => {
            let upload = that.$refs.imageUpload
            upload.handleClick()
          }
        })
      }
    }
  },
  activated () {
    this.tinymceFlag++
  },
  mounted () {

  }
}
</script>

6、視圖組件中 引入 <tinymce-editor /> 組件

<tinymce-editor />

import TinymceEditor from '../../components/tinymce-editor/tinymce-editor'

components: {TinymceEditor},