豫ICP备2024044691号-1
powered by emlog
Vue-cli 项目中使用富文本编辑器
Mins 2020-3-25 13:12 JavaScript

编辑器使用 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.按需加载