扩展quill-editor的工具栏

有功夫的兄弟可以看看我的博客 www.maple.ink

扩展自定义工具栏

增加自定义的 toolbar ，在 mounted 方法中监听DOM节点创建，向内插入图标/文字，即可展示出来。在 handler 对象中增加对上方自定义 toolbar 的监听，触发方法。

// 首先在 toolbar 中增加相应的参数，这时在页面中相应的 DOM 结构其实已经创建完成了
editorOptions: {
    modules: {
        toolbar: {
            container: [
                ['uploadImg'],  // 扩展上传图片
                ['uploadFile']  // 扩展上传文件
            ],
        },
    }
}

富文本编辑器准备好后，即可增加图标/文字方便实用。

onEditorReady() {
    console.log('富文本编辑器准备完成');
    document.querySelector('.ql-formats .ql-uploadImg').innerText = '图';
    document.querySelector('.ql-formats .ql-uploadFile').innerText = '文';
},

向拓展的工具图标绑定方法：

data() {
    return {
        editorOptions: {
            modules: {
                toolbar: {
                    container: [
                        ['uploadImg'],  // 扩展上传图片
                        ['uploadFile']  // 扩展上传文件
                    ],
                    handlers: {
                        'uploadImg': () => {
                            // 注意这里使用的是箭头函数，利用了箭头函数中this的特性
                            this.onUploadImage();
                        }
                    }
                },
            }
        }
    }
},
methods: {
    onUploadImage() {
        console.log('触发上传');
    }
}

插入表情

可通过 quill-emoji 插件扩展 vue-quill-editor 的表情。

// 安装quill-emoji
npm i quill-emoji

将插件在组件中注册，并加入相应参数。

// 全局挂载富文本编辑器
import {Quill, quillEditor} from 'vue-quill-editor';
// 引入emoji表情
import * as quillEmoji from 'quill-emoji';
import 'quill-emoji/dist/quill-emoji.css';

Quill.register('modules/quillEmoji', quillEmoji);

export default {
    components: {
        quillEditor
    },
    data() {
        return {
            editorOptions: {
                modules: {
                    'emoji-toolbar': true,
                    'emoji-shortname': true,
                    toolbar: {
                        container: [
                            ['emoji']
                        ],
                        handlers: {
                            'uploadImg': () => {
                                this.onUploadImage();
                            },
                        }
                    },
                }
            }
        }
    }
}