2024年最全quillEditor vue3 富文本编辑器_vue3 vue-quill-editor，前端开发五年

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

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

Ⅱ.vue3 中 安装 quillEditor

① 下载

npm install @vueup/vue-quill@alpha --save

1
2

② 在main.js 中全局组件式导入

import { createApp } from 'vue';
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

createApp(App)
        .component('QuillEditor', QuillEditor)
        .mount('#app')

1
2
3
4
5
6
7
8

③全局使用

<template>
	<quill-editor
 content-type='html'
 :content='content'
 :options='options' 
 @blur='editorBlur($event)'
 />
</template>

<script setup>
 import { ref } from 'vue';
 let content = ref("<p> 初始内容。。。</p>");
 let options = 。。。。
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• content-type 设置保存的文本类型 ，html => 已超文本的形式保存；
• content 内容也就是这个超文本 => 返回的为 很长的 string 字符串 (HTML 文本)；
• 后端保存这个字符串， 用的时候，把这个字符串 返回来 内容就渲染啦；
• 引入的图片，图片也是 Base64 显示，所以保存 一个字符串 就是 一篇富文本 ；

④ 配置项

• options 则是配置项，表示你要加入那些功能；
• 加了多少 最后会被 treeShaking 不用的摇掉 ，从而打包更小；

    let editorOption = {
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
          [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
          [{ align: [] }], // 对齐方式
          [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
          [{ font: [] }], // 字体种类
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
          [{ direction: 'ltl' }], // 文本方向
          [{ direction: 'rtl' }], // 文本方向
          [{ indent: '-1' }, { indent: '+1' }], // 缩进
          [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
          [{ script: 'sub' }, { script: 'super' }], // 上标/下标
          ['blockquote', 'code-block'], // 引用 代码块
          ['clean'], // 清除文本格式


###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

![](https://img-blog.csdnimg.cn/img_convert/2755ac68335ecac1d583f13ccb7c079c.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/523096642346defb6243f9747227037f.webp?x-oss-process=image/format,png)


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

yT1-1715040917668)]


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34