首先解释一下tinymce是什么？它是一款基于vue的前端编辑器插件。
ok，一句话解释完，不说废话，直接撸代码。
通过npm install tinymce-vue --save 安装完成之后，打开node_moudles --> @tinymce-->tinymce-vue.js 可以看到整个js文件包装成var Editor=(function(){});
所以我们的初始化方法以及引入的组件也就和Editor有很大关系
components:{'editor':Editor}
在script中可以建一个div包裹起来Editor如：
<div>
<Editor id="tinymce" v-model="tinymceHtml" :init='init'></Editor>
</div>
上面的init显然就是一个初始化的方法
data(){
return{
init:{
language_url:'/static/tinymce/zh_CN.js',
language:'zh_CN',
skin_url:'/static/tinymce/skins/lightgray',
height:630,
plugins:'link lists code table colorpicker textcolor wordcount
contextmenu'
toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | aligncenter aligncenter alignright alignjustify | bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat'
branding:false
}
}
}
ok ,凯哥码完上面的init，就有疑惑了，这样就行了?
不是，还需要导入很多的文件
第一点，你需要在nodemoudles中找到tinymce里面的skin文件夹将它拷贝到static文件夹中
并且下载一个zh_CN.js文件与skin放在同一个目录下。
第二点，需要引入一堆头文件，但是其实可以根据自己的需求酌情引入
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
怎么样是不是吓一跳？其实这里的原理就是将需要的js包引入到当前文件中
OK,第三点，马上就能出现我们想要的页面了在mounted初始化方法中初始化我们的tinymce
mounted(){
tinymce.init()；
}
OK ，终于可以看到我们的编辑器页面了
