Kindeditor环境搭建(JSP)

Kindeditor环境搭建(JSP)

文章分类:Web前端

一 环境: XP3+Myeclipse6.6+Tomcat7
二 官网: http://www.kindsoft.net/
需要的jar文件如下 : 

commons-fileupload-1.2.1.jar

commons-io-1.4.jar

json_simple-1.1.jar
三 参考资料
1 可视化编辑器的开发心得
http://www.javaeye.com/topic/552177
2 KindEditor使用
http://jonney-82.javaeye.com/blog/447579
3 kindeditor错误“服务器发生故障”解决的办法！
http://www.webqi.cn/news/news179.html
4 基于kindeditor3.4的上传功能的JAVA实现
http://www.javaeye.com/topic/599971
四 具体代码:版本:Kindeditor3.5
1 参考(kindeditor错误“服务器发生故障”解决的办法！)所讲述问题修改二个文件,就不用每个页面都要设置:imageUploadJson,fileManagerJson这二个参数.
修改位置与文件名称
1 kindeditor/plugins/image/image.html
将其中的:

var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../php/upload_json.php' : KE.g[id].imageUploadJson;

var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../php/upload_json.php' : KE.g[id].imageUploadJson;

就是把: php替换成:jsp,修改为:

var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../jsp/upload_json.jsp' : KE.g[id].imageUploadJson;

var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ? '../../jsp/upload_json.jsp' : KE.g[id].imageUploadJson;

2 kindeditor/plugins/file_manager/file_manager.js

var JSON_URL = '../../php/file_manager_json.php';

var JSON_URL = '../../php/file_manager_json.php';

var JSON_URL = '../../jsp/file_manager_json.jsp';

var JSON_URL = '../../jsp/file_manager_json.jsp';

3 页面调用如下:

"text/javascript">
  KE.show({
    id : 'content1',
    allowFileManager : true,
    afterCreate : function(id) {
    KE.event.ctrl(document, 13, function() {
        KE.util.setData(id);
        document.forms['example'].submit();
    });
    KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
        KE.util.setData(id);
        document.forms['example'].submit();
        });
      }
    });

未修改前的代码如下:

"text/javascript">
  KE.show({
    id : 'content1',
    allowFileManager : true,
        imageUploadJson : '${pageContext.request.contextPath}/kindeditor/jsp/upload_json.jsp',
fileManagerJson : '${pageContext.request.contextPath}/kindeditor/jsp/file_manager_json.jsp',
    afterCreate : function(id) {
    KE.event.ctrl(document, 13, function() {
        KE.util.setData(id);
        document.forms['example'].submit();
    });
    KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
        KE.util.setData(id);
        document.forms['example'].submit();
        });
      }
    });

4 各页面如下:
添加JSP页面

<%@ page language="java" pageEncoding="UTF-8"
    contentType="text/html; charset=UTF-8"%>
"-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


        "text/javascript" charset="utf-8"
            src="${pageContext.request.contextPath}/kindeditor/kindeditor.js">
        "text/javascript">
        KE.show({
            id : 'content1',
            allowFileManager : true,
            afterCreate : function(id) {
                KE.event.ctrl(document, 13, function() {
                    KE.util.setData(id);
                    document.forms['example'].submit();
                });
                KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
                    KE.util.setData(id);
                    document.forms['example'].submit();
                });
            }
        });




        "${pageContext.request.contextPath}/kindeditors"
            name="example" id="example" method="post">

            1 cellPadding=0 width="800" border=0
                align="center">

                    "#ffffff" align="center">
                        内容

                    "#ffffff" align="center">
                        "content1" name="content1"
                            style="width: 700px; height: 400px">




                    "center" colspan="2">
                        "submit" value="保存!">

<%@ page language="java" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

	
		
		
	

	
		

			
			

				

					

						内容
					
					

						
					
				
				

				

					

						
					
				
			
			
		
	

Servlet代码:

String context = request.getParameter("content1");
        System.out.println("context: " + context);
        request.setAttribute("context",context);
        request.getRequestDispatcher("/kindeditor-edit.jsp").forward(request, response);

String context = request.getParameter("content1");
		System.out.println("context: " + context);
		request.setAttribute("context",context);
		request.getRequestDispatcher("/kindeditor-edit.jsp").forward(request, response);

编辑JSP页面如下:

Jsp代码

<%@ page language="java" pageEncoding="UTF-8"
    contentType="text/html; charset=UTF-8"%>
"-//W3C//DTD HTML 4.01 Transitional//EN">


        "text/javascript" charset="utf-8"
            src="${pageContext.request.contextPath}/kindeditor/kindeditor.js">
        "text/javascript">
        KE.show({
            id : 'content1',
            allowFileManager : true,
            afterCreate : function(id) {
                KE.event.ctrl(document, 13, function() {
                    KE.util.setData(id);
                    document.forms['example'].submit();
                });
                KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
                    KE.util.setData(id);
                    document.forms['example'].submit();
                });
            }
        });




        "">
        1 cellPadding=0 width="800" bgColor=#ABACAD
            border=0>

                "#ffffff" align="center">
                    编辑内容

                "#ffffff" align="center">
                    "content1" name="content1"
                        style="width: 750px; height: 400px">${requestScope.context}




        "${pageContext.request.contextPath}">返回

以上内容转载至：http://liuzidong.javaeye.com/blog/953941  

补充：自己配置的时候，上传图片总会提示“服务器故障”，找了N长时间，发现自己确定引包了，但引的路径是该JS下的lib，把这三个包提取出来放到WEBROOT/WEB-INF/LIB下引用才会正常使用！    记录下来备用！