最近做项目涉及到上传文件,于是便想用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. 版本问题
Please note, this image upload feature is available for TinyMCE version 4.3 and above.
(上传图片功能从4.3开始)
<
本文介绍了如何在tinyMCE文本编辑器中实现本地图片上传。通过设置images_upload_handler属性,实现异步上传,确保用户可以即时插入图片。详细讲述了上传的原理,包括版本要求、异步上传和自定义上传行为,并提供了java SSM框架下的实现示例。
最低0.47元/天 解锁文章
1万+

被折叠的 条评论
为什么被折叠?



