Vue+Webpack完美整合富文本编辑器TinyMce的方法

选择一个合适的富文本编辑器对于一个前端项目至关重要，这次我基于Vue来开发我项目中的前端部分，经过权衡选择了tinymce。其在UI，功能都很适合，tinymce官方文档：点击打开链接；

引入tinymce 我选用的版本4.7.4

 npm install tinymce -S

将tinymce创建为Vue的组件，便于日后复用，创建组件editor.vue

  <textarea></textarea>

在钩子mounted 进行了tinymce的初始化工作，调用 tinymce.init(setting),setting为配置信息这样我们便初步配置完成了editor组件

在其他页面使用组件

  <div class="app-container"> <div> <!-- 组件有两个属性 value 传入内容双向绑定 setting传入配置信息 --> content = content"></div></div> 

此刻我们已经完成了百分之90的配置 ，最后只需将node_modules/_ti本文来源gao*daima.com搞@代#码&网6[email protected]@tinymce/文件夹下的skins文件夹放置于项目根目录下，这样tinymce才可获取皮肤css文件

下载并解压语言包langs文件夹放置项目根目录，中文下载链接 ，其他语言包选择；

之后在页面轻松使用组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。