Vue中使用quill-editor(富文本编辑器)
一、安装quill-editor富文本编辑器
安装:
npm install vue-quill-editor --save
安装Vue-Quill-Editor需要依赖:
npm install quill --save
二、引入
1.全局引入
在main.js中引入(示例):
// 文件:main.js
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
// 下面三行必须要写
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
全局引入结束,在页面中即可使用。
2.局部引入
在模块中引入(示例):
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
</script>
模块中引入结束。
三、使用
以局部引入为例:
<template>
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
>
</quill-editor>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
components: { quillEditor },
data() {
return {
content: null,
editorOption: {},
};
},
methods: {
onEditorBlur() {
//失去焦点事件
},
onEditorFocus() {
//获得焦点事件
},
onEditorChange() {
//内容改变事件
},
},
};
</script>
效果图:
四、toolbar工具栏对应的模块
首先要知道toolbar包括哪些内容,toolbar里的内容大致分为以下两类:
// 1.只需要填写功能名
bold - 加粗
italic - 斜体
underline - 下划线
strike - 删除线
blockquote - 引用
code-block - 代码块
formula - 公式
image - 图片
video - 视频
clean - 清除所有样式
// 这一类直接['name','name']就可以使用
// 2.需要写默认值
header - 标题
[{ 'header': 1 }, { 'header': 2 }]
list - 列表(有序和无序列表)
[{ 'list': 'ordered'}, { 'list': 'bullet' }]
script - 上标/下标
[{ 'script': 'sub'}, { 'script': 'super' }]
indent - 缩进
[{ 'indent': '-1'}, { 'indent': '+1' }]
direction - 文本方向
[{ 'direction': 'rtl' }]
// 3.有多个值,以下拉列表展示
// false代表默认选中
size - 文字大小
[{ 'size': ['small', false, 'large', 'huge'] }]
header - 标题
[{ 'header': [1, 2, 3, 4, 5, 6, false] }]
// 4.只需填写一个空数组 系统会出现默认的选项
color - 字体颜色
background - 背景颜色
[{ 'color': [] }, { 'background': [] }]
font - 字体
[{ 'font': [] }]
align - 文本对齐
[{ 'align': [] }]
五、使用自定义的toolbar
1.定制自己的toolbar
了解了toolbar中的内容,就可以在配置toolbar时选择自己需要的功能,如果有不需要的功能,在下面的数组中删除即可。
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
["blockquote", "code-block"], // 引用 代码块-----['blockquote', 'code-block']
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ 'header': 1 }, { 'header': 2 }],
[{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: "-1" }, { indent: "+1" }],
[{ size: ['small', false, 'large', 'huge']}], // 配置字号
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ font: []}], //显示字体选择
[{ align: [] }], // 对齐方式-----
["clean"], // 清除文本格式-----
['link', 'image', 'video'], // 链接、图片、视频-----
];
2.使用定制的toolbar
模块中使用代码如下(示例):
<script>
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
["blockquote", "code-block"], // 引用 代码块-----['blockquote', 'code-block']
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ 'header': 1 }, { 'header': 2 }],
[{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: "-1" }, { indent: "+1" }],
[{ size: ['small', false, 'large', 'huge']}], // 配置字号
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ font: []}], //显示字体选择
[{ align: [] }], // 对齐方式-----
["clean"], // 清除文本格式-----
['link', 'image', 'video'], // 链接、图片、视频-----
];
export default {
data() {
return {
content: null,
editorOption: {
// 主题
theme: "snow",
modules: {
toolbar: toolbarOptions,
},
},
};
},
};
</script>
3.完整代码
<template>
<quill-editor
v-model="content"
ref="editorRef"
:options="editorOption"
@focus="onEditorFocus($event)"
@blur="onEditorBlur($event)"
@change="onEditorChange($event)"
class="editor"
/>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
// 定制toolbar
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
["blockquote", "code-block"], // 引用 代码块-----['blockquote', 'code-block']
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ header: 1 }, { header: 2 }],
[{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: "-1" }, { indent: "+1" }],
[{ size: [] }], // 配置字号
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ font: [] }], //显示字体选择
[{ align: [] }], // 对齐方式-----[{ align: [] }]
["clean"], // 清除文本格式-----['clean']
["link"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
name: "TestQuillEditor",
components: { quillEditor },
data() {
return {
content: "",
editorOption: {
theme: "snow",
modules: {
toolbar: toolbarOptions,
},
},
};
},
computed: {
//当前富文本实例
editor() {
return this.$refs.editorRef.quillEditor;
},
},
methods: {
// 准备富文本编辑器
onEditorReady() {},
// 富文本编辑器 失去焦点事件
onEditorBlur() {},
// 富文本编辑器 获得焦点事件
onEditorFocus() {},
// 富文本编辑器 内容改变事件
onEditorChange({ html }) {
//内容改变事件
// console.log('内容改变事件');
},
},
};
</script>
<style>
</style>
效果图如下:
六、增加字体和文字大小--准备css文件
新建字体文件的css文件
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
content: "黑体";
font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
content: "微软雅黑";
font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
content: "楷体";
font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
content: "仿宋";
font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
content: "Arial";
font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
content: "Times New Roman";
font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
content: "sans-serif";
font-family: "sans-serif";
}
.ql-font-SimSun {
font-family: "SimSun";
}
.ql-font-SimHei {
font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
font-family: "KaiTi";
}
.ql-font-FangSong {
font-family: "FangSong";
}
.ql-font-Arial {
font-family: "Arial";
}
.ql-font-Times-New-Roman {
font-family: "Times New Roman";
}
.ql-font-sans-serif {
font-family: "sans-serif";
}
/* 字号设置 */
/* 默认字号 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
content: "14px";
font-size: 14px;
}
.ql-size-14px {
font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
content: "16px";
font-size: 16px;
}
.ql-size-16px {
font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
content: "18px";
font-size: 18px;
}
.ql-size-18px {
font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
content: "20px";
font-size: 20px;
}
.ql-size-20px {
font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
content: "22px";
font-size: 22px;
}
.ql-size-22px {
font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
content: "26px";
font-size: 26px;
}
.ql-size-26px {
font-size: 26px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
content: "28px";
font-size: 28px;
}
.ql-size-28px {
font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
content: "30px";
font-size: 30px;
}
.ql-size-30px {
font-size: 30px;
}
七、增加字体和文字大小--使用该css文件
1.引入到模块中
本人新建的css文件保存在 assets/css/quillEditor.css ,使用下面代码时需要改成自己的路径。
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
// 必须要引入
import * as Quill from "quill";
// 新建的css文件的保存位置,如不同,需要修改
import "../assets/css/quillEditor.css";
// 自定义的字体,注意下面的内容要和css里面对应上
var fonts = [
"SimSun",
"SimHei",
"Microsoft-YaHei",
"KaiTi",
"FangSong",
"Arial",
"Times-New-Roman",
"sans-serif",
];
// 自定义字号的大小,注意下面的内容要和css里面对应上
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
</script>
2.将css注册到quill-editor中
不知道是不是这么个意思,反正这么写就对了。
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);
八、完整代码
<template>
<quill-editor
v-model="content"
ref="editorRef"
:options="editorOption"
@focus="onEditorFocus($event)"
@blur="onEditorBlur($event)"
@change="onEditorChange($event)"
class="editor"
/>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
import "../../assets/css/quillEditor.css";
import * as Quill from "quill";
//quill编辑器的字体
var fonts = [
"SimSun",
"SimHei",
"Microsoft-YaHei",
"KaiTi",
"FangSong",
"Arial",
"Times-New-Roman",
"sans-serif",
];
// 自定义字号的大小
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
["blockquote", "code-block"], // 引用 代码块-----['blockquote', 'code-block']
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: "-1" }, { indent: "+1" }],
[{ size: sizes }], // 配置字号
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ font: fonts }], //显示字体选择
[{ align: [] }], // 对齐方式-----[{ align: [] }]
["clean"], // 清除文本格式-----['clean']
['link', 'image', 'video'], // 链接、图片、视频-----
];
export default {
name: "TestQuillEditor",
components: { quillEditor },
data() {
return {
content: "",
editorOption: {
theme: "snow",
modules: {
toolbar: toolbarOptions,
},
},
};
},
computed: {
//当前富文本实例
editor() {
return this.$refs.editorRef.quillEditor;
},
},
methods: {
// 准备富文本编辑器
onEditorReady() {},
// 富文本编辑器 失去焦点事件
onEditorBlur() {},
// 富文本编辑器 获得焦点事件
onEditorFocus() {},
// 富文本编辑器 内容改变事件
onEditorChange({ html }) {
//内容改变事件
},
},
};
</script>
<style>
</style>
效果图:
九、组件封装
在components中新建文件,写入下面的代码:
<template>
<quill-editor
:id="randomId(3)"
v-model="content"
:ref="editorRef"
:options="editorOption"
@focus="onEditorFocus($event)"
@blur="onEditorBlur($event)"
@change="onEditorChange($event)"
class="editor"
/>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
// 自定义的字体和文字大小样式
import "../assets/css/quillEditor.css";
import * as Quill from "quill";
//quill编辑器的字体
var fonts = [
"SimSun",
"SimHei",
"Microsoft-YaHei",
"KaiTi",
"FangSong",
"Arial",
"Times-New-Roman",
"sans-serif",
];
// 自定义字号的大小
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
["blockquote", "code-block"], // 引用 代码块-----['blockquote', 'code-block']
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{ indent: "-1" }, { indent: "+1" }],
[{ size: sizes }], // 配置字号
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
[{ font: fonts }], //显示字体选择
[{ align: [] }], // 对齐方式-----[{ align: [] }]
["clean"], // 清除文本格式-----['clean']
["link"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
name: "TestQuillEditor",
components: { quillEditor },
props: {
// 编辑器的内容
editorContent: {
type: String,
required: true,
},
editorRef: {
type: String,
required: true,
},
},
data() {
return {
content: this.editorContent,
editorOption: {
theme: "snow",
modules: {
toolbar: toolbarOptions,
},
},
};
},
computed: {
//当前富文本实例
editor() {
return this.$refs.editorRef.quillEditor;
},
},
watch: {
editorContent() {
this.content = this.editorContent;
},
},
methods: {
randomId(len) {
var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
var tempLen = chars.length,
tempStr = "";
for (var i = 0; i < len; ++i) {
tempStr += chars.charAt(Math.floor(Math.random() * tempLen));
}
return tempStr;
},
// 准备富文本编辑器
onEditorReady() {},
// 富文本编辑器 失去焦点事件
onEditorBlur() {},
// 富文本编辑器 获得焦点事件
onEditorFocus() {},
// 富文本编辑器 内容改变事件
onEditorChange({ html }) {
//内容改变事件
// console.log('内容改变事件');
this.$emit("input", this.content);
},
},
};
</script>
<style>
</style>
十、父组件引用
代码如下(示例):
<template>
<div>
<editor
v-model="editorContent"
:editorContent="editorContent"
:editorRef="editorRef"
></editor>
<!-- 回显富文本编辑器的内容 -->
<div v-html="editorContent"></div>
<!-- 查看富文本编辑器的内容 -->
<div>{{ editorContent }}</div>
</div>
</template>
<script>
// 引入子组件
import editor from "../../components/Quill-editor.vue";
export default {
components: {
editor,
},
data() {
return {
editorRef: "test",
editorContent: "",
};
},
methods: {},
};
</script>
<style>
</style>
效果图:
来源:https://blog.csdn.net/qq_36947168/article/details/119488316
凯宾斯基:https://www.cnblogs.com/kaibindirver/p/14271067.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步