【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接

前言:最近项目上需要使用富文本编辑器,觉得tinymce很不错就用了,具体怎么在项目中使用参考
【vue】 vue2 中使用 Tinymce 富文本编辑器
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑

这两天又遇到了新的问题,图片上传后是看地址栏发现是base64的,就是下面这样的,
在这里插入图片描述
总体来说呢,这样也没有问题,毕竟图片显示了。但是多个图片上传就会导致响应体太大(后端响应太慢,优化时发现是base64图片太大),所以就想要直接放个链接回显,下面这样

在这里插入图片描述
如何实现?找了很多文章,参考了很长时间终于弄好了,总结一下。
简介与入门 \ 上传图片和文件
vue—tinymce粘贴图片【完美解决】
插件 \ paste 粘贴插件
gitee-wpspaster
tinymce 实现 粘贴图片自动上传

下面具体操作:

我就基于我之前使用tinymce基础上修改了,

第一步:配置粘贴【paste】具体配置项

tinymce.init({selector: '#tinydemo',plugins: 'paste',toolbar: 'paste',paste_data_images: true // 默认是false的,记得要改为true才能粘贴
})

第二步:配置图片上传函数

images_upload_handler: (blobInfo, success, failure) => {var xhr, formData;var file = blobInfo.blob(); //转化为易于理解的file对象xhr = new XMLHttpRequest();xhr.withCredentials = false;// 图片上传路由xhr.open("POST", process.env.VUE_APP_BASE_API + "/common/upload");xhr.onload = () => {var json;if (xhr.status != 200) {// failure("上传失败: " + xhr.status);return;}json = JSON.parse(xhr.responseText);// json是后端返回的数据,其中就包含链接if (!json || typeof json.location != "string") {// failFun("上传成功:");// succFun(json.url);success(process.env.VUE_APP_BASE_API + json.fileName);return;}};formData = new FormData();formData.append("file", file, file.name); //此处与源文档不一样xhr.setRequestHeader("Authorization", "Bearer " + getToken());xhr.send(formData);
},

下面这段代码是完成系统验证的,可以根据项目调整,不需要可以不加
xhr.setRequestHeader("Authorization", "Bearer " + getToken());

至此,图片渲染就是链接形式了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18027.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows下RocketMQ的启动

下载地址:下载 | RocketMQ 解压后 一、修改runbroker.cmd 修改 bin目录下的runbroker.cmd set "JAVA_OPT%JAVA_OPT% -server -Xms2g -Xmx2g" set "JAVA_OPT%JAVA_OPT% -XX:MaxDirectMemorySize15g" set "JAVA_OPT%JAVA_OPT% -cp %CLASSP…

八大排序算法--希尔排序(动图理解)

目录 希尔排序 概念 算法思路 动画演示 代码如下 复杂度分析 时间复杂度测试 运行结果 完整代码 创作不易,如果本篇博客对您有一定的帮助,大家记得留言点赞哦。 希尔排序 概念 希尔排序是插入排序的一种,是对直接插入排序的优化。其…

ChinaJoy 2023微星雷鸟17游戏本震撼发布:搭载AMD锐龙9 7945HX首发8499元

ChinaJoy 2023展会中微星笔记本再次给大家带来惊喜,发布了搭载AMD移动端16大核的旗舰游戏本:雷鸟17,更重要的这样一款旗舰性能的游戏本,首发价8499元堪称当今游戏本市场中的“性价比爆款”! 本着和玩家一同制霸游戏战场…

k8s概念-StatefulSet

StatefulSet 是用来管理有状态应用的控制器 StatefulSet 用来管理某Pod集合的部署和扩缩, 并为这些 Pod 提供持久存储和持久标识符StatefulSet | KubernetesStatefulSet 运行一组 Pod,并为每个 Pod 保留一个稳定的标识。 这可用于管理需要持久化存储或稳…

【设计模式——学习笔记】23种设计模式——代理模式Proxy(原理讲解+应用场景介绍+案例介绍+Java代码实现)

介绍 基础介绍 代理模式为一个对象提供一个代理对象,以控制对这个对象的访问。即通过代理对象访问目标对象,这样做的好处是:可以在不修改目标对象代码的基础上,增强额外的功能操作,即扩展目标对象的功能被代理的对象…

牛客网Verilog刷题——VL52

牛客网Verilog刷题——VL52 题目答案 题目 请编写一个十进制计数器模块,当mode信号为1,计数器输出信号递增,当mode信号为0,计数器输出信号递减。每次到达0,给出指示信号zero。模块的接口信号图如下: 模块的…

Flask学习笔记_异步论坛(四)

Flask学习笔记_异步论坛(四) 1.配置和数据库链接1.exts.py里面实例化sqlalchemy数据库2.config.py配置app和数据库信息3.app.py导入exts和config并初始化到app上 2.创建用户模型并映射到数据库1.models/auth.py创建用户模型2.app.py导入模型并用flask-mi…

教师工作量管理系统Springmvc+Spring+Mybatis课程工作量教室java源代码mysql

本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 教师工作量管理系统SpringmvcSpringMybatis 系统有1权…

快速开发人脸识别系统Java版本

简介: 先说下什么是人脸识别系统:举个例子,公司门口有个人脸识别系统,员工站到门口,看着摄像头,大屏幕上会抓拍到你的人脸,然后和公司的员工照片库里的照片比对,比对成功就提示&…

ThreadLocal原理

ThreadLocal原理 ThreadLocal对象new出来存放到堆中,ThreadLocal引用是存放在栈里 Thread 类有个 ThreadLocalMap 成员变量,Map的key是Threadlocal 对象,value是你要存放的线程局部变量。 public void set(T value) {//获取当前线程Thread&…

python爬虫(四)_urllib2库的基本使用

本篇我们将开始学习如何进行网页抓取,更多内容请参考:python学习指南 urllib2库的基本使用 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地。在Python中有很多库可以用来抓取网页,我们先学习urllib2。…

从零开始学python(十三)爬虫工程师自动化和抓包

前言 回顾之前讲述了python语法编程 必修入门基础和网络编程,多线程/多进程/协程等方面的内容,后续讲到了数据库编程篇MySQL,Redis,MongoDB篇,和机器学习,全栈开发,数据分析,爬虫数…

Go项目实现日志按时间及文件大小切割并压缩

关于日志的一些问题: 单个文件过大会影响写入效率,所以会做拆分,但是到多大拆分? 最多保留几个日志文件?最多保留多少天,要不要做压缩处理? 一般都使用 lumberjack[1]这个库完成上述这些操作 lumberjack //info文件wr…

uniapp实现地图点聚合

点聚合的最重要的一个地方是在 markers 中添加 joinCluster true 这个重要的属性,否则将无法开启点聚合功能。 其实在uniapp的官方文档里体现的不是那么清楚,但是在小程序文档提示的就相当清楚。 实现效果如下: 重点:需要编译在小…

【密码学】四、SM4分组密码算法

SM4分组密码算法 1、概述1.1初始变量算法1.2密钥扩展算法1.3轮函数F1.3.1合成置换T1.3.2S盒 2、算法设计原理2.1非平衡Feistel网络2.2T变换2.2.1非线性变换τ2.2.2线性变换L2.2.3基础置换 2.3密钥扩展算法的设计 1、概述 SM4分组密码算法是一种迭代分组密码算法,采…

SERDES关键技术

目录 一、SERDES介绍 二、SERDES关键技术 2.1 多重相位技术 2.2 线路编解码技术 2.2.1 8B/10B编解码 2.2.2 控制字符(Control Characters) 2.2.3 Comma检测 2.2.4 扰码(Scrambling) 2.2.5 4B/5B与64B/66B编解码技术 2.3 包传…

【C++】-二叉搜索树的详解(递归和非递归版本以及巧用引用)

💖作者:小树苗渴望变成参天大树🎈 🎉作者宣言:认真写好每一篇博客💤 🎊作者gitee:gitee✨ 💞作者专栏:C语言,数据结构初阶,Linux,C 动态规划算法🎄 如 果 你 …

LAXCUS分布式操作系统引领科技潮流,进入百度首页

信息源自某家网络平台,以下原样摘抄贴出。 随着科技的飞速发展,分布式操作系统做为通用基础平台,为大数据、高性能计算、人工智能提供了强大的数据和算力支持,已经成为了当今计算机领域的研究热点。近日,一款名为LAXCU…

一起学算法(栈篇)

1.栈的概念 1.栈的定义 栈是仅限在表尾进行插入和删除的线性表,栈又被称为先进后出的线性表,简称“LIFO” 我们这次用数组作为我们栈的底层数据结构,代码会放到结尾供大家参考使用 2.栈顶的定义 栈是一个线性表,我们允许插入…

Coremail中睿天下|2023年第二季度企业邮箱安全态势观察

7月24日,Coremail邮件安全联合中睿天下发布《2023第二季度企业邮箱安全性研究报告》,对2023第二季度和2023上半年的企业邮箱的安全风险进行了分析。 一、垃圾邮件同比下降16.38% 根据Coremail邮件安全人工智能实验室(以下简称AI实验室&#…