2024年Web前端最全quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor，20道高频面试题（含答案）

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

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}}