vue 引用tinymce(富文本)

安装tinymce编辑器是出现了上面的情况，于是就找各种方法去解决，结果还是没有头脑，猛然间看到了这篇技术文档https://www.cnblogs.com/jishuzy/p/9584383.html（vue 引用tinymce(富文本)遇到的坑,以及添加本地图片上传），一步一步的做出来了

1、项目中安装tinymce
cnpm install tinymce --s (cnpm 淘宝镜像文件代码)
2、把node_modules\tinymce下的文件夹和中文语言包解压后的文件夹放到项目src/views/…需求的目录下
3、加载富文本需要的资源文件，加载富文本需要的资源文件

4、webpack配置，配置完之后重启项目

webpack.dev.conf.js

webpack.prod.conf.js

5、组件初始化：
在需要用到富文本的组件内，import tinymce from ‘tinymce’
然后初始化 tinymce.init
template
textarea id=“articleEditor”> template

import tinymce from “tinymce”;
export default {
name: “text-editor”,
mounted(){
tinymce.init({
selector: ‘#articleEditor’,
branding: false,
elementpath: false,
height: 600,
language: ‘zh_CN.GB2312’,
menubar: ‘edit insert view format table tools’,
theme: ‘modern’,
plugins: [
‘advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools’,
‘searchreplace visualblocks visualchars code fullscreen fullpage’,
‘insertdatetime media nonbreaking save table contextmenu directionality’,
‘emoticons paste textcolor colorpicker textpattern imagetools codesample’
],
toolbar1: ’ newnote print fullscreen preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample’,
autosave_interval: ‘20s’,
image_advtab: true,
table_default_styles: {
width: ‘100%’,
borderCollapse: ‘collapse’
}
})
}
}