Vue-cli 项目中使用富文本编辑器
编辑器使用 wangEditor 插件,Github地址:https://github.com/wangfupeng1988/wangEditor/
安装wangEditor
cnpm install wangeditor
配置到vue,在main.js里引入插件:
import editor from 'wangeditor'
Vue.prototype.editor = editor
初始化编辑器
初始化wangEditor需要在dom完全加载之后进行,需要用到vue的$nextTick接口:
let that = this;
that.$nextTick(()=>{
let E = that.editor
window.editor = new E('#editor')
window.editor.create()
})
此时编辑器已经创建完成!插件提供了配置和使用接口,参见文章开头的github项目。
一些小建议:
1. 如果多次初始化实例到同一个dom,后面的实例不会覆盖前面的实例,会产生嵌套的效果。
2.同组件内有多个编辑器的情况,建议封装成组件调用,提升性能
3.按需加载
本文标签: wangEditor