KindEditor 图片上传插件应用
imageUploadJson的参数action这个我们还没有写呢!不要着急,如果你急的已经部署打开了该页面你会发现缺了三个图标,那是我们以后文章中实实在在写的三个插件的图标。
css教程Path : '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">(
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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/网页特效"></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>