当前位置:编程学习 > JS >>

KindEditor 图片上传插件应用

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>

补充:网页制作,js教程 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,