vue中使用Tinymce编辑器

1. 首先安装所需的两个包

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

2. 查看vue-cli脚手架版本号，根据vue-cli版本号进行以下操作

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

3. 复制内容和样式包
   ① 在 node_modules 文件夹中找到 tinymce/skins 文件，进行复制；如果vue-cli的版本号为2就将其内容复制到static文件夹中，若版本号为3就将其内容复制到public文件夹中，在下是版本为2的如图所示

   
   node_modules文件中的skins
   static文件夹结构

② 下载 zh_CN.js中文包，复制到 tinymce文件中 点击下载

4. 代码内容

<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'// 字数统计插件
    import 'tinymce/plugins/autoresize' // 高度自适应
    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. 页面样式

   
   效果图