kindeditor文本编辑器配置和使用方法

    在做类似新闻网站的web时候，我们需要对文章进行编辑，这个时候就会用到文本编辑器插件，在众多文本编辑器插件中比较推荐kindeditor插件。下面具体说说这种插件的用法。

     1.官网下载

      地址：http://kindeditor.net/down.php，下载最新的即可。

     2.选择合适的内容到项目中

      解压以后有很多文件，服务器版本有ASP、ASP.NET、JSP、PHP几种，这里面我们选择jsp作为服务器。把压缩包中的如下文件放到kindeditor文件夹中，然后放到项目工程中去：

       3.选择使用的服务器

       如图：

       打开image.js，将其中的如下代码

      改成需要的服务器处理文件，这里面改成upload_json.jsp。

      4.在jsp中进行配置

      (1)引入如下文件：

<link rel="stylesheet" href="<%=path%>/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="<%=path%>/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="<%=path%>/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="<%=path%>/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=path%>/kindeditor/plugins/code/prettify.js"></script>

     (2)定义jsp中相应标签，我们通常用textarea来存放文本编辑器中的值，如下：

                             <tr>
<td align="center">
    <textarea name="content" id="content" cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;" ><%=htmlspecialchars(htmlData)%></textarea>
                            <br />
                        </td>
</tr>

     (3)JS脚本中对其进行文本编辑器初始化:

<script>
    var editor1;
KindEditor.ready(function(K) {
    editor1 = K.create('textarea[name="content"]', {
cssPath : '<%=path%>/kindeditor/plugins/code/prettify.css',
uploadJson : '<%=path%>/kindeditor/jsp/upload_json.jsp',//标识处理图片的文件
fileManagerJson : '<%=path%>/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,//允许上传文件和图片
    afterCreate : function() { 
            this.sync(); 
        }, 
        afterBlur:function(){ 
            this.sync(); 
        }                 
});
prettyPrint();
});
</script>

       5.修改处理上传图片的代码

       upload_json.jsp是处理图片的代码，打开这个图片，修改图片保存路径的代码，如下：

//这里面我们将图片保存在attached文件中，需要处理好该文件夹所在的路径
String savePath = pageContext.getServletContext().getRealPath("/") + "/kindeditor/attached/";
//文件保存目录URL
String saveUrl  = path+"/kindeditor/attached/";

       7.为tomcat添加lib

       如下图，将jsp的lib文件夹下的3个包放到tomcat的lib文件夹中

      

      这样子当打开jsp的时候就能正常显示出本文编辑器了并且能正常处理图片上传了。

      8.将文本编辑器的内容保存到数据库中去:

$.ajax(
{
url: "dojkcytj.do?loginID="+window.parent.$("#loginID").val(),
data: {'content':editor1.html(),'type':$("#type").val(),'title':$("#title").val()},
type: "post",
cache : false,
success:function(responseText){
if(responseText == "0"){
  alert("添加成功");
  window.parent.$("#changePasswdDialog").dialog("close");
              $("#btnSave").disabled = true;
              $("#btnSave").hide();
  return;
  }
  if(responseText == "1"){
  alert("添加失败");
  window.parent.$("#changePasswdDialog").dialog("close");
              $("#btnSave").disabled = true;
              $("#btnSave").hide();
  return;
  }
  },
  error:function(){
  alert("system error");
  }
}
);
 }

           调用ajax方法，通过editor1.html()获取文本编辑器内容，并把它复制给content，这样后台只需要把content的内容存到数据库中即可。由于文本编辑器内容可能较多，因此数据库中用longtext类型来接收内容。这样子。编辑器的内容就以html格式保存早数据中去了。

        9.将数据库中存储的内容回显到文本编辑器中

       (1)将数据库中的内容取出来放到Model实体类中，将实体类添加到JSP中。

       (2)修改jsp中相应textarea内容，即可完成内容回显，如下：

                            <tr>
<td align="center">
    <textarea name="content" id="content"  cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;" >${HZGS.content}</textarea>
                            <br />
                        </td>
</tr>

        这样子整个文本编辑器的内容保存和回显就完成了。