富⽂本编辑框vue-quill-editor的使⽤和优化
最近做了⼀个⽂章上传的项⽬，因为考虑到⽂章内容中有⽂字样式的需求和图⽚的插⼊，就做了⼀个富⽂本框的功能，我选择的插件就是vue-quill-editor，下边总结⼀下我在这⾥边踩过的坑和解决⽅案。分为两⼤部分来讲解，使⽤和优化
⼀、使⽤
1，下载插件
npm install vue-quill-editor --save
2，引⽤
在vue的main.js⽂件中添加这两⾏代码，就是引⽤和使⽤
import QuillEditor from 'vue-quill-editor'
Vue.use(QuillEditor)
3，在插件中使⽤
（1）html部分
<el-form-item label="内容" :label-width="formLabelWidth">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @ focus="onEditorFocus($event)" @change="onEditorChange($event)">
</quill-editor>
</el-form-item>
（2）editorOption这个数据是⼯具栏的定义（图⽚是便于观看，图⽚下边附部分你需要的代码）
⼯具栏功能的常量，我这个不全，⽹上随便，有的是
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],        // toggled buttons
['blockquote', 'code-block'],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
[{'direction': 'rtl'}],                        // text direction
[{'color': []}, {'background': []}],          // dropdown with defaults from theme
[{'align': []}],
['image'],
['clean']                                        // remove formatting button
]
⼯具栏的定义，与html中的数据变量是⼀致就⾏
editorOption: {
placeholder: '',
asp富文本编辑器
theme: 'snow',  // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions,  // ⼯具栏
}
}
}
4，内容处理
quill-editor 得到的内容是由若⼲个<p></p>标签包裹的字符串，我们可以根据需求⾃⾏处理
⼆、优化
在使⽤过程中，发现了⼀个问题，这个富⽂本编辑器对图⽚的处理是把图⽚转换成base-64格式的，⼩⼩的⼀张图⽚就是⼀组很长的字符串，如果内容中有过多的图⽚，那就会发⽣412错误，就是上传的数据量过⼤，⾯对这种情况服务器可以设置增⼤限制上线，但是这种⽅案就会显的很low，还会对回显有
不利影响。我想办法做了优化，把富⽂本编辑器的图⽚导⼊功能直接做了上传，之后我们富⽂本的内容中直接就变成<p><img src="xxxxxxxx"></p>，这样⼦⼤⼤减少了内容对服务器的损耗。下边直接上代码，具体的功能请⾃⾏琢磨
html代码中增加⼀个上传的功能
<el-form-item label="内容">
<!-- 图⽚上传组件辅助-->
<el-upload
class="avatar-uploader quill-img"
action="这⾥是你图⽚上传所访问的后台接⼝"
:show-file-list="false"
:on-success="uploadSuccess"
>
</el-upload>
<!--富⽂本编辑器组件-->
<quill-editor
v-model="t"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)">
</quill-editor>
</el-form-item>
data中对image这项功能做重写覆盖
editorOption: {
placeholder: '',
theme: 'snow',  // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions,  // ⼯具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图⽚⽂件
document.querySelector('.quill-img input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}
methods中给上传成功的回调函数做处理
uploadSuccess(res) {  //把已经上传的图⽚显⽰回富⽂本编辑框中
//res返回的格式是{url:"图⽚的路径"}，这个是后台接⼝返回的
let quill = this.$QuillEditor.quill
quill.focus();
quill.Selection().index, 'image', res.url);    },
这回功能就做好了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。