tinymce富文本编辑器实现本地图片上传_tinymce images_upload_handler-程序员宅基地

技术标签: upload  富文本编辑器  

在开发过程中使用tinymce富文本编辑器,发现他的图片上传默认是上传网络图片

那么如何实现上传本地图片呢,上官网逛一圈,发现其实很简单

在官网中找到下面这张图片,并且有相关的例子

这里,我使用了自定义函数

images_upload_handler (blobInfo, success, failure) {
    const url = 'uploadImg'                             // 这个地址是请求接口的一个映射
    const formData = new FormData()                     // 和后端协商后用formData格式进行传参
    formData.append('upfile', blobInfo.blob())
    formData.append('fileType', 'noticeFile')
    formData.append('authorization', getToken())
    uploadFile(formData, url).then((res) => {           //  uploadFile自己封装的上传方法
      if (res.errcode === ERR_CODE) {
        success(res.dz)
      }
    }).catch(err => {
      failure('出现未知问题,刷新页面,或者联系程序员')
         console.log(err)
    })
}

这个方法提供三个参数

blobInfo 是一个对象,里面包含了上传文件的信息

success和failure 是成功和失败后的回调函数  success传入成功后的图片地址, failure传入失败后的报错信息

配置完成后,就可以实现本地图片上传了。看下效果吧

此时,本地调试一切都正常了。但是上传服务器后发现一个问题

上传之后的图片路径会自动转换为本地的相对路径

这个问题只需要在初始化是添加一个参数即可解决  convert_urls: false

终于OK了

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Li_na_na01/article/details/105288730

智能推荐

WIZnet W5300-TOE MQTT 发布和订阅 (micropython)_w5500 mqtt onenet-程序员宅基地

文章浏览阅读113次。这些部分将指导您完成一系列步骤,从配置开发环境到使用 STM32f429zi (nuleo-f429zi) 和 W5300-TOE 运行以太网示例 基本设置请参阅“入门”指南。_w5500 mqtt onenet

day24.|回溯法01-程序员宅基地

文章浏览阅读381次,点赞5次,收藏7次。1.也可以叫做,它是一种搜索的方式。2.回溯是递归的副产品,只要有递归就会有回溯。回溯与递归相辅相成,只要有递归就有回溯。通常递归函数的下面就是回溯的逻辑。3.,如果想让回溯法高效一些,可以加一些剪枝的操作,但也改不了回溯法就是穷举的本质。(暴力查找)5.回溯法解决的问题:(1)组合问题:N个数里面按一定规则找出k个数的集合;(2)切割问题:一个字符串按一定规则有几种切割方式;(3)子集问题:一个N个数的集合里有多少符合条件的子集;(4)排列问题:N个数按一定规则全排列,有几种排列方式;

Esp32-CAM(ESP32带camera)使用说明_esp32 cam说明书-程序员宅基地

文章浏览阅读6.7k次,点赞2次,收藏28次。1、如下图,只需在丝印 VCC GND 处供 3.3V 电源即可启动开发板2、上电后开发板会释放热点。其中SSID: wireless-tagPwd: wireless-tag3、电脑或手机连接此热点后,登录网页 http://192.168.4.1 进入 WEBSERVER 界面。如下图:4、上图中有两个红色框 Get Still 和 Start Stream(Stop Stream)。点击 Get Still,摄像头抓取一张图片,并显示在黑色区域;点击 Start Stream_esp32 cam说明书

【vscode】vscode终端如何快速复制信息_vscode终端如何复制-程序员宅基地

文章浏览阅读737次,点赞7次,收藏7次。开发的一些小技巧分享。_vscode终端如何复制

在Spark上使用JDBC连接Trino_emr trino端口号-程序员宅基地

文章浏览阅读1.9k次。这是一个非常不典型的Spark + Trino的使用场景,本文仅记录测试步骤和结果,不做评论。测试在Spark上使用JDBC读写Trino的可行性。创建EMR集群,选择Hive、Trino并以Glue Data Catalog作为Metastor;在Hive中创建数据表并插入测试数据;将Trino JDBC Driver包加入Spark类路径并同时启动spark-shell;在Spark中通过JDBC连接Trino并读取数据_emr trino端口号

系统架构师学习笔记-系统安全性和保密性_系统工作站的保密性-程序员宅基地

文章浏览阅读6.1k次,点赞9次,收藏23次。目录 信息系统安全体系数据安全与保密 信息系统安全体系信息安全有5个基本要素:1. 机密性:确保信息不暴露给未授权的实体或进程。2. 完整性:只有得到允许的人才能够修改数据,并能够判别数据是否已被篡改。3. 可用性:得到授权的实体在需要时可访问数据。4. 可控性:可以控制授权范围内的信息流向和行为方式。5. 可审查性:对出现的安全问题提供调查的依据..._系统工作站的保密性

随便推点

网络安全的隐形守护者——白帽黑客-程序员宅基地

文章浏览阅读2.3k次。提起黑客我们的脑海中总是会浮现那些“啪啪啪”敲键盘,进入别人电脑或是企业服务器的“神秘人”,他们来无影去无踪,但是每次造访总会将所到之处破坏个淋漓尽致,直到拿到自己想要的..._白帽黑客小青

[OpenCV Qt教程] 在Qt图形界面中显示OpenCV图像的OpenGL Widget (第一部分)_qt scene changed-程序员宅基地

文章浏览阅读5.8k次。本文译自:[OPENCV QT TUTORIAL] OPENGL WIDGET TO SHOW OPENCV IMAGES IN A QT GUI (FIRST PART)此教程是关于在Qt图形界面中显示OpenCV图像的问题,还利用了Qt中的OpenGL。_qt scene changed

回溯法解01背包问题(最通俗易懂,附C++代码)_回溯法解决01背包问题-程序员宅基地

文章浏览阅读3.6w次,点赞86次,收藏554次。问题描述:01背包问题是算法中的经典问题,问题描述如下:对于给定的N个物品,第i个物品的重量为Wi,价值为Vi,对于一个最多能装重量C的背包,应该如何选择放入包中的物品,使得包中物品的总价值最大?回溯法简介:回溯法的本质其实就是一种蛮力法,只是通过一定的方法可以使得蛮力法中的一些基本情况可以提前排除从而提高蛮力算法效率,回溯可以理解为排除这些不满足条件的基本情况的过程。回溯法求解0-1背包问题的过程:由于直接描述过程比较抽象,因此直接上例题例题:假设N=3(有三件物品),三个物品的重量为{20_回溯法解决01背包问题

Apache孵化器主席Justin Mclean:如何成为Apache顶级开源项目_apache基金会项目申请-程序员宅基地

文章浏览阅读761次。摘要: 近日,Apache孵化器主席、Apache基金会成员、Dubbo & RocketMQ等开源项目的导师Justin Mclean来到阿里巴巴西溪园区,与众多开发者分享了如何打造一个Apache顶级项目,以及项目孵化过程会遇到的一些盲点和挑战。近日,Apache孵化器主席、Apache基金会成员、Dubbo & RocketMQ等开源项目的导师Justin Mclean来..._apache基金会项目申请

遇到BASE64的图片字符串应该如何转换成图片呢_go语言把base64转换成图片格式-程序员宅基地

文章浏览阅读1.3k次。遇到BASE64的图片字符串应该如何转换成图片呢base64.b64decode(data)_go语言把base64转换成图片格式

(转)基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出...-程序员宅基地

文章浏览阅读166次。http://www.cnblogs.com/wuhuacong/p/3873498.html数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在之前的一篇文章《Winform开发框架之通用数据导入导出操作》介绍了在Winform里面的通用导入导出模块的设计和开发过程,但在Web上我们应该如何实现呢?本文主要介绍利用MVC4+Eas...

推荐文章

热门文章

相关标签