`
xinklabi
  • 浏览: 1586639 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论

KindEditor上传图片问题

 
阅读更多

转自:http://www.cnblogs.com/java_cSharp/archive/2011/08/06/KindEditor_upload_image_plugin.html

 

前序:由于工作需要使用在线编辑器,找了几个对比了下KindEditor还是不错的,国产的.但文档还是不全,还好能参考官方插件,套出来一些插件.本文章分为4个部分,分别介绍图片上传插件、代码高亮插件、引用文本以及附件插件的制作。网上大部分都是直接或改官方的JSP文件,连action都没有用,太不专业了。在上传附件或图片的时候写action上传不了居然还将web.xml中的<url-pattern>/*</url-pattern>换为:<url-pattern>*.action</url-pattern>这样以来势必会影响到其他地方。本文主要讲解插件的详细制作过程以及问题的处理,均为结合Struts2的标准方式,绝无什么水货处理方式!

KindEditor官方:http://www.kindsoft.net/

KindEditor4.0测试版Demo:http://www.kindsoft.net/ke4/php/demo.php

注意:KindEditor官方4.0下月发布正式版,已经有了代码高亮、附件上传等插件,如果你能等的话就暂扫一下我的文章就可以了!!!

KindEditor插件之图片上传

第一步是什么呢?当然是参考官方的图片上传DEMO!

在下载的包中找到jsp/demo.jsp打开看下源码,直接粘到你的页面中吧!注意js,css等路径就行了。fileManager这个是浏览远程图片的,基本没人用这个吧?没什么意义,所以关掉吧!

看下我的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<head>
<base href="<%=basePath%>">
 
<title>KindEditor示例</title>
<link rel="shortcut icon" type="image/x-icon" href="./favicon.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script src="<%=basePath%>js/jquery.js" type="text/javascript"></script>
<script src="<%=basePath%>js/kindeditor.js" type="text/javascript"></script>
<script type='text/javascript'>
<!--
$(document).ready(function(){
KE.show({
id : 'content',
resizeMode : 1,
shadowMode : false,
allowPreviewEmoticons : false,
allowUpload : true,
syncType : 'auto',
urlType : 'domain',
cssPath : 'css/ke.css',
imageUploadJson : '<%=basePath%>fileUpDown/onUploadImg.do',
items : [ 'bold', 'italic', 'underline', 'strikethrough',
'removeformat', '|', 'insertorderedlist',
'insertunorderedlist', '|', 'textcolor', 'bgcolor',
'fontname', 'fontsize', '|', 'link', 'unlink',
'emoticons', 'code', 'image', 'flash', 'quote',
'attach', '|', 'selectall', 'source', 'about' ],
afterCreate : function(id) {
KE.event.ctrl(document, 13, function() {
if(KE.isEmpty('content')){
alert('文章为空');
}else{
KE.util.setData(id);
document.forms['editform'].submit();
}
});
KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
if(KE.isEmpty('content')){
alert('文章为空');
}else{
KE.util.setData(id);
document.forms['editform'].submit();
}
});
}
});
});
 
var check={
form_submit:function(){
if(KE.isEmpty('content')){
alert('文章为空');
return false;
}else{
return true;
}
}
};
//-->
</script>
</head>
<body>
<form id="editform" name="editform" action="article/showDemo_DemoEditContent.do" method="post" onsubmit="return check.form_submit();">
<textarea id="content" name="content" style="width: 580px; height: 250px; visibility: hidden;"></textarea>
<br />
您当前输入了
<span id="word_count1">0</span> 个文字。(字数统计包含HTML代码。)
<br />
 
您当前输入了
<span id="word_count2">0</span> 个文字。(字数统计包含纯文本、IMG、EMBED,不包含换行符,IMG和EMBED算一个文字。)
<br />
<button id="id_submit">
提交
</button>(提交快捷键: Ctrl + Enter)
<br />
<input type="button" name="button" value="取得HTML" onclick="javascript:alert(KE.html('content'));" />
<input type="button" name="button" value="判断是否为空" onclick="javascript:alert(KE.isEmpty('content'));" />
<input type="button" name="button" value="取得文本" onclick="javascript:alert(KE.text('content'));" />
<input type="button" name="button" value="取得文本(包含img,embed)"
onclick="javascript:alert(KE.util.getPureData('content'));" />
<input type="button" name="button" value="取得选中HTML" onclick="javascript:alert(KE.selectedHtml('content'));" />
<br />
<br />
<input type="button" name="button" value="设置HTML"
onclick="javascript:KE.html('content', '<h3>Hello KindEditor</h3>');" />
<input type="button" name="button" value="设置文本"
onclick="javascript:KE.text('content', '<h3>Hello KindEditor</h3>');" />
<input type="button" name="button" value="插入HTML"
onclick="javascript:KE.insertHtml('content', '<strong>测试内容</strong>');" />
<input type="button" name="button" value="添加HTML"
onclick="javascript:KE.appendHtml('content', '<strong>Append HTML</strong>');" />
<input type="button" name="button" value="清空内容" onclick="javascript:KE.html('content', '');" />
</form>
</body>
</html>

imageUploadJson的参数action这个我们还没有写呢!不要着急,如果你急的已经部署打开了该页面你会发现缺了三个图标,那是我们以后文章中实实在在写的三个插件的图标。
cssPath : 'css/ke.css' 这个是编辑器内容里的一些自定义的样式,比如我们要写引用文本插件,代码高亮插件的时候就用得着了!暂时别急,写上了就写上了也没什么问题。我们稍后完成!
第二步写我们的重中之重的action:
首先声明下我访问action的时候结尾不是以action结尾的,我是以do结尾的(你喜欢什么就配什么,改不改无所谓!菜鸟别纠结这个问题),在struts中怎么配置为.do结尾滴呢?
顺便给菜鸟补下课:
在src根目录下创建struts.properties文件,内容为:struts.action.extension=do即可大功告成!!!哇哈哈,简单嘛?
然后参考解压包jsp/upload_json.jsp,接下来我们要将其转换成action
第一步直接写类吧:
怎么写?为什么有人说拿不到request的任何参数?还说是KindEditor或Struts2的Bug?污蔑!纯属污蔑,误人子弟的人们最可恨!
废话下:struts2对文件上传进行了包装,也就是说你可以直接拿到页面中的file!不需要像写Servlet那样写了!
好直接复制upload_json.jsp的代码到action中吧?然后改改?
我们要记得在struts2中action获取文件的时候: 页面<input type="file" name="imgFile">(哪里来的这个?参看你下载官方压缩包中的:plugins\image\image.html)
那么action类属性就应当为:

action属性
复制代码
 1 private File imgFile;
 2 /** 3      * 文件名称
 4 */ 5 private String imgFileFileName;
 6  7 /** 8      * 图片宽度
 9 */10 private String imgWidth;
11 12 /**13      * 图片高度
14 */15 private String imgHeight;
16 17 /**18      * 图片对齐方式
19 */20 private String align;
21 22 /**23      * 图片标题
24 */25 private String imgTitle;
复制代码

其他的属性还是和原来action中的写法一样,哪里不一样呢?再给菜鸟补下课:

取文件名的话你的属性要这么写:页面file对象的name+FileName

取文件类型的话你的属性要这么写:页面file对象的name+ContentType

别忘了你的getter\setter方法!!!要不然你真死了都拿不到值!(纯属废话,我咋那么多废话?)

action的具体方法请看:

action的具体方法
复制代码
 1 public String uploadImg() {
 2  3         response.setContentType("text/html; charset=UTF-8");
 4 // 文件保存目录路径 5         String savePath = ServletActionContext.getServletContext().getRealPath("/") +"attached/";
 6 // 文件保存目录URL 7         String saveUrl = request.getContextPath() +"/attached/";
 8 // 定义允许上传的文件扩展名 9         String[] fileTypes =new String[] { "gif", "jpg", "jpeg", "png", "bmp" };
10 // 最大文件大小11 long maxSize = getMaxSize(Constant.FILE_SIZE_IMG);
12         PrintWriter out =null;
13 try {
14             out = response.getWriter();
15         } catch (IOException e1) {
16             log.error(e1);
17         }
18 19 if (imgFile ==null) {
20             out.println(getError("请选择文件。"));
21 returnnull;
22         }
23 24 // 检查目录25         File uploadDir =new File(savePath);
26 if (!uploadDir.isDirectory()) {
27             out.println(getError("上传目录不存在。"));
28 returnnull;
29         }
30 // 检查目录写权限31 if (!uploadDir.canWrite()) {
32             out.println(getError("上传目录没有写权限。"));
33 returnnull;
34         }
35 // 创建文件夹36         SimpleDateFormat sdf =new SimpleDateFormat("yyyyMMdd");
37         String ymd = sdf.format(new Date());
38         savePath += ymd +"/";
39         saveUrl += ymd +"/";
40         File dirFile =new File(savePath);
41 if (!dirFile.exists()) {
42             dirFile.mkdirs();
43         }
44         String fileExt = imgFileFileName.substring(imgFileFileName.lastIndexOf(".") +1).toLowerCase();
45 if (!Arrays.<String> asList(fileTypes).contains(fileExt)) {
46             out.println(getError("上传文件扩展名["+ fileExt +"]是不允许的扩展名。"));
47 returnnull;
48         }
49 if (imgFile.length() > maxSize) {
50             out.println(getError("[ "+ imgFileFileName +" ]超过单个文件大小限制,文件大小[ "+ imgFile.length() +" ],限制为[ "+ maxSize +" ] "));
51 returnnull;
52         }
53         SimpleDateFormat df =new SimpleDateFormat("yyyyMMddHHmmss");
54         String newFileName = df.format(new Date()) +"_"+new Random().nextInt(1000) +"."+ fileExt;
55         File uploadedFile =new File(savePath, newFileName);
56 try {
57             FileUtil.Copy(imgFile, uploadedFile);
58             JSONObject obj =new JSONObject();
59             obj.put("error", 0);
60             obj.put("url", saveUrl + newFileName);
61             log.debug(obj);
62             out.println(obj.toString());
63             log.debug("上传图片:["+ uploadedFile.getName() +"]"+">>>["+ newFileName +"]成功");
64         } catch (IOException e) {
65             log.error("图片上传失败:"+ e);
66         }
67 returnnull;
68     }
69 private String getError(String message) {
70         JSONObject obj =new JSONObject();
71         obj.put("error", 1);
72         obj.put("message", message);
73         log.debug(obj);
74 return obj.toString();
75     }
复制代码

然后你问我:getMaxSize(Constant.FILE_SIZE_IMG);哪来的,不好意思我有个配置文件里放的图片文件限制大小.

如果你想上传2M的文件那么就应当为:2*1024*1024

FileUtil.Copy(imgFile, uploadedFile);同理,就是个拷贝文件的方法而已没有什么大不同,这里还牵扯到文件上传的一个经典问题!

有人说临时文件没有删掉或struts报临时文件的错误.别急一会一起解决掉!

如果你写到这就着急的运行鸟,那么你伤心的看着404页面吧....

最后一步:配置struts

1.记得我们刚才改action的访问后缀了吗?继续在刚才的struts.properties中加入:

upload配置
复制代码
1 ### Parser to handle HTTP POST requests, encoded using the MIME-type multipart/form-data
2 # struts.multipart.parser=cos
3 # struts.multipart.parser=pell
4  struts.multipart.parser=jakarta
5 # uses javax.servlet.context.tempdir by default
6 struts.multipart.saveDir=c:\\temp
7 # -1 nolimit
8 struts.multipart.maxSize=-1
复制代码

最后一个是上传文件大小,因为我们在action中配置的,所以这里就直接不限制了.默认2M

中间的是临时文件存放目录,我们随便配吧,默认空所以就跑到你的tomcat下了.

第一个...你想让我解释嘛?我X你!X完了就告诉你,那个是说你用什么组件来实现上传功能!支持commons-fileupload就是默认的jakarta,cos很出名,另一个偶土了没听说过.

然后我们忘了我们的action还没有配置呢!

<action name="onUploadImg" class="xxx.x.UploadAction" method="uploadImg"></action>

我直接指定method方法了...当然你也可以直接默认execute...随你,最基础的东西.

说明下:json返回的时候用的是字符串返回的,并且没有使用官方DEMO的json_simple-1.1.jar,使用的是常用的jsonplugin-0.34.jar,这个无所谓喽,爱用神马用神马.
struts是支持json直接返回,但为什么我不用struts的json返回呢?这个就牵扯到ajax提交文件的方法了.然后你又想问:KindEditor怎么接受这个Json的?
图片上传我们不用考虑这个问题,应为在kindeditor.js中写好了,如果我们做附件上传插件的话就参考官方的图片上传来完成我们的附件上传插件!

好了,当你把配置文件都搞定了,部署重启tomcat吧!

如果这个搞不定那么附件上传就别想了.希望要使用的人仔细看下,这样做附件上传插件的时候就容易多了.


KindEditor插件之代码高亮

分享到:
评论

相关推荐

    KindEditor图片上传相关问题

    2. **权限验证**:在处理任何上传请求之前,服务端需要确保用户有上传图片的权限。这可能涉及到用户的登录状态检查、权限验证等。 3. **文件存储**:图片上传后,需要将其存储到服务器的某个位置。这可能包括选择...

    kindeditor上传视频、图片功能实现

    在“kindeditor上传视频、图片功能实现”中,我们将探讨如何利用KindEditor与Java后端配合,实现在网页上进行图片和视频的上传功能。 1. **KindEditor的图片上传功能**: KindEditor内建了图片上传的功能,用户...

    kindeditor上传图片Demo

    这个"kindeditor上传图片Demo"是一个示例项目,旨在演示如何在KindEditor中集成图片上传功能。在开发过程中,开发者可能会遇到各种问题,比如权限设置、服务器端处理、前端交互等。在这个Demo中,作者可能已经解决了...

    kindeditor图片上传携带token字段

    本文将详细讲解如何在KindEditor中实现图片上传时携带token字段,以确保数据的安全性和完整性。 首先,理解“token”在Web开发中的作用至关重要。Token通常用于验证客户端请求的合法性,防止跨站请求伪造(Cross-...

    kindeditor上传图片自动压缩过大的图片

    总的来说,实现KindEditor上传图片自动压缩过大的图片,需要结合服务器端脚本处理和合适的图像处理库。这个过程不仅可以提高网站性能,也可以帮助维护服务器资源,为用户提供更好的体验。记得在实现时考虑错误处理和...

    kindEditor+图片批量上传

    在实际应用中,"KindEditor"可以广泛应用于博客系统、论坛、内容管理系统(CMS)以及任何需要用户交互式上传图片的Web应用。它的存在使得内容创作者能够更加专注于内容创作,而非被琐碎的上传过程所牵绊,从而提升...

    完整版kindeditor修正上传图片问题

    在"完整版KindEditor修正上传图片问题"这个主题中,我们将探讨如何解决KindEditor在处理图片上传时可能遇到的问题,以及如何配置和定制编辑器以适应不同的后台环境。 首先,KindEditor提供了一个`demo`文件夹,其中...

    kindEditor上传图片到七牛(php版)

    - 处理文件上传:接收KindEditor上传的文件,然后使用七牛SDK上传至指定Bucket。 4. **实现七牛上传** 在`upload_qiniu.php`中,使用七牛SDK的`putFile()`或`put()`方法上传文件。上传成功后,返回七牛云存储的...

    KindEditor3.5.1 asp.net 图片上传例子

    其中图片上传就是一个 所以就自己写了个Demo研究,现在总算没问题了 这个Demo希望对大家有帮助 另外需注意的是 上传文件夹(Upload)一定要在根目录 不然会报错: -- 行: 1103 ...

    kindeditor多图上传H5版

    8. **前端验证**:为了提高用户体验和减少服务器压力,前端通常会进行一些基本的文件类型和大小验证,例如限制只能上传图片文件,或者限制单个文件大小。 9. **后端接口设计**:H5版的KindEditor需要与服务器端接口...

    kindEditor4.1版修改上传图片宽高(图片自适应)

    通过上述修改,可以有效地解决kindEditor4.1版本中上传图片无法自适应的问题。关键是利用宽度的百分比计算来动态调整图片的大小,并且避免硬编码图片的高度,以保持图片的比例不变。这些修改不仅提高了用户体验,还...

    优化kindeditor,修改flash批量上传图片方式为H5上传

    首先,我们需要理解H5上传图片的核心技术是`File API`,它允许浏览器读取、写入和操作本地文件,而无需服务器的介入。在KindEditor中,我们可以通过监听`change`事件来获取用户选择的文件,然后利用`FileReader`对象...

    kindeditor编辑器,可上传多图片,文件上传等功能

    KindEditor内置了图片和文件上传插件,用户可以直接在编辑器内上传图片或文件,无需离开当前页面。上传过程通常包括选择文件、预览、上传和返回编辑器,这些步骤都是自动化的。上传后的资源可以被嵌入到编辑内容中...

    优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘

    1. **Flash批量上传图片向H5上传的转变**: 随着Flash技术的逐渐淘汰,将KindEditor中原有的基于Flash的图片批量上传方式替换为H5(HTML5)上传,这是一个必要的优化步骤。HTML5引入了File API,使得在浏览器中处理...

    KindEditor上传图片和管理图片

    在"KindEditor上传图片和管理图片"这个主题中,我们将探讨如何利用KindEditor实现图片的上传和管理,以及在实际应用中的一些考虑。 首先,让我们了解图片上传的基本过程。在KindEditor中,用户可以通过内置的图片...

    KindEditor-4.1.9批量上传图片完整示例(可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能)

    这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...

    vue 使用kindeditor粘贴复制图片上传给自己服务器,单独图片上传

    vue 使用kindeditor粘贴复制图片上传给自己服务器,单独图片上传,避免用户到处寻找,解决了用户粘贴复制截图时候,图片变成base64,上传给后台的时候长度过于长,所以在粘贴的时候就上传给服务器,最后以形式显示在富...

    kindeditor富文本,多图上传,去除flash插件,解决无法展示选择图片按钮问题,以及添加上传后结果展示

    在用户选择图片后,编辑器会自动将图片数据发送到该URL,并期待返回包含上传图片信息的结果。 二、去除Flash插件 由于Flash插件的过时和安全问题,KindEditor需要采用新的技术来替代其图像选择和预览功能。HTML5...

    为 KindEditor 实现图片上传

    在使用 KindEditor 进行文本编辑时,一个常见的需求是实现图片上传功能,以便用户能够方便地将本地图片插入到编辑的内容中。本篇文章将详细介绍如何为 KindEditor 实现图片上传功能。 首先,我们需要理解 ...

    kindeditor添加图片压缩功能(Asp.net版)

    2. **接收上传图片**:在KindEditor中,用户上传图片时会触发服务器端的事件。你需要创建一个处理POST请求的控制器方法,接收上传的图片文件。通常,文件会被作为Multipart/form-data的Part提交,需要解析请求以获取...

Global site tag (gtag.js) - Google Analytics