vue富文本编辑器vue-quill-editor
一、下载插件
下载vue-quill-editor
npm install vue-quill-editor --save
下载依赖quill
npm install quill --save
二、使用步骤
工具项配置：
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block']
[{
header: 1 }, {
header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
[{
list: 'ordered' }, {
list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{
script: 'sub' }, {
script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{
indent: '-1' }, {
indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
[{
'direction': 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
[{
size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ 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: [] }], // 字体种类-----[{ font: [] }]
[{
align: [] }], // 对齐方式-----[{ align: [] }]
['clean'], // 清除文本格式-----['clean']
['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]
以下代码可直接复制使用：
<template>
<div class="edit_container">
<quill-editor ref="myQuillEditor" v-model="msg" :options="editorOption" @blur="onEditorBlur($event)"
@focus="onEditorFocus($event)" @change="onEditorChange($event)">
</quill-editor>
<div>富文本编辑框的内容字段：{
{
msg }}</div>
<div v-html="msg"></div>
</div>
</template>
<script>
import {
quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block']
[{
header: 1 }, {
header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
[{
list: 'ordered' }, {
list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
[{
script: 'sub' }, {
script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
[{
indent: '-1' }, {
indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
[{
'direction': 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
[{
size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ 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: [] }], // 字体种类-----[{ font: [] }]
[{
align: [] }], // 对齐方式-----[{ align: [] }]
['clean'], // 清除文本格式-----['clean']
['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
components: {
quillEditor
},
data() {
return {
msg: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
editorOption: {
// 默认可以不配置以下几项
placeholder: '请输入文本...',
theme: 'snow',
modules: {
toolbar: {
container: toolbarOptions
}
}
}
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
methods: {
onEditorReady(editor) {
// 准备编辑器
console.log('准备编辑器', editor);
},
onEditorBlur(e) {
console.log('失去焦点事件', e);
}, // 失去焦点事件
onEditorFocus(e) {
console.log('获得焦点事件', e);
}, // 获得焦点事件
onEditorChange(e) {
console.log('内容改变事件', e);
} // 内容改变事件
}
}
</script>
<style lang="less" scope>
// 以下样式分两部分
// 第一部分为修改添加标题文本
.ql-editor {
height: 400px;
line-height: normal !important;
}
.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: '等宽字体';
}
// 第二部分为自定义手写hover图标后提示文本
.ql-toolbar.ql-snow .ql-formats .ql-bold:hover::after {
content: '加粗';
}
.ql-toolbar.ql-snow .ql-formats .ql-italic:hover::after {
content: '斜体';
}
.ql-toolbar.ql-snow .ql-formats .ql-underline:hover::after {
content: '下划线';
}
.ql-toolbar.ql-snow .ql-formats .ql-strike:hover::after {
content: '删除线';
}
.ql-toolbar.ql-snow .ql-formats .ql-blockquote:hover::after {
content: '引用';
}
.ql-toolbar.ql-snow .ql-formats .ql-code-block:hover::after {
content: '代码块';
}
.ql-toolbar.ql-snow .ql-formats .ql-header[value="1"]:hover::after {
content: '标题1';
}
.ql-toolbar.ql-snow .ql-formats .ql-header[value="2"]:hover::after {
content: '标题2';
}
.ql-toolbar.ql-snow .ql-formats .ql-list[value="ordered"]:hover::after {
content: '有序列表';
}
.ql-toolbar.ql-snow .ql-formats .ql-list[value="bullet"]:hover::after {
content: '无序列表';
}
.ql-toolbar.ql-snow .ql-formats .ql-script[value="sub"]:hover::after {
content: '上标';
}
.ql-toolbar.ql-snow .ql-formats .ql-script[value="super"]:hover::after {
content: '下标';
}
.ql-toolbar.ql-snow .ql-formats .ql-indent[value="-1"]:hover::after {
content: '缩进';
}
.ql-toolbar.ql-snow .ql-formats .ql-indent[value="+1"]:hover::after {
content: '缩退';
}
.ql-toolbar.ql-snow .ql-formats .ql-direction[value="rtl"]:hover::after {
content: '文本方向';
}
.ql-toolbar.ql-snow .ql-color .ql-picker-label:hover::after {
content: '字体颜色';
}
.ql-toolbar.ql-snow .ql-background .ql-picker-label:hover::after {
content: '字体背景颜色';
}
.ql-toolbar.ql-snow .ql-align .ql-picker-label:hover::after {
content: '对齐方式';
}
.ql-toolbar.ql-snow .ql-clean:hover::after {
content: '清除文本格式';
}
.ql-toolbar.ql-snow .ql-link:hover::after {
content: '链接';
}
.ql-toolbar.ql-snow .ql-image:hover::after {
content: '图片';
}
.ql-toolbar.ql-snow .ql-video:hover::after {
content: '视频';
}</style>