quill富文本编辑器quill粘贴图片上传服务器

强大的富文本编辑器：quill
github：32k start++，：https://github.com/quilljs/quill

quill粘贴图片上传服务器

<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<div id="editor" style="height: 370px">
	<p>Hello World!</p>
</div>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{'header': 1}, {'header': 2}],               // custom button values
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
            [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
            [{'direction': 'rtl'}],                         // text direction

            [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
            [{'header': [1, 2, 3, 4, 5, 6, false]}],

            [{'color': []}, {'background': []}],          // dropdown with defaults from theme
            [{'font': []}],
            [{'align': []}],
            ['image'],

            ['clean']                                         // remove formatting button
        ];
        var editor = new Quill('#editor', {
            modules: {toolbar: toolbarOptions},
            theme: 'snow',
        });

		// 粘贴图片上传服务器
		editor.root.addEventListener("paste", (e) => {
            console.log(e)
            console.log(this)
            const clipboardData = e.clipboardData
            // support cut by software & copy image file directly
            const isImage = clipboardData.types.length && clipboardData.types.join('').includes('Files');
            if (!isImage) {
                return;
            }
            // only support single image paste
            const file = clipboardData.files[0];
            if (!file || !file.name || !(file.name.toLowerCase().indexOf(".png") !== -1 || file.name.toLowerCase().indexOf(".gif") !== -1
                || file.name.toLowerCase().indexOf(".jpg") !== -1)) {
                console.log('粘贴的不是图片')
                return;
            }
            var formData = new FormData;
            formData.append('file', file)
            // 在此执行上传
            $.ajax({
                data: formData,
                processData: false,//不做处理
                contentType: false,//不做处理
                sync: false,
                url: '/file/up/img',
                type: 'post',
                success(data) {
                    console.log(data)
                    if (data.code==0){
                        const range = editor.getSelection(true);
                        editor.insertEmbed(range.index, 'image', data.data);
                    }else {
                        layer.msg(data.msg)
                    }

                }
            })
        })
        editor.clipboard.addMatcher('IMG', (node, delta) => {
            const Delta = Quill.import('delta')
            // 忽略base64插入操作
            return new Delta().insert('')
        })
</script>

上传图片到服务器返回url处理

完整代码

<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

<div id="editor" style="height: 370px">
	<p>Hello World!</p>
</div>

<input id="opImg" style="display: none;" type="file" onchange="addImg(this)"
       accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
<script>
    var editor,$
    function addImg(e) {
        const upImg = e.files[0];
        console.log(editor)
        var formData = new FormData;
        formData.append('file', upImg)
        $.ajax({
            data: formData,
            processData: false,//不做处理
            contentType: false,//不做处理
            sync: false,
            url: '/file/up/img',
            type: 'post',
            success(data) {
                console.log(data)
                if (data.code == 0) {
                    const range = editor.getSelection(true);
                    editor.insertEmbed(range.index, 'image', data.data);
                } else {
                    layer.msg(data.msg)
                }
            }
        })
    }
    function imageHandler(e) {
        // 在此执打开图片选择，行同步上传
        /*const range = this.quill.getSelection(true);
        this.quill.insertEmbed(range.index, 'image', 'http://localhost:8080/res/images/logo.png');*/
        document.getElementById('opImg').click()
    }

    layui.use(['layer', 'jquery', 'form'], function () {
        $ = layui.jquery
        var layer = layui.layer
            , form = layui.form
        var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{'header': 1}, {'header': 2}],               // custom button values
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
            [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
            [{'direction': 'rtl'}],                         // text direction

            [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
            [{'header': [1, 2, 3, 4, 5, 6, false]}],

            [{'color': []}, {'background': []}],          // dropdown with defaults from theme
            [{'font': ['宋体']}],
            [{'align': []}],
            ['image'],

            ['clean']                                         // remove formatting button
        ];
        editor = new Quill('#editor', {
            modules: {
                toolbar: {
                    container: toolbarOptions,
                    handlers: {
                        image: imageHandler
                    }
                }
            },
            theme: 'snow',
        });

        editor.root.addEventListener("paste", (e) => {
            console.log(e)
            console.log(this)
            const clipboardData = e.clipboardData
            // support cut by software & copy image file directly
            const isImage = clipboardData.types.length && clipboardData.types.join('').includes('Files');
            if (!isImage) {
                return;
            }
            // only support single image paste
            const file = clipboardData.files[0];
            if (!file || !file.name || !(file.name.toLowerCase().indexOf(".png") !== -1 || file.name.toLowerCase().indexOf(".gif") !== -1
                || file.name.toLowerCase().indexOf(".jpg") !== -1 || file.name.toLowerCase().indexOf(".jpeg") !== -1)) {
                console.log('粘贴的不是图片')
                return;
            }
            console.log(file)
            var formData = new FormData;
            formData.append('file', file)
            // 在此执行上传
            $.ajax({
                data: formData,
                processData: false,//不做处理
                contentType: false,//不做处理
                sync: false,
                url: '/file/up/img',
                type: 'post',
                success(data) {
                    console.log(data)
                    if (data.code == 0) {
                        const range = editor.getSelection(true);
                        editor.insertEmbed(range.index, 'image', data.data);
                    } else {
                        layer.msg(data.msg)
                    }

                }
            })
        })
        editor.clipboard.addMatcher('IMG', (node, delta) => {
            const Delta = Quill.import('delta')
            return new Delta().insert('')
        })
    });
</script>