最近做新闻系统,用了kindeditor,其中上传图片的功能没有Java版的,自己修改了下并实现它,记录下来,备忘。
我一般不是很赞同修改别人的源代码,尤其是这种开源的,否则移植性很差火,所以尽量修改最少。
1、修改../plugins/image.html文件
把form提交的地址改成action的地址。其余的不变
2、实现action,获得上传文件,并保存文件到相应目录,然后返回时注意是HTML代码,要调用kindeditor中的插入图片和关闭层的函数,其实就是一个函数,action代码如下:
/*
* 上传图片
*/
@SuppressWarnings("deprecation")
public String inputimage() throws Exception {
String imagename = getImgFileFileName();
imagename = FormatConstants.DATE_TIME_FORMAT_IMAGE.format(DateUtils
.getCurrentDateTime())
+ imagename.substring(imagename.lastIndexOf("."), imagename
.length());
try {
String newPath = getRequest().getRealPath("")
+ "\\upload\\articleimage\\" + imagename;
copy(imgFile, newPath);
addActionMessage("保存成功!");
} catch (Exception e) {
logger.error(e.getMessage(), e);
addActionError("保存失败!");
return "imageinput";
}
String id = "content1";
String url = "http://" + getRequest().getServerName() + ":"+ getRequest().getServerPort() + "/upload/articleimage/"
+ imagename;
String title = "100";
String width = "100";
String height = "100";
String border = "0";
return renderHtml(("<script type=\"text/javascript\">parent.KE.plugin[\"image\"].insert(\""
+ id
+ "\",\""
+ url
+ "\",\""
+ title
+ "\",\""
+ width
+ "\",\"" + height + "\",\"" + border + "\");</script>"));
}
/**
* 拷贝文件
*
* @param upload文件流
* @param newPath新文件路径和名称
* @throws Exception
*/
private void copy(File upload, String newPath) throws Exception {
FileOutputStream fos = new FileOutputStream(newPath);
FileInputStream fis = new FileInputStream(upload);
byte[] buffer = new byte[1024];
int len = 0;
while ((len = fis.read(buffer)) > 0) {
fos.write(buffer, 0, len);
}
fos.close();
fis.close();
}
以上代码是ss3ex中的写法。其中图片宽,高度等我懒得获取值,简单的附了初始值。
备注:关于文章系统的设计思路,开始一直在琢磨图片和文章的关联,最后决定放弃一切关系,图片的路径就放在文章的内容里,基本与文章没得关系。优点是,少个个图片表的维护,缺点是,图片只能增不能删,删除图片时只能手工删除了,好歹我把图片的名字设置成日期格式了。
如果真的要实现删除图片的话,也好办,找到文章的创建日期,根据日期来删除图片,目前只想到整天整天的删。
分享到:
相关推荐
通过上述修改,可以有效地解决kindEditor4.1版本中上传图片无法自适应的问题。关键是利用宽度的百分比计算来动态调整图片的大小,并且避免硬编码图片的高度,以保持图片的比例不变。这些修改不仅提高了用户体验,还...
首先,我们需要理解H5上传图片的核心技术是`File API`,它允许浏览器读取、写入和操作本地文件,而无需服务器的介入。在KindEditor中,我们可以通过监听`change`事件来获取用户选择的文件,然后利用`FileReader`对象...
8. **前端验证**:为了提高用户体验和减少服务器压力,前端通常会进行一些基本的文件类型和大小验证,例如限制只能上传图片文件,或者限制单个文件大小。 9. **后端接口设计**:H5版的KindEditor需要与服务器端接口...
1. **Flash批量上传图片向H5上传的转变**: 随着Flash技术的逐渐淘汰,将KindEditor中原有的基于Flash的图片批量上传方式替换为H5(HTML5)上传,这是一个必要的优化步骤。HTML5引入了File API,使得在浏览器中处理...
其次,修改批量图片上传方式从Flash转为H5。由于Flash技术逐渐被淘汰,HTML5提供了更好的跨平台支持,尤其是移动设备。在KindEditor中,可以使用HTML5的File API来实现图片的拖放和选择上传。你需要做以下工作: 1....
对于KindEditor而言,默认情况下上传图片时生成的路径可能不会包含完整的域名信息,这在某些场景下可能会带来不便。例如,当内容被嵌入到其他网站或服务器上时,没有域名的路径就可能导致图片无法正确加载。 #### ...
1. **修改KindEditor配置**:首先,需要更新KindEditor的配置文件,将上传方式从Flash切换到HTML5。这通常涉及修改`config.php`或`js/kindeditor.config.js`中的相关设置,确保`fileManagerJson`指向你的PHP处理脚本...
这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...
KindEditor内置了图片和文件上传插件,用户可以直接在编辑器内上传图片或文件,无需离开当前页面。上传过程通常包括选择文件、预览、上传和返回编辑器,这些步骤都是自动化的。上传后的资源可以被嵌入到编辑内容中...
在用户选择图片后,编辑器会自动将图片数据发送到该URL,并期待返回包含上传图片信息的结果。 二、去除Flash插件 由于Flash插件的过时和安全问题,KindEditor需要采用新的技术来替代其图像选择和预览功能。HTML5...
4. **自定义配置**:编辑器允许开发者根据项目需求进行定制,比如修改工具栏按钮、设定上传图片的大小限制、设置文件类型等。 5. **插件扩展**:KindEditor拥有丰富的插件库,可以扩展其功能,如添加视频、音频、...
在"完整版KindEditor修正上传图片问题"这个主题中,我们将探讨如何解决KindEditor在处理图片上传时可能遇到的问题,以及如何配置和定制编辑器以适应不同的后台环境。 首先,KindEditor提供了一个`demo`文件夹,其中...
用户现在可以在不依赖Flash的情况下,方便地批量上传图片到服务器,提高工作效率。 在实际应用中,这样的定制可能涉及到以下几个步骤: 1. 创建自定义插件:开发者需要编写JavaScript代码,定义插件的逻辑,包括UI...
### jQuery + KindEditor 单个图片上传知识点解析 #### 一、概述 本文将详细介绍如何使用jQuery结合KindEditor实现单个图片的上传功能,并能在文本编辑器中展示已上传的图片。KindEditor是一款轻量级的富文本编辑器...
总的来说,这个版本的KindEditor是针对图片处理进行了优化的,对于需要处理大量用户上传图片的Web应用来说,这是一个非常实用的功能。开发者可以通过集成这个版本的编辑器,既能保留原有的富文本编辑功能,又能有效...
2. **修改KindEditor插件**:KindEditor的图片上传功能是通过其内部的`image.js`插件实现的。我们需要扩展这个插件,添加一个新的按钮,该按钮触发Swfupload的文件选择界面,让用户可以选择多张图片。 3. **处理...
.NET KindEditor 图片上传实例详解 KindEditor 是一个开源的富文本编辑器,它支持多种浏览器,包括IE、Firefox、Chrome、Safari 和 Opera。在.NET环境中,集成KindEditor进行图片上传是常见的需求,这对于网站内容...
总的来说,修改KindEditor编辑器的表情图片涉及到对编辑器配置的理解和代码的调整,这对于熟悉JavaScript和前端开发的人员来说并不困难。通过这个过程,我们可以使编辑器更好地适应我们的网站风格,提升用户体验。
然而,在使用过程中可能会遇到在IE11环境下无法正常弹出上传图片、设置字体大小或颜色等对话框的情况。本文将详细分析该问题的原因,并提供具体的解决方案。 #### 二、问题分析 **1. 导致问题的原因:** - **用户...
KindEditor是一款广泛使用的开源在线文本编辑器,它提供了丰富的富文本编辑功能,如文本格式化、图片上传、视频插入等。然而,原版的KindEditor并不包含本地上传Flash的功能,这意味着用户无法直接在编辑器中上传并...