富文本 quilljs 编辑器使用 图片视频上传

官方地址https://quilljs.com/

html

			<div class="bg">
                <div class="title">
                    <input name="title" placeholder="取个好标题" maxlength="50" autocomplete="off">
                    <div>
                        <span class="title-number">0</span>/50
                    </div>
                </div>
                <div class="content">
                    <div id="content"></div>
                </div>
                <div class="bottom">
                    <div class="bottom-tool" id="toolbar-container">
                        <button class="ql-bold"></button>
                        <button class="ql-italic"></button>
                        <button class="ql-underline"></button>
                        <button class="ql-header" value="1"></button>
                        
                        <button class="ql-link"></button>
                        <button class="ql-image"></button>
                        <button class="ql-video"></button>
                        
                        <select class="ql-align"></select>
                    </div>
                </div>
			</div>
            <form style="display:none;">
		        <input id="uploadImg" type="file" accept="image/*" onchange="uploadImageAjax(this)">
		        <input id="uploadVideo" type="file" accept="video/*" onchange="uploadVideoAjax(this)">
    		</form>

引入

	<script charset="utf-8" src="/assets/quilljs/highlight.min.js"></script>
	<script charset="utf-8" src="/assets/quilljs/quill.js"></script>
    <link href="/assets/quilljs/quill.snow.css" rel="stylesheet">

js

var quill = new Quill('#content', {
                modules: {
                  syntax: true,
                  toolbar: '#toolbar-container'
                },
                placeholder: '分享你的观点……',
                theme: 'snow'
            });
        this.quill.getModule("toolbar").addHandler("image", this.uploadImageHandler);
        function uploadImageHandler(){
            const input = document.querySelector('#uploadImg');
            input.value = ''
            input.click()
        }
        function uploadImageAjax(event){
            var formData = new FormData();
            formData.append("file",event.files[0]);
            UploadFileM("/api/common/upload",formData,function(e){
                if(e.code == 1){
                    const addImageRange = this.quill.getSelection()
                    const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
                    this.quill.insertEmbed(newRange, 'image', e.data.url)
                    this.quill.setSelection(1 + newRange)
                }
            })
        }
        this.quill.getModule("toolbar").addHandler("video", this.uploadVideoHandler);
        function uploadVideoHandler(){
            const input = document.querySelector('#uploadVideo');
            input.value = ''
            input.click()
        }
        function uploadVideoAjax(event){
            var formData = new FormData();
            formData.append("file",event.files[0]);
            UploadFileM("/api/common/upload",formData,function(e){
                if(e.code == 1){
                    const addImageRange = this.quill.getSelection()
                    const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
                    this.quill.insertEmbed(newRange, 'video', e.data.url)
                    this.quill.setSelection(1 + newRange)
                }
            })
        }

提

交

let title = $("input[name=title]").val();
            let length = title.length;
            if(length<10 || length > 50){
                $("input[name=title]").focus();
                layer.open({
                    content: "请输入标题，长度在10-50个字符之间"
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            }
            let content_length = quill.getLength();
            if(!content_length){
                layer.open({
                    content: "请输入文章内容"
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            }
            if(content_length<50){
                layer.open({
                    content: "文章内容不得少于50个字符"
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                return false;
            }
            let content = quill.root.innerHTML;
            let images = getImgSrc(content);
            getAjaxData("/api/bbs/add",{title:title,content:content,images:images},function(e){
                layer.open({
                    content: e.msg
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
                if(e.code == 1){
                    setTimeout(function() {
                        window.location.href = '/m/bbs/detail?id='+e.data
                    }, 1500);
                } 
            });

自定义插入html

                    const addImageRange = this.quill.getSelection()
                    const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
                    //图片居中
                    // this.quill.insertEmbed(newRange, 'image', e.data.url)
                    this.quill.pasteHTML(newRange,'<br><p class="ql-align-self"><img src="'+e.data.url+'"></p><br>');
                    this.quill.setSelection(3 + newRange)