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 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="//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.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>

quill富文本编辑器quill粘贴图片上传服务器相关推荐

富文本编辑器quill-editor自定义图片上传
目录 1.页面引入 2.自定义imge处理的图片上传组件 3.图片上传成功后回显嵌入 4.最终呈现效果 5.源码之前我整理过一篇文章,Quill编辑器实现图片上传功能(戳链接可查看) 但是想来那个是 ...
Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
Spring Boot集成Ueditor富文本编辑器，实现图片上传，视频上传，返回内容功能并且通过OSS转换为链接并且解决Spring Security静态资源访问以及跨域问题
学习自https://cloud.tencent.com/developer/article/1452451 现在是晚上22点,刚刚和我们的前端交流完了富文本编辑器的一些意见和看法还是老样子需求 ...
如何部署JSP版本的百度富文本编辑器（带图片上传功能）
博主之前因为公司项目需要部署百度的富文本编辑器到项目中,由于之前一直是后端开发,所以部署上还是费了一番心思的,网上也有很多教程但是用起来总会有各种问题,今天在这里记录一下以备今后的不时之需,也希望帮助 ...
百度富文本编辑器，改变图片上传存储路径
我用的是最新版! 找到以下2个关键文件: YourPath.../Ueditor/php/config.json YourPath.../Ueditor/php/Uploader.class.php ...
quill富文本编辑器——修改默认图片、视频上传功能
quill富文本编辑器默认的图片上传是将图片地址转换为base64格式,可能会导致字段过长:默认的视频上传是插入iframe标签,与需要的video标签不符合图片上传初始化编辑器时重写image上 ...
summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...

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

quill粘贴图片上传服务器

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

quill富文本编辑器quill粘贴图片上传服务器相关推荐

最新文章

热门文章