`
- 浏览:
165054 次
- 性别:
- 来自:
成都
-
从众多的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>
分享到：
相关推荐
本文将深入探讨与KindEditor图片上传相关的问题，并结合提供的`UploadService.java`文件，解析图片上传服务的实现细节。 首先，我们需要了解KindEditor的图片上传流程。当用户在编辑器中选择插入图片时，KindEditor...
1. **配置KindEditor**：首先，你需要在初始化KindEditor时，配置图片上传的相关选项。例如，设置上传URL为包含token验证的接口，并开启自定义上传处理方式： ```javascript var editor = KindEditor.create('#...
在"完整版KindEditor修正上传图片问题"这个主题中，我们将探讨如何解决KindEditor在处理图片上传时可能遇到的问题，以及如何配置和定制编辑器以适应不同的后台环境。 首先，KindEditor提供了一个`demo`文件夹，其中...
"KindEditor图片批量上传工具"是一款专为网页设计者和内容创作者打造的高效图片上传解决方案。这款工具允许用户在Web界面一次性上传多张图片，极大地提升了工作效率，特别是对于那些需要频繁处理文字和图像，比如...
首先，我们需要了解KindEditor的图片上传流程。当用户在编辑器中选择图片并提交上传时，KindEditor会调用预设的上传处理程序，通常是通过一个服务器端脚本，如`upload_json.ashx`。这个脚本负责接收图片数据，验证，...
### KindEditor 图片上传后生成带域名绝对路径配置方法 #### 一、KindEditor简介与配置背景 KindEditor是一款基于JavaScript的开源富文本编辑器，它具有轻量级且易于集成的特点，在许多Web项目中被广泛应用。对于...
在kindEditor中，处理图片上传及显示的核心逻辑主要集中在`plugins/image/image.js`文件中。其中有一个重要的函数`self.plugin.imageDialog`，用于处理图片上传后的操作。关键代码段如下： ```javascript self....
在 KindEditor 初始化时，我们需要设置图片上传的相关配置。这包括上传的URL、允许的文件类型、文件大小限制等。例如： ```javascript KindEditor.create('#editor', { uploadJson: '/upload/image', // 服务器...
1. KindEditor的API使用：如何初始化编辑器，如何设置图片上传的相关参数。 2. AJAX请求与响应处理：理解前后端数据交换的过程。 3. C#服务器端处理文件上传：涉及IIS设置、MVC控制器或WebAPI接口编写。 4. 安全策略...
1. **KindEditor的图片上传功能**： KindEditor内建了图片上传的功能，用户可以通过点击编辑器内的“图片”按钮打开图片上传对话框。这个功能通常通过Ajax异步方式与服务器进行交互，将图片文件上传到指定的服务器...
vue 使用kindeditor粘贴复制图片上传给自己服务器，单独图片上传,避免用户到处寻找，解决了用户粘贴复制截图时候，图片变成base64,上传给后台的时候长度过于长，所以在粘贴的时候就上传给服务器，最后以形式显示在富...
在KindEditor中，用户可以通过内置的图片上传插件选择本地图片，然后通过Ajax异步提交到服务器。这个过程中，KindEditor会自动处理图片的上传表单，将文件数据转换成二进制流，通过HTTP POST请求发送到指定的服务器...
这是本人写的一个基于KindEditor-4.1.9的Java项目，采用Struts2框架，实现了KindEditor单张图片上传、批量图片上传，可以上传到image目录下的子目录中，可返回上一级目录，并实现了按名称、大小、类型排序的功能。...
KindEditor提供了一套回调机制，可以在图片上传成功后执行自定义函数。在这个函数中，你可以解析服务器返回的数据，创建代表每个图片的HTML元素，并将其插入到编辑器的适当位置。服务器返回的数据通常包括图片的URL...
然而，原始的KindEditor可能并不直接支持图片上传后的压缩，这可能导致用户上传大尺寸图片时，服务器存储空间消耗过大，网页加载速度变慢等问题。 描述中提到的“带压缩图片功能”，意味着这个版本的KindEditor已经...
其中图片上传就是一个 所以就自己写了个Demo研究，现在总算没问题了 这个Demo希望对大家有帮助 另外需注意的是 上传文件夹(Upload)一定要在根目录 不然会报错： -- 行: 1103 ...
KindEditor是一款开源的JavaScript富文本编辑器，常用于网页内容编辑。在使用KindEditor时，用户可能会遇到上传图片后...通过以上步骤，你应该能够解决KindEditor图片删除功能缺失的问题，提供更完善的富文本编辑体验。
总结来说，.NET KindEditor图片上传实例涉及了编辑器的部署、初始化、上传处理程序的创建以及安全性考虑。通过这个实例，你可以了解到如何在.NET环境中集成KindEditor并实现图片上传功能，为用户提供方便的内容编辑...
对于上传本地视频，处理方式类似图片上传，只不过需要考虑视频文件的格式和大小限制。 “添加手机尺寸预览”意味着在编辑器中，用户可以看到内容在不同移动设备屏幕尺寸下的效果。这可能通过CSS媒体查询实现，根据...
它支持多图片上传、文件上传等丰富的功能，广泛应用于个人项目和公司项目。在ASP.NET环境中，KindEditor能很好地集成到Web应用中，提供一个美观且易用的文本编辑界面。 1. **KindEditor的基本介绍** KindEditor是...