tinyMCE上传图片

本文介绍了如何在tinyMCE文本编辑器中实现本地图片上传。通过设置images_upload_handler属性,实现异步上传,确保用户可以即时插入图片。详细讲述了上传的原理,包括版本要求、异步上传和自定义上传行为,并提供了java SSM框架下的实现示例。
摘要由CSDN通过智能技术生成

最近做项目涉及到上传文件,于是便想用tinyMCE的文本编辑器,官网地址如下

tinyMCE官网地址

我比较了几个编辑器,最终选用这个,因为功能比较强大,能够实现代码编写,图片上传,插入连接等功能。今天就来说说图片上传。(本地图片上传)

一: 大致介绍

我们的需求是允许用户在文章编写过程中插入图片并将图片保存到服务器下的一个文件夹(WEBROOT/upImage)。

最终效果是这样的,如图

点击工具栏的图片按钮,弹出如图的模态框:

普通: 插入网站的图片

上传: 插入本地图片

插入图片后tinyMCE会把图片转换为img标签,比如我这里插入一个图片,tinyMCE转换后长成这样:

<img src="../uploadImage/fec76649e2354069b0f2fe50e8205e9d.jpeg" alt="照片" width="307" height="425" />

src——地址中的内容

alt——图片描述的内容

width,height——大小中的内容

大致介绍完毕之后,我们说说具体该怎么做吧(是不是废话有点多,请见谅啦(*^▽^*))

二: tinyMCE图片上传的原理

(对不起,现在还不是实现,请耐心等待,把tinyMCE本地图片上传的原理看完再向下看哦,如果你知道这个,可以直接看实现,Thanks♪(・ω・)ノ)

我在网上没有找到tinyMCE的汉化文档,所以都是一下内容均来自tinyMCE的官网,因为我英语水平还是有点渣,所以我会简单翻译关键部分,并把原文的内容贴出来,如果哪里有不对的地方欢迎指正。(*`∀´*)ノ亻!

tinyMCE上传图片(官网上传图片的地址)

1. 版本问题

  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值