vue引用富文本編輯器tinymce

一 資源下載
tinymce 官方爲vue項目提供了一個組件 tinymce-vue

npm install tinymce -S

我package.json文件裏tinymce的版本是^4.8.5
安裝之後，在 node_modules 中找到 tinymce/skins 目錄，然後將 skins 目錄拷貝到 static 目錄下

// 如果是使用 vue-cli 3.x 構建的 typescript 項目，就放到 public 目錄下，文中所有 static 目錄相關都這樣處理

tinymce 默認是英文界面，所以還需要下載一箇中文語言包（記得搭梯子！搭梯子！搭梯子！）
下載中文語言包，附上地址中文包下載地址
然後將這個語言包放到 static 目錄下，爲了結構清晰，我包了一層 tinymce 目錄

二 創建組件，在組件中引入以下文件
創建組件 tinymce-editor.vue

<template>
  <textarea :id='id' :value='value'></textarea>
</template>

<script>
// Import TinyMCE
import store from '@/store/store'
import tinymce from 'tinymce/tinymce'
import 'tinymce/skins/lightgray/skin.min.css'
import 'tinymce/themes/modern/theme'  //import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/colorpicker'
const INIT = 0
const CHANGED = 2
export default {
  data () {
    return {
      no: ''
    }
  },
  props: {
    value: {
      type: String,
      editor: null,
      required: true
    },
    setting: {},
    url: { // 接口
      default: '',
      type: String
    },
    accept: { // 文件類型
      default: 'image/jpeg, image/png',
      type: String
    },
    maxSize: { // 大小
      default: 2097152,
      type: Number
    },
    withCredentials: {
      default: false,
      type: Boolean
    }
  },
  watch: {
    value: function (val) {
      console.log('init ' + val)
      if (this.status === INIT || tinymce.activeEditor.getContent() !== val) {
        tinymce.activeEditor.setContent(val)
      }
      this.status = CHANGED
    }
  },
  data () {
    return {
      status: INIT,
      id: 'editor-' + new Date().getMilliseconds()
    }
  },
  methods: {
  },
  mounted () {
    const _this = this
    const setting =
        {
          selector: '#' + _this.id,
          images_upload_url: 'http://localhost:8080/uploadCenter/upload/images',
          language_url: '/tinymce/langs/zh_CN.js',
          language: 'zh_CN',
          init_instance_callback: function (editor) {
            // EDITOR = editor
            console.log('Editor: ' + editor.id + ' is now initialized.')
            editor.on('input change undo redo', () => {
              var content = editor.getContent()
              _this.$emit('show', content)
            })
          },
          content_style: `
    *                         { padding:0; margin:0; }
    html, body                { height:100%; }
    img                       { max-width:100%; display:block;height:auto; }
    a                         { text-decoration: none; }
    iframe                    { width: 100%; }
    p                         { line-height:1.6; margin: 0px; }
    table                     { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
    .mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }
    ul,ol                     { list-style-position:inside; }
  `,
          insert_button_items: 'image link | inserttable',
          paste_retain_style_properties: 'all',
          paste_word_valid_elements: '*[*]', // word需要它
          paste_data_images: true, // 粘貼的同時能把內容裏的圖片自動上傳，非常強力的功能
          paste_convert_word_fake_lists: false, // 插入word文檔需要該屬性
          paste_webkit_styles: 'all',
          paste_merge_formats: true,
          nonbreaking_force_tab: false,
          paste_auto_cleanup_on_paste: false,
          menubar: 'edit insert view format table tools',
          branding: false,
          plugins: [
            'advlist autolink lists image charmap print preview hr anchor pagebreak imagetools',
            'searchreplace visualblocks visualchars code  fullpage',
            'insertdatetime nonbreaking save table contextmenu directionality',
            'emoticons paste textcolor colorpicker textpattern imagetools'
          ],
          toolbar1: ' newnote print fullscreen preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
          // 上傳圖片回調
          images_upload_handler (blobInfo, success, failure) {
            let xhr = ''
            let formData = ''
            xhr = new XMLHttpRequest()
            xhr.withCredentials = false
            xhr.open('POST', 'http://localhost:8080/uploadCenter/upload/images')
            xhr.setRequestHeader('token','')
            xhr.onload = () => {
              let json = {}
              if (xhr.status !== 200) {
                failure('HTTP Error: ', xhr.status)
                return
              }
              console.log(xhr)
              json = JSON.parse(xhr.responseText)
              console.log(json)
              success(json.data.httpFilePath)
            }
            formData = new FormData()
            formData.append('file', blobInfo.blob())
            xhr.send(formData)
          }
        }
    Object.assign(setting, _this.setting)
    tinymce.init(setting)
  },
  beforeDestroy: function () {
    tinymce.get(this.id).destroy()
  }
}
</script>

三 其他組件引用

<template>
 <div class="app-container calendar-list-container">
   <div style="width: 100%;">
     <editor class="editor" :value="content" :setting="editorSetting" @show="editors" :with-credentials="withCredentials"></editor>
   </div>
 </div>
</template>

<script>
import editor from './tinymce-editor' // 根據tinymce-editor.vue組件位置引入
export default {
  data () {
    return {
      editorSetting: { // 配置富文本編輯器高
        height: 500
      },
      withCredentials: true,
      content: '', // 富文本編輯器雙向綁定的內容
      formLeft: {
        title: ''
      }
    }
  },
  components: { // 引入組件
    editor
  },
  methods: {
    editors (content) { // editor組件傳過來的值賦給content
      console.log(content)
      this.content = content
    }
  }
}
</script>