Enhanced paste quill editor

Kung Fu brothers can have a look at my Blog www.maple.ink

Paste picture into rich text

Drag and drop the image directly to rich text , Or copy image files from the system , Paste in rich text , Can't put pictures into rich text . The former will open a new window directly in the browser , The latter has no direct reaction .

Through installation quill-image-extend-module The enhancement module enables the rich text editor to drag and drop pictures into the rich text box , But it does not have the function of copying and pasting into rich text . It can cooperate with quill-image-resize-module The module sets the size of the picture .

//  Introduce picture enhancement module 
import {
    container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
//  The picture control enhancement module is introduced 
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/ImageResize', ImageResize)

export default {
    
    data() {
    
        return {
    
            editorOptions: {
    
                modules: {
    
                    ImageExtend: {
    
                        loading: true,
                        name: 'img',
                        action: '',
                        headers: (xhr) => {
    
                        },
                        response: (res) => {
    
                            return res.info
                        }
                    },
                    ImageResize: {
    
                        modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
                    },
                }
            }
        }
    }
}

Be careful ： Although this method has the function of displaying pictures in rich text boxes , But the principle is actually to get the picture file object , adopt FileReader Object to convert it to base64 Format , Put in img Of src Properties of the , Therefore, theoretically speaking, it does not have the ability to transfer large files , There may also be some degree of distortion .

Paste file into rich text

The main principle of pasting a file is to bind the paste event of the current rich text box , Get the pasted by pasting the event file object .

//  Introduce custom formats 
import uploadFile from './quillPlus/uploadFile';
uploadFile.blotName = 'uploadFile';
uploadFile.tagName = 'div';
Quill.register(uploadFile);

methods: {
    
        onEditorFocus() {
    
            let quill = this.$refs.editor.quill,
                self_ = this;
            //  Listen for paste events 
            quill.root.addEventListener('paste', (event)=> {
    
                //  Determine whether the pasted picture is 
                if(event.clipboardData && event.clipboardData.files && event.clipboardData.files) {
    
                    //  Prevent native Events 
                    event.preventDefault();
                    let cursorIndex = quill.selection.savedRange.index;
                    [].forEach.call(event.clipboardData.files, file => {
    
                        //  Determine whether the current file is a picture 
                        if(file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
    
                            let reader = new FileReader();
                            reader.readAsDataURL(file);
                            reader.onload = function(e) {
    
                                quill.insertEmbed(cursorIndex, 'image', e.target.result);
                            }
                        }else {
    
                            //  Notice here because  insertEmbed  Statements can only be inserted into rich text in a well-defined format , So we need to extend the current format 
                            quill.insertEmbed(cursorIndex, 'uploadFile', {
    file: file, fileIndex: self_.fileIndex++});
                        }
                    })
                }
            });
        },
    }

Custom format components

import {
    Quill} from 'vue-quill-editor';

const BlockEmbed = Quill.import('blots/block/embed');
class uploadFile extends BlockEmbed {
    
    static create(value) {
    
        let node = super.create();
        //  Set up a class Class name controls style 
        node.setAttribute('class', 'upload-file');
        //  Setting does not allow operation 
        node.setAttribute('contentEditable', false);
        //  Set up data-id Mark 
        node.setAttribute('data-id', value.fileIndex);
        node.innerText = value.file.name;
        return node;
    }

    static value(node) {
    
        return {
    
            dataId: node.getAttribute('data-id')
        }
    }
}

export default uploadFile;

This solution can also solve the problem of uploading pictures , Especially big pictures .

Be careful ： There are two solutions for uploading files ：

• Paste the file into rich text to trigger uploading , adopt HTTP Requesting a direct call to the interface will file Object to fromData Deliver to the server . After receiving the file, the server returns the link of the current file on the server , Insert link into page DOM On the property of .
• Paste the file into the rich text and the current file Object into an array , Click the upload button to upload to the server through the loop .

The first solution is recommended for uploading files , as a result of ： Easy front end ~