有功夫的兄弟可以看看我的博客 www.maple.ink
安装&挂载
在非Vue项目中可以通过 CDN 的方式引入,但是在Vue项目中更推荐使用 npm 安装的方式进行使用。
不甚清楚的地方大家可以查阅翻译的官方文档。
npm i vue-quill-editor
安装成功后可以选择全局挂载富文本编辑器/组件内挂载两种方式
// main.js --- 全局挂载富文本编辑器
import VueQuillEditor from 'vue-quill-editor';
// 引入相应的css样式文件
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
Vue.use(VueQuillEditor);
// 组件内挂载富文本编辑器
import { quillEditor } from 'vue-quill-editor'
// 引入相应的css样式文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 将组件注册
export default {
components: {
quillEditor
}
}
使用
将组件挂载完成后,创建新组件 Editor.vue ,并使用之前挂载的组件。
<template>
<div class="editor-wrapper">
<quill-editor v-model="editorContent"></quill-editor>
</div>
</template>
<script>
export default {
name: "Editor",
data() {
return {
editorContent: '',
}
}
}
</script>
展示效果如下:
默认状态下的富文本编辑器,顶部的工具栏(toolbar)展示的是最常用的,富文本编辑器内输入的数据可直接通过 v-model 双向数据绑定获取,但若在其中输入特殊字符,可能存在转义。
扩展
输入提示语
修改输入提示语:
export default {
name: "Editor",
data() {
return {
editorOptions: {
placeholder: '请输入...'
}
}
}
}
配置工具栏
通过配置工具栏可以自由选择想要显示的工具项:
export default {
name: "Editor",
data() {
return {
editorOptions: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
['blockquote', 'code-block'], //引用,代码块
[{ 'list': 'ordered'}, { 'list': 'bullet' }], //列表
[{ 'script': 'sub'}, { 'script': 'super' }], // 上下标
[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题
[{ 'color': [] }, { 'background': [] }], // 字体颜色,字体背景颜色
['clean'], //清除字体样式
]
}
}
}
}
}
显示效果如下:
编辑器方法
ready()准备方法:富文本编辑器准备完成后触发此方法。
focus()焦点方法:获取焦点时触发此方法。
blur()失焦方法:失去焦点触发此方法。
change()修改方法:修改富文本编辑器内容触发此方法。
<quill-editor
:options="editorOptions"
v-model="editorContent"
@ready="onEditorReady"
@focus="onEditorFocus"
@blur="onEditorBlur"
@change="onEditorChange"
>
</quill-editor>
methods: {
onEditorReady() {
console.log('富文本编辑器准备完成');
},
onEditorFocus() {
console.log('获得焦点');
},
onEditorBlur() {
console.log('失去焦点');
},
onEditorChange() {
console.log('触发修改内容');
}
}
汉化编辑器
通过css设置编辑器中工具栏及操作等转换为中文:
.editor {
line-height: normal !important;
height: 500px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
}
.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="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}