1、下载Vue-Quill-Editor
npm install vue-quill-editor --save
复制页面代码即可完成引入和初始化
<template>
<div class="edit_container" style="height: 350px;">
<quill-editor
style="height: 300px;"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</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';
export default {
components: {
quillEditor
},
data() {
return {
content: `<a href="http://www.cctv.com/">央视网</a>`,
editorOption: {
modules:{ //modules为自定义标题栏,使用默认的话可去掉modules
toolbar:[
['bold', 'italic', 'underline', 'strike'],//分别对应的是: 粗体,斜体,下划线,删除线
['blockquote', 'code-block'], //
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],//显示有序和无序列表
[{ 'color': [] }, { 'background': [] }], //显示背景字体颜色
[{ 'font': [] }], //显示字体选择
[{ 'align': [] }], //显示居中
['link'], //显示超链接
]
}
}
}
},
methods: {
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(){}, // 内容改变事件
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
}
}
</script>
示例:[‘head’]加入 到modules中即可
自定义菜单配置配置说明
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
展示效果如下