最近的vue项目要做一个富文本编辑的功能，选择了vue-kindEditor这个编辑器，使用方法很简单，大体上是根据官网https://github.com/ff755/vue-kindedtior-demo的安装步骤，可能不同项目会有一点差别；
1.这里我先说一下有区别的地方——pluginsPath 的地址：下图是官网上的例子：
pluginsPath是编辑器的插件目录，也可以添加自定义插件的目录，但是在我的项目中我的地址的是这样写的
/代表根目录，这样写在本地运行项目没有问题，但是打包后运行显示找不到目录，这时候把/去掉，本地不会有影响，再打包后也可以正常运行。
2.进入正题，刚开始我要做一个功能，就是在编辑器里面插入文本，在对这个编辑器一无所知的情况下我首先想到了网上很多的光标处插入文本的例子，但是几经尝试后都失败了。
最后信息查看文档，原来kindEditor有一个自定义插件的功能（我理解是vue-kindEditor只是把vue和kindEditor结合成组件，都可以当成是一个东西，所以我查看了kindEditor的官方文档http://kindeditor.net/demo.php），文档上给的例子很简单，试验之后发现它可以完美的解决我想插入文本的功能（大家可以按照例子添加hello插件，很简单我就不在这里重复了）。
3.找到了自定义插件后，又要下一步的探索了，如何做一个自定义的下拉插件、并且下拉的内容是根据请求获取的数据，这就要用到下拉菜单的api了，下面简述一下我的制作步骤：
（1）在plugins文件夹新建一个文件夹“emailtpl1”→“emailtpl1.js”，这个js就是我们插件的生成地方。
第一处划线地方是我做的ajax请求的方法，如果你的项目不需要数据请求可以不用我的这一步（这里我需要声明的一点是kindEditor本身是可以进行数据请求的，但是我调用的时候参数总是传不对，要么是[object]，要么就是把字符串全都拆分了，不得已我才用js原生的ajax请求方法进行的数据请求。），res是我请求回来的数据，也就是我想动态的获取数据而不是写死在项目里。第二个划线的地方是name，这个name可以让插件准确的定位。
（2）在项目的main.js中配置lang，这个应该是鼠标悬停会有的提示文字：
（3）在配置工具栏的地方添加上你的自定义插件：
（4）最后是效果图，第一个工具就是我的自定义插件，点击之后会将文本插入到光标所在处：