Quill富文本编辑器添加图片由base64改为上传

2023-11-02 23:40

本文主要是介绍Quill富文本编辑器添加图片由base64改为上传,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

Quill是一款非常好用的编辑器,不过默认的图片是base64后插入到文本中的,如果要上传到服务器,CDN等,需要重写image控件的handler,如果使用的是vue百度也有一堆解决方案,这里贴上基本的jquery的处理方法: 

var quill = new Quill('#editor', {modules: {toolbar: {container: toolbarOptions,handlers: {image: function (value) {var fileInput = this.container.querySelector('input.ql-image[type=file]');if (fileInput == null) {fileInput = document.createElement('input');fileInput.setAttribute('type', 'file');fileInput.setAttribute('accept', 'image/*');fileInput.classList.add('ql-image');fileInput.addEventListener('change', function () {if (fileInput.files != null && fileInput.files[0] != null) {var formData = new FormData();formData.append('file', fileInput.files[0]);$.ajax({url: '/news/upload',type: 'POST',data: formData,processData: false,contentType: false,success: function (data) {var data = eval("(" + data + ")");var range = quill.getSelection();quill.insertEmbed(range.index, 'image', "<?php echo $url?>" + data.data);}});}});this.container.appendChild(fileInput);}fileInput.click();}}},},placeholder: 'Compose an epic...',theme: 'snow'  // or 'bubble'});

配置上自己的上传地址,同时"<?php echo $url?>" 根据时间做相应替换。

转载于:https://my.oschina.net/pokdars/blog/1839878

这篇关于Quill富文本编辑器添加图片由base64改为上传的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/334100

相关文章

input的accept属性让文件上传安全高效

《input的accept属性让文件上传安全高效》文章介绍了HTML的input文件上传`accept`属性在文件上传校验中的重要性和优势,通过使用`accept`属性,可以减少前端JavaScrip... 目录前言那个悄悄毁掉你上传体验的“常见写法”改变一切的 html 小特性:accept真正的魔法:让

Java使用Spire.Doc for Java实现Word自动化插入图片

《Java使用Spire.DocforJava实现Word自动化插入图片》在日常工作中,Word文档是不可或缺的工具,而图片作为信息传达的重要载体,其在文档中的插入与布局显得尤为关键,下面我们就来... 目录1. Spire.Doc for Java库介绍与安装2. 使用特定的环绕方式插入图片3. 在指定位

Python多任务爬虫实现爬取图片和GDP数据

《Python多任务爬虫实现爬取图片和GDP数据》本文主要介绍了基于FastAPI开发Web站点的方法,包括搭建Web服务器、处理图片资源、实现多任务爬虫和数据可视化,同时,还简要介绍了Python爬... 目录一. 基于FastAPI之Web站点开发1. 基于FastAPI搭建Web服务器2. Web服务

java对接Pinata上传文件到IPFS全过程

《java对接Pinata上传文件到IPFS全过程》本文详细介绍了如何使用PinataAPI将文件上传到IPFS网络,首先登录Pinata官网并生成JWT令牌,然后在项目中导入OkHttp依赖并编写代... 目录1.登录2.生成令牌3.导入依赖4.编写代码5.调用接口调试China编程代码总结Pinata调用AP

利用Python将PDF文件转换为PNG图片的代码示例

《利用Python将PDF文件转换为PNG图片的代码示例》在日常工作和开发中,我们经常需要处理各种文档格式,PDF作为一种通用且跨平台的文档格式,被广泛应用于合同、报告、电子书等场景,然而,有时我们需... 目录引言为什么选择 python 进行 PDF 转 PNG?Spire.PDF for Python

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

java读取excel文件为base64实现方式

《java读取excel文件为base64实现方式》文章介绍使用ApachePOI和EasyExcel处理Excel文件并转换为Base64的方法,强调EasyExcel适合大文件且内存占用低,需注意... 目录使用 Apache POI 读取 Excel 并转换为 Base64使用 EasyExcel 处

Android实现图片浏览功能的示例详解(附带源码)

《Android实现图片浏览功能的示例详解(附带源码)》在许多应用中,都需要展示图片并支持用户进行浏览,本文主要为大家介绍了如何通过Android实现图片浏览功能,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现(FastAPI)2.1 运行环境2.2 目录结构建议2.3 serv

Python一次性将指定版本所有包上传PyPI镜像解决方案

《Python一次性将指定版本所有包上传PyPI镜像解决方案》本文主要介绍了一个安全、完整、可离线部署的解决方案,用于一次性准备指定Python版本的所有包,然后导出到内网环境,感兴趣的小伙伴可以跟随... 目录为什么需要这个方案完整解决方案1. 项目目录结构2. 创建智能下载脚本3. 创建包清单生成脚本4