强大的富文本编辑器：quill
github：32k start++，：/quilljs/quill
quill粘贴图片上传服务器
<link href="///1.3.6/quill.snow.css" rel="stylesheet"><div id="editor" style="height: 370px"><p>Hello World!</p></div><script src="///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 directlyconst isImage = clipboardData.types.length && clipboardData.types.join('').includes('Files');if (!isImage) {return;}// only support single image pasteconst 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="///1.3.6/quill.snow.css" rel="stylesheet"><script src="///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.jqueryvar layer = layui.layer, form = layui.formvar 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 directlyconst isImage = clipboardData.types.length && clipboardData.types.join('').includes('Files');if (!isImage) {return;}// only support single image pasteconst 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>
