KindEditor + Jsp 使用总结

KindEditor介绍

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。

以下为: kindeditor-4.1.10 版本（下载地址：http://down.admin5.com/qita/8893.html)

直接列明操作步骤

1：解压下载的压缩包到kindeditor目录下；

2：将kindeditor文件夹复制到项目中，如"/WebContent/"下；我此处讲解的是jsp,所以此处可以把php，asp，asp.net三个目录删掉。导入后的目录结构如下所示：



3：将kindeditor/jsp/lib/下的所有jar包引入到工程中。（此版本为3个jar包，最好是使用拷贝到WEB-INF/lib下引用）；

4：在需要用到文本编辑器的JSP页面的head部分引用js文件,截图与代码如下:



  <script type="text/javascript" charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/kindeditor.js"></script>      
<script type="text/javascript" charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/lang/zh_CN.js"></script>  

    <script language="javascript" type="text/javascript">
   KindEditor.ready(function(K) {
       K.create('#pubcontent', {  
          uploadJson : '<%=request.getContextPath() %>/kindeditor/jsp/upload_json.jsp',  
          fileManagerJson : '<%=request.getContextPath() %>/kindeditor/jsp/file_manager_json.jsp',  
         allowFileManager : true,
         afterBlur: function(){this.sync();}
       });  
  });  

5.大功告成!(不过,有时候我们操作过程中,会发现能成功引用文件,但是,却对我们处理的文字效果没有起任何作用,此时,就要好好的检查一下,这块自己就查找了半天,最后才解决掉,现在记录下来,以免有人和我遇到同样的问题)

自己在这里处理提交的情况,不是用submit提交,而是用js在提交表单,所以,导致半天没有起到效果,于是,查找了半天资料,终于找到了...

直接用表单的提交按钮<input type=”submit” value=”提交” />可以得到值。

而通过js的 submit()提交则为空值，解决办法就是在初始化kindeditor时加入一行代码：

afterBlur: function(){this.sync();}

这行代码的意思就是在textarea失去焦点之后执行this.sync();

这个函数就是同步KindEditor的值到textarea文本框。
官方解释：
sync()：将编辑器的内容设置到原来的textarea控件里。



搞定!!!!(以上部分参考资料来源于:js提交表单kindeditor编辑器textarea为空解决办法

参考地址:http://mgxy123.iteye.com/blog/1622585