VUE- quill-editor 编辑器使用及自定义toobar详解

vue使用编辑器，这里讲解编辑器quil-editor

官网：https://quilljs.com/docs/modules/toolbar 

1：安装quill-eidtor

npm i [email protected] --save

2：创建一个页面，再template里写入

在script中引入依赖 及quill的toobar的各种按钮的简单配置

上面这是简洁版，直接可以写出一个带有多种按钮操作的编辑器。

效果如下

 3：自定义toobar中各个小标签

除了可以对原来的小button设置颜色，还可以对原来的添加文字描述，并且还可以有长期hover后的弹框提示。

在template中原来toobar的地方换成标签

而script中需要改成这样

export default {
    data() {
        return {
            quill: null,
            editorIndex: 0,
            editorOption: {
    
                theme: "snow",
                modules: {
                    // toolbar: this.toolbar(),
                    toolbar: '#toolbar',
                },
                placeholder: "请输入内容...",
                readOnly: false,
            },
        };
    },

css

样式如下

原三方按钮的颜色修改，添加提示文字（颜色和位置可以修改），添加自定义按钮（最后一个就是），长期hoverbutton后出现的弹框文字提示。

 总：写的时候会遇到很多问题，尤其是自定义的时候，