vue中使用tinymce富文本编辑器

之前都是用的quill富文本，但是因为要实现添加表格的功能，quill没有tinymce强大，所以改用了tinymce。当时也是百度了一堆的教程可是没有记录下来，现在发现有的细节忘记了，所以这个文章可能会有错误 。

当时看了好几个安装教程，具体哪个忘记了，感觉像是照着这个教程

参考教程：tinymce富文本编辑器（vue）_天高任鸟飞dyz的博客-CSDN博客_富文本编辑器

tinymce文档参考手册： TinyMCE中文文档中文手册

1、安装（vue 2.X)

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

 我安装是下面这两个版本

 

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下

到官网Language Packages | Trusted Rich Text Editor | TinyMCE下载中文语言包 ，找到对应得tinymce版本。

在刚才创建的static/tinymce文件夹下新建langs文件夹，用来存放下载的中文语言包

2、封装成子组件index.vue

 3、在父组件中引用

import EditorTinymce from "@/components/TinymceEditor/index.vue";

export default {
  components: {
    EditorTinymce
  },
}

4、页面效果