2024年最新quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor(1)，2024年最新前端开发面试题及答案

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

},

methods: {

onEditorReady(editor) { // 准备编辑器

},

onEditorBlur(){}, // 失去焦点事件

onEditorFocus(){}, // 获得焦点事件

onEditorChange(){}, // 内容改变事件

},

computed: {

editor() {

return this.$refs.myQuillEditor.quill;

},

}

}

OK,搞定，简洁的富文本编辑器就展现在你眼前了，另外附上API。Vue-Quill-Editor.

4、自定义 toolbar 菜单

editorOption: {

placeholder: “请在这里输入”,

modules:{

toolbar:[

[‘bold’, ‘italic’, ‘underline’, ‘strike’], //加粗，斜体，下划线，删除线

[‘blockquote’, ‘code-block’], //引用，代码块

[{ ‘header’: 1 }, { ‘header’: 2 }], // 标题，键值对的形式；1、2表示字体大小

[{ ‘list’: ‘ordered’}, { ‘list’: ‘bullet’ }], //列表

[{ ‘script’: ‘sub’}, { ‘script’: ‘super’ }], // 上下标

[{ ‘indent’: ‘-1’}, { ‘indent’: ‘+1’ }], // 缩进

[{ ‘direction’: ‘rtl’ }], // 文本方向

[{ ‘size’: [‘small’, false, ‘large’, ‘huge’] }], // 字体大小

[{ ‘header’: [1, 2, 3, 4, 5, 6, false] }], //几级标题

[{ ‘color’: [] }, { ‘background’: [] }], // 字体颜色，字体背景颜色

[{ ‘font’: [] }], //字体

[{ ‘align’: [] }], //对齐方式

[‘clean’], //清除字体样式

[‘image’,‘video’] //上传图片、上传视频

]

}

},

5、存储及将数据库中的数据反显为HTML字符串

后台接收到数据后会将字符中的标签进行转码，所以我们要先进行一个解码的操作让他变成标签形式的字符串：

例如后台接收的数据如下：“

title<” ，对应解码后就是<h1>title</h1>。

//把实体格式字符串转义成HTML格式的字符串

escapeStringHTML(str) {

str = str.replace(/</g,‘<’);

str = str.replace(/>/g,‘>’);

return str;

}

然后将返回值赋值给对应的参数：

{{str}}

上面的str就是转码函数返回的值，我们要先在data中定义，所以我现在将新增跟展示放在一起，代码如下：

<quill-editor

v-model=“content”

ref=“myQuillEditor”

:options=“editorOption”

@blur=“onEditorBlur($event)"@focus="onEditorFocus($event)”

@change=“onEditorChange($event)”>

{{str}}