在vue中整合使用tinymce富文本编辑器

参考tinymce文档：点击此处跳转

步骤一：在vue中引入tinymce（点击跳转查看资料）

npm install @tinymce/tinymce-vue -S

步骤二：引入tinymce-vue进入到子组件中

import Editor from '@tinymce/tinymce-vue'

步骤三：注册tinymce-vue进入到组件中

 // 注册tinymce组件
  components: {
    'editor': Editor
  }

步骤四：渲染template组件

步骤五：初始化init tinymce

      init: {
        // 组件
        plugins:
          ' lists image colorpicker textcolor wordcount contextmenu autoresize',
        // 工具栏
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat ',
        branding: false,
        min_height: 300
      }

效果图：

优化：
怎么让组件汉化：
tinymce 汉化包下载：点击此处
首先发现tinymce-vue需要首费才能加入主体才能汉化，因此不得不用tinymce取代tinymce-vue

步骤一：安装tinymce

 npm install tinymce -S

检查是否已经安装了tinymce

步骤二：在node_modules文件下找到tinymce文档，复制tinymce放入项目的根目录下static的文件夹中

步骤三：把zh_CN.js放入根目录下static文件夹中

步骤四：初始化组件

代码

最后呈现的效果图：

备注：图片，js，css等等一些类静态文件放在static文件下才会有效
（点击查看补充资料）

源码地址：https://github.com/gyfgyz/vue-tinymce