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},