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

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

  • 引入tinymce 我选用的版本4.7.4
npm install tinymce -S
  • 将tinymce创建为Vue的组件,便于日后复用,创建组件editor.vue




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




  • 此刻我们已经完成了百分之90的配置 ,最后只需将node_modules/[email protected]@tinymce/文件夹下的skins文件夹放置于项目根目录下,这样tinymce才可获取皮肤css文件
  • 下载并解压语言包langs文件夹放置项目根目录,中文下载链接 ,其他语言包选择;
  • 之后在页面轻松使用组件
Vue + Webpack 完美整合富文本编辑器 TinyMce_第1张图片

END

你可能感兴趣的:(前端,Vue)