`
- 浏览:
161208 次
- 性别:
- 来自:
成都
-
从众多的Web编辑器中选择KindEditor ,主要是看重它的小巧。一个JS文件、两个CSS文件和一个GIF图片就是它的全部。所以在页面上的加载速度很快,而且功能也相对齐全。
目前KindEditor自带的图片上传组件仅仅是对PHP的支持,但是我的项目用到了Struts2,所以图片上传这一块还需要自己来写。
首先,修改plugins目录下的image.html文件,将form的action改为:
Html代码
action="/imageUpload"
action="/imageUpload"并且在
Html代码
<input type="hidden" id="editorId" name="id" value="" />
<input type="hidden" id="editorId" name="id" value="" /> 中的value属性设置为你页面上编辑器的id。
这个地址对应的是一个Action,在Struts2中的配置为:
Xml代码
<action name="imageUpload" class="com.bjqxwh.manage.web.KindEditorImageUploadAction">
<result name="success">/editor/imageUploadSuccess.jsp</result>
<result name="error">/editor/imageUploadError.jsp</result>
</action>
<action name="imageUpload" class="com.bjqxwh.manage.web.KindEditorImageUploadAction">
<result name="success">/editor/imageUploadSuccess.jsp</result>
<result name="error">/editor/imageUploadError.jsp</result>
</action>
具体代码如下:
Java代码
package com.bjqxwh.manage.web;
import java.io.File;
import org.apache.struts2.ServletActionContext;
import com.bjqxwh.manage.service.UploadService;
import com.opensymphony.xwork2.ActionSupport;
/**
* 处理从KindEditor编辑器中上传的图片
*
* @author shelltea
*
*/
public class KindEditorImageUploadAction extends ActionSupport {
private static final long serialVersionUID = 920697011722287589L;
private String savePath = "/editor/upload";
private File imgFile;
private String imgFileContentType;
private String imgFileFileName;
private String id;
private String imgTitle;
private String imgWidth;
private String imgHeight;
private String imgBorder;
private String saveUrl;
// 省略Setter和Getter方法
@Override
public String execute() throws Exception {
saveUrl = UploadService.upload(imgFile, imgFileFileName, savePath,
ServletActionContext.getRequest());
// 针对FireFox自动将绝对地址转换为相对地址的,将保持的URL改为相对地址
String[] s = saveUrl.split("/");
saveUrl = "/" + s[3] + "/" + s[4] + "/" + s[5];
return SUCCESS;
}
}
package com.bjqxwh.manage.web;
import java.io.File;
import org.apache.struts2.ServletActionContext;
import com.bjqxwh.manage.service.UploadService;
import com.opensymphony.xwork2.ActionSupport;
/**
* 处理从KindEditor编辑器中上传的图片
*
* @author shelltea
*
*/
public class KindEditorImageUploadAction extends ActionSupport {
private static final long serialVersionUID = 920697011722287589L;
private String savePath = "/editor/upload";
private File imgFile;
private String imgFileContentType;
private String imgFileFileName;
private String id;
private String imgTitle;
private String imgWidth;
private String imgHeight;
private String imgBorder;
private String saveUrl;
// 省略Setter和Getter方法
@Override
public String execute() throws Exception {
saveUrl = UploadService.upload(imgFile, imgFileFileName, savePath,
ServletActionContext.getRequest());
// 针对FireFox自动将绝对地址转换为相对地址的,将保持的URL改为相对地址
String[] s = saveUrl.split("/");
saveUrl = "/" + s[3] + "/" + s[4] + "/" + s[5];
return SUCCESS;
}
}
这段代码中的UploadService是我自己写的一个上传服务组件,通过调用upload方法上传文件,并返回在服务器上的绝对地址。但是直接返回的绝对地址在FireFox中自动转换为了相对地址。这就给编辑带来的不便,在编辑时编辑器中显示不出图片,问题就处在地址上,所以干脆将地址直接转换为相对地址来解决这个问题。
然后是写一个上传成功后的页面:
Html代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert image</title>
</head>
<body>
<script language="javascript" type="text/javascript">
parent.KE.plugin["image"].insert("${id}","${saveUrl}","${imgTitle}","${imgWidth}","${imgHeight}","${imgBorder}");
</script>
</body>
</html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
kindeditor本地上传图片支持token字段,kindeditor本身图片上传并无token参数,本资源利用原生ajax改造上传代码。
NULL 博文链接:https://shelltea.iteye.com/blog/386781
vue 使用kindeditor粘贴复制图片上传给自己服务器,单独图片上传,避免用户到处寻找,解决了用户粘贴复制截图时候,图片变成base64,上传给后台的时候长度过于长,所以在粘贴的时候就上传给服务器,最后以形式显示在富...
kindeditor图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法。
这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...
已经付费购买的图片批量上传工具,可以在Web页面一次批量上传多张图片,可以直接从word中拷贝然后粘贴上传,尤其对于word中的数学公式,可以自动转为图片上传到web服务器,非常方便。
kindEditor4.1版修改上传图片宽高(图片自适应)
其中图片上传就是一个 所以就自己写了个Demo研究,现在总算没问题了 这个Demo希望对大家有帮助 另外需注意的是 上传文件夹(Upload)一定要在根目录 不然会报错: -- 行: 1103 ...
各种语言对应的文件夹下有demo文件引用文件要改成自己程序的路径 页面可以按照demo去配置即可 很好用 支持视频上传
kindeditor分页,kindeditor图片上传完整代码 kindeditor分页,kindeditor图片上传完整代码
kindeditor图片删除功能,主要修改3个文件,直接覆盖就行 解决kindeditor上传后不能删除问题。
富文本编辑器kindeditor图片上传
KindEditor上传图片和管理图片 管理图片采用直接读取磁盘文件模式 若在现实中使用则应该使用数据库模式
优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘贴时自动上传网络图片,粘贴时自动上传截图,地图宽度可设置百分比显示...
kindeditor自定义添加网络视频插件-,修改批量图片上传方式flash为h5上传kindeditor自定义添加网络视频插件-,修改批量图片上传方式flash为h5上传
jquery + kindEditor 单个图片上传,通过插件实现图片上传至文本编辑器中,并进行回显,展示图片。
2.将图片上传与管理的JSP页面改写成SERVLET,同时去除JSON包; 3.添加图片压缩功能,对超出的宽高压缩成指定的值; 4.添加上传附件功能; 5.添加图片、附件按日期文件夹分类管理的功能; 6.添加上传图片、附件的...
优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘贴时自动上传网络图片,粘贴时自动上传截图,地图宽度可设置百分比显示...
kindeditor上传图片时自动将过大(像素以及图片长宽)的图片进行压缩,只需要在kindeditor中upload_json.ashx里面修改!