项目场景:后台管理系统中富文本编辑器wangeditor的使用
wangeditor使用时新增编辑及回显
1.安装wangeditor插件
npm install wangeditor
2.html中
3.js中引入
js中方法
以上可实现简单的富文本编辑器 如下图:
接下来实现图片上传功能
点击图片上传后效果直接调用本地文件
当this.editor.config.showLinkImg = false时上图效果
当this.editor.config.showLinkImg = true或不写时为下图效果
自此简单的编辑器显示 图片上传功能就实现啦!
下面说一说后台管理系统编辑时富文本的回显:只需要在你点击编辑的方法里面加上
**this.editor.txt.html(this.form.productDesc)**就可以啦!
this.form.productDesc为富文本内的字段
还可能遇到的一个问题就是编辑后关闭弹窗后再重新编辑器内内容不清空,此时只需要在关闭弹窗的方法中加**this.editor.txt.clear()**就可以清空啦!
以上为第一次用wangeditor小白简单总结,没有封装的使用,
附上**https://www.wangeditor.com/**网址,若有不正确的还望大神指点😉