1. 首先安裝所需的兩個(gè)包

npm install tinymce -S npm --save @tinymce/tinymce-vue

2. 查看vue-cli腳手架版本號(hào)，根據(jù)vue-cli版本號(hào)進(jìn)行以下操作

vue -V
npm list --depth=0 -g

3. 復(fù)制內(nèi)容和樣式包
   ① 在 node_modules 文件夾中找到 tinymce/skins 文件，進(jìn)行復(fù)制；如果vue-cli的版本號(hào)為2就將其內(nèi)容復(fù)制到static文件夾中，若版本號(hào)為3就將其內(nèi)容復(fù)制到public文件夾中，在下是版本為2的如圖所示

   
   
   node_modules文件中的skins
   
   
   static文件夾結(jié)構(gòu)

② 下載 zh_CN.js中文包，復(fù)制到 tinymce文件中 點(diǎn)擊下載

4. 代碼內(nèi)容

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
            :init="init"
            :disabled="disabled"
            @onClick="onClick">
    </editor>
  </div>
</template>
<script>
    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/silver'
    // 編輯器插件plugins
    // 更多插件參考：https://www.tiny.cloud/docs/plugins/
    import 'tinymce/plugins/image'// 插入上傳圖片插件
    import 'tinymce/plugins/media'// 插入視頻插件
    import 'tinymce/plugins/table'// 插入表格插件
    import 'tinymce/plugins/lists'// 列表插件
    import 'tinymce/plugins/wordcount'// 字?jǐn)?shù)統(tǒng)計(jì)插件
    import 'tinymce/plugins/autoresize' // 高度自適應(yīng)
    export default {
      data () {
            return {
          // 初始化tinyEdit
          init: {
            language_url: '/static/tinymce/zh_CN.js',
            language: 'zh_CN',
            skin_url: '/static/tinymce/skins/ui/oxide',
            selector: 'textarea',
            plugins: 'autoresize',
            toolbar: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
            branding: false,
            menubar: false,
            images_upload_handler: (blobInfo, success, failure) => {
              const img = 'data:image/jpeg;base64,' + blobInfo.base64()
              success(img)
            }
         }
      },
      mounted () {
        tinymce.init({})
      },
      methods: {
        onClick (e) {
         this.$emit('onClick', e, tinymce)
        }
      },
      watch: {
       value (newValue) {
         this.myValue = newValue
       },
       myValue (newValue) {
         this.$emit('input', newValue)
       }
     }
    }
</script>

5. 頁面樣式

   
   
   效果圖