Extend the toolbar of quill editor

Kung Fu brothers can see my Blog www.maple.ink

Extend custom toolbar

Add custom toolbar , stay mounted Method monitor DOM Node creation , Insert the icon inward / written words , You can show it . stay handler Object to add the above customization toolbar Listening in , Trigger method .

//  First, in the  toolbar  Add corresponding parameters in , In this case, the corresponding  DOM  The structure has already been created 
editorOptions: {
    
    modules: {
    
        toolbar: {
    
            container: [
                ['uploadImg'],  //  Expand upload picture 
                ['uploadFile']  //  Extended upload file 
            ],
        },
    }
}

When the rich text editor is ready , You can add icons / The text is convenient and practical .

onEditorReady() {
    
    console.log(' The rich text editor is ready ');
    document.querySelector('.ql-formats .ql-uploadImg').innerText = ' chart ';
    document.querySelector('.ql-formats .ql-uploadFile').innerText = ' writing ';
},

To expand the tool icon binding method ：

data() {
    
    return {
    
        editorOptions: {
    
            modules: {
    
                toolbar: {
    
                    container: [
                        ['uploadImg'],  //  Expand upload picture 
                        ['uploadFile']  //  Extended upload file 
                    ],
                    handlers: {
    
                        'uploadImg': () => {
    
                            //  Note that the arrow function is used here , Using the arrow function this Characteristics of 
                            this.onUploadImage();
                        }
                    }
                },
            }
        }
    }
},
methods: {
    
    onUploadImage() {
    
        console.log(' Trigger upload ');
    }
}

Insert an expression

It can be done by quill-emoji Plug in extensions vue-quill-editor The expression of .

//  install quill-emoji
npm i quill-emoji

Register the plug-in in the component , And add corresponding parameters .

//  Globally mount the rich text editor 
import {
    Quill, quillEditor} from 'vue-quill-editor';
//  introduce emoji expression 
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();
                            },
                        }
                    },
                }
            }
        }
    }
}