强大的富文本编辑器：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>
