vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor 。开始我用的是 vue-quill-editor,后来又换成了 wangeditor。为啥呢?因为 vue-quill-editor 无法使用表格,而且不能汉化,即使使用了官方提供的改变css的那套方法也感觉很丑。
先看看使用 wangeditor 之后的页面效果吧
再看看代码里如何使用的吧
<el-form-item label="内容:" prop="content" ref="contentRef">
<div class="editDiv">
<div id="textEditor"></div>
<div class="textNum">{{ TiLength }}/5000</div>
</div>
</el-form-item>
import E from 'wangeditor'
mounted() {
this.editorInit()
},
methods: {
// 富文本框初始化
editorInit() {
this.contentEditor = new E('#textEditor')
this.contentEditor.config.height = 340
// 本身默认的zIndex太大,导致有弹框时浮在上面
this.contentEditor.config.zIndex = 10
// 隐藏网络图片
this.contentEditor.config.showLinkImg = false
// 自定义上传图片
this.contentEditor.config.customUploadImg = async (
files,
insertImgFn
) => {
// 调接口上传图片
uploadFile({
file: files[0]
}).then((res) => {
if (res.code === '200') {
// 此方法是富文本自带的方法,将图片插入到编辑器中
insertImgFn(`${process.env.VUE_APP_UPLOAD_URL}/${res.data}`)
}
})
}
this.contentEditor.config.onchange = () => {
this.TiLength = this.contentEditor.txt.text().length
this.mergeData.content = this.contentEditor.txt.html()
if (this.TiLength) {
this.$refs.contentRef.clearValidate()
}
}
this.contentEditor.config.onchangeTimeout = 500
this.contentEditor.create()
},
上面我使用的上传图片是自定义上传,开始使用的base64格式的图片,但此种格式保存时字段太长,且大小有限制,所以换成了接口上传的方式