富文本编辑器vue-quill-editor的高级用法(二)之添加工具栏的配置

前言
前面已经讲了如何渲染出一个最简单的富文本编辑器以及如何更改富文本编辑器的一些基础样式，本篇文章我将带领大家来讲解工具栏的配置

<template>
    <!-- Two-way Data-Binding -->
    <quill-editor class='editor' ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange($event)" />
</template>
   
  
<script>
// 工具栏配置
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'] }] 或者 [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }]
    [{ 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']
    ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
];

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: ``, // 富文本编辑器默认内容
            editorOption: {
                //  富文本编辑器配置
                modules: {
                    //工具栏定义的
                    toolbar: toolbarOptions
                },
                //主题
                theme: "snow",
                placeholder: "请输入正文"
            }
        }
    },
    methods: {
        //失去焦点事件
        onEditorBlur(quill) {
            console.log('editor blur!', quill)
        },
        //获得焦点事件
        onEditorFocus(quill) {
            console.log('editor focus!', quill)
        },
        // 准备富文本编辑器
        onEditorReady(quill) {
            console.log('editor ready!', quill)
        },
        //内容改变事件
        onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.content = html
        }
    }
}

</script>
  
<style scoped lang="scss">
.editor {
    line-height: normal !important;
    height: 500px;
    width: 60%;
}

::v-deep .ql-toolbar.ql-snow {
    background-color: #FAFAFA;
    border: 1px solid #eee !important;
}

::v-deep .ql-container.ql-snow {
    border: 1px solid #eee !important;
}
</style>