npm install @packy-tang/vue-tinymce

import VueTinymce from “@packy-tang/vue-tinymce”
Vue.use(VueTinymce)

<vue-tinymce ref="tinymce" v-model="content" :setting="setting" />

import tinymce from './components/tinymce/'
import VueTinymce from './components/vue-tinymce'

Vue.prototype.$tinymce = tinymce
Vue.use(VueTinymce)

<template>
    <vue-tinymce ref="tinymce" v-model="content" :setting="setting" />
</template>

<script>
//樣式
import './skins/content/default/content.min.css'
import './skins/ui/oxide/skin.min.css'
import './skins/ui/oxide/content.min.css'

//主題
import './themes/silver'

//插件
import './plugins/link' //鏈接插件
import './plugins/image' //圖片插件
import './plugins/imagetools'
import './plugins/media' //媒體插件
import './plugins/table' //表格插件
import './plugins/lists' //列表插件
import './plugins/quickbars' //快速欄插件
import './plugins/fullscreen' //全屏插件
import './plugins/lineheight'
import './plugins/uploadimage'
import './plugins/charmap'
import './plugins/codesample'
import './plugins/upfile'
import './plugins/code'

/**
 * 注：
 * 5.3.x版本需要額外引進(jìn)圖標(biāo)，沒有所有按鈕就會顯示not found
 */
import './icons/default/icons'

//本地化
import './plugins/zh_CN.js'
import { uploadFile } from '@/api/document/doc'

export default {
  name: 'tinymceEditor',
  props: {
    initialValue: {
      type: String,
      default: ''
    }
  },
  watch: {
    initialValue (newValue) {
      this.content = newValue
    },
  },
  data(){
    return {
      tinymceHtml: '',
      resVideo: null,
      uploaded: false,
      content: '',
      setting: {
        menubar: false,
        toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | upfile link unlink code | numlist bullist lineheight | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough charmap | indent outdent | superscript subscript | removeformat |",
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins: "code lineheight link image upfile imagetools media table lists fullscreen quickbars charmap",
        language: 'zh_CN',
        height: 500,
        deprecation_warnings: false,
        images_upload_handler: (blob, callback) => {
            this.upload(blob, url => {
                callback(url)
            })
        },
        file_picker_types: 'media',
        file_picker_callback: (callback, value, meta) => {
          //當(dāng)點(diǎn)擊meidia圖標(biāo)上傳時,判斷meta.filetype == 'media'有必要，因為file_picker_callback是media(媒體)、image(圖片)、file(文件)的共同入口
          if (meta.filetype == 'media'){
            let filetype = '.mp4'
            //創(chuàng)建一個隱藏的type=file的文件選擇input
            let input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', filetype);
            let that = this;
            input.onchange = function() {
              let file = this.files[0];
              that.uploadImg(file, url => {
                callback(url)
              });
            }
            //觸發(fā)點(diǎn)擊
            input.click();
          }
        },
        file_callback: (file, callback) => {
          // 自定義處理文件操作部分
          this.uploadFile(file, url => {
              callback(url)
          })
        }
      },
    }
  },
  methods: {
    upload (file, callback) {
      const formData = new FormData()
      if (file.size / 1024 / 1024 > 50) {
        this.$message.error('圖片大小應(yīng)小于50M')
        return false
      }
      formData.append('file', file.blob(), file.name)
      uploadFile(formData).then(res => {
        const imageSrc = res.data.objectUrl
        callback(imageSrc)
      });
    },
    uploadFile (file, callback) {
      const fileName = file.name;
      const fileSize = (file.size / 1024 / 1024).toFixed(1);
      if (fileSize > 200) {
        Message.error("文件大小應(yīng)小于200M");
        return false;
      }
      const formData = new FormData();
      formData.append("file", file, fileName);
      var timestamp = new Date().getTime();
      formData.append("batchKey", timestamp);
      axios.post(`/xxx/xxx/uploadFile`, formData).then(res => {
        const imageSrc = res.data.objectUrl
        callback(imageSrc)
      });
    },
    async uploadImg (file, callback) {
      let loadText = document.createElement('span');
      let fileName = file.name;
      const fileSize = (file.size / 1024 / 1024).toFixed(1);
      if (fileSize > 200) {
        Message.error("文件大小應(yīng)小于200M");
        return false;
      }
      const formData = new FormData();
      formData.append("file", file, fileName);
      var timestamp = new Date().getTime();
      formData.append("batchKey", timestamp);
      // 上傳信息顯示為位置
      const supMessagePos = document.getElementsByClassName('tox-dialog__footer')[0]
      const messagePos = document.getElementsByClassName('tox-dialog__footer-start')[0]
      var config = {
        onUploadProgress: progressEvent => {
          var complete =
            ((progressEvent.loaded / progressEvent.total) * 100) | 0;
          if (complete == 100) {
            loadText.innerHTML = "加載完成，等待上傳...";
            supMessagePos.insertBefore(loadText, messagePos)
          } else {
            loadText.innerHTML = "正在加載...  " + complete + " %";
            supMessagePos.insertBefore(loadText, messagePos)
          }
        }
      };
      await axios.post(`/xxx/xxx/uploadFile`, formData, config).then(res => {
        if (res.data) {
          loadText.innerHTML = "上傳完成!"
          callback(res.data.objectKey, { title: fileName })
          supMessagePos.insertBefore(loadText, messagePos)
          // myWebSocket.closeSocket();
        }
      })
    }
  }
}
</script>

<style>
.tox-statusbar__branding {
  display: none;
}
</style>

setting: {
	quickbars_insert_toolbar: 'quickimage quicktable'
}

setting: {
	quickbars_insert_toolbar: ''
}

setting: {
	quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor"
}

setting: {
	urlconverter_callback: (url, node, onSave, name) => {
      if (node === 'img' && url.startsWith('blob:')) {
          tinymce.activeEditor && tinymce.activeEditor.uploadImages()
      }
      return url
    },
}