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

参考tinymce文档：https://www.tiny.cloud/docs/quick-start/

步骤一：在vue中引入tinymce

这是安装中文版必不可少的

npm install tinymce -S

在vue脚手架中使用安装

npm install @tinymce/tinymce-vue -S

如果你用是vue2.0版本的话不要安装这个，vue2中不能使用@tinymce/tinymce-vue为4以上版本；

安装低版本的：例如：npm install @tinymce/[email protected] -S

而tinymce版本大小无所谓

在node_modules文件下找到tinymce文档，复制tinymce放入项目的根目录下public的文件夹中

langs文件夹是中文语言包  如果你没有下载 可以去官网或者我的上一篇文章里有这个源码  

在tinymce新建一个langs文件夹  然后新建一个zh_CN.js文件

再把源码内容粘贴上即可   我在官网没有找到这个语言包就只能用源码  哎  

这是源码网站

https://www.jianshu.com/p/38f20d3e0bfa

官网没有找到这个语言包。。。

步骤二：引入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

      }

这个子组件完整的代码：

然后在src 中app.vue注册组件并中引入:

代码如下：

最后打开项目就可以看到富文本完美的展示出来了