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

<br />

</td>

</tr>

        這樣子整個文本編輯器的內容保存和回顯就完成了。