本文为大家分享了Vue quill Editor富文本编辑器的具体使用方法,供大家参考,具体内容如下
先看效果图:
1、下载Vue-quill-Editor
rush:js;">
npm install vue-quill-editor --save
2、下载quill(Vue-quill-Editor需要依赖)
rush:js;">
npm install quill --save
3、代码
rush:xhtml;">
quill-editor
v-model="content"
ref="myquillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
OK,搞定,简洁的富文本编辑器就展现在你眼前了,另外附上API。Vue-Quill-Editor
4、存储及将数据库中的数据反显为HTML字符串
后台接收到数据后会将字符中的标签进行转码,所以我们要先进行一个解码的操作让他变成标签形式的字符串: 例如后台接收的数据如下:"
title<" ,对应解码后就是`title
`。
rush:js;">
//把实体格式字符串转义成HTML格式的字符串
escapestringHTML(str) {
str = str.replace(//g,'>');
return str;
}
然后将返回值赋值给对应的参数: