【vue】使用wangeditor富文本编辑器
前言:本项目需要一个轻量级的,能够显示源码的富文本编辑器。经查询对比后,选择wangeditor,但是发现wangeditor3(最新版)中没有展示源码的功能,故选择wangeditor2。wangeditor2使用手册:https://www.kancloud.cn/wangfupeng/wangeditor2/113961使用方法:1.下载:选择npm安装:因为目前默认...
·
前言:
本项目需要一个轻量级的,能够显示源码的富文本编辑器。
经查询对比后,选择wangeditor,但是发现wangeditor3(最新版)中没有展示源码的功能,故选择wangeditor2。
wangeditor2使用手册:https://www.kancloud.cn/wangfupeng/wangeditor2/113961
使用方法:
1.下载:
选择npm安装:因为目前默认版本为3.1.1,故安装的时候需要写明需要安装的版本号
npm install wangeditor@2.1.23 --save
2.开始使用
<div id="websiteEditorElem" style="height: 250px"></div>
import E from 'wangeditor'
mounted () {
// wangeditor
phoneEditor = new E('phoneEditorElem')
phoneEditor.onchange = function () {
this.formData.phone = this.$txt.html()
}
phoneEditor.create()
},
实现效果:
1.默认状态下
2.显示源码
更多推荐
已为社区贡献2条内容
所有评论(0)