VUE2下版本的项目加入富文本框实现

即使看了很多文档，实践起来还是会存在很多坑的，捯饬了一下午，终于可以了，记录一下

本案例是采用tinymce这个插件，中文官网：http://tinymce.ax-z.cn/，直接进入 "三方集成专区" 查看

一、首先下载资源：

 npm install tinymce -S 

但是只使用这个命令，虽然官网说的是一次将所有的依赖的包全下载下来，但是我npm run dev时，就会报出下面这个错：翻译为@tinymce/tinymce-vue/这个文件下的js找不到

那就是缺少这个依赖的下载，于是再下载一下

npm install @tinymce/tinymce-vue

这样下载安装的话，webpack打包更新是不会报错了，但是在浏览器就会报错，如下：

是因为tinymce/tinymce-vue这个包的版本不对，太高了，故需再执行

npm install @tinymce/tinymce-vue@3.0.1

至此，回归正常

二、开始配置

1、下载后，将node_module文件下的tinymce文件，拷贝一份到vue项目的与src同级别的static目录下

因为这个插件是英文的，故需下载个中文包转换一下：https://www.tiny.cloud/get-tiny/language-packages/     下载后需再将其再放入static目录下，后面用于init初始化参数

在vue组件中引入vue带的tinymce组件 ，只需引这一个即可，不需多引  ：  import Editor from "@tinymce/tinymce-vue";

2、然后在components进行注册声明 ：components: { "tinymce": Editor } 可映射可不映射，看自己

然后在组件上使用此组件：

<tinymce :init="init" v-model="form.content"></tinymce>

v-model绑定的是富文本的初始文案

init属性就是初始化富文本的一些参数，一般配置如下：

  init: {
                language_url: "/static/zh_CN.js", //路径就是我们下载的中文语言包路径
                language: "zh_CN",        //声明富文本的语言类型
                height: 430,       
                menubar:true,//是否显示上面菜单
                plugins:"link lists image code table colorpicker textcolor wordcount contextmenu",