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

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

     1.官网下载

      地址：http://kindeditor.net/down.php  下载

     2.选择合适的内容到项目中kindeditor文件夹中，然后放到项目工程中去：

               ：

 

       3.选择使用的服务器

       如图：

     

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

 

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

      4.在demo.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="700px;height:400px;visibility:hidden;" >${HZGS.content}</textarea>

<br />

</td>

</tr>

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