kindeditor文字編輯器配置和使用方法
阿新 • • 發佈：2019-01-26
在做類似新聞網站的web時候，我們需要對文章進行編輯，這個時候就會用到文字編輯器外掛，在眾多文字編輯器外掛中比較推薦kindeditor外掛。下面具體說說這種外掛的用法。
1.官網下載
2.選擇合適的內容到專案中
解壓以後有很多檔案，伺服器版本有ASP、ASP.NET、JSP、PHP幾種，這裡面我們選擇jsp作為伺服器。把壓縮包中的如下檔案放到kindeditor資料夾中，然後放到專案工程中去：
3.選擇使用的伺服器 如圖：
開啟image.js，將其中的如下程式碼
改成需要的伺服器處理檔案，這裡面改成upload_json.jsp。 4.在jsp中進行配置 (1)引入如下檔案：
這樣子當開啟jsp的時候就能正常顯示出本文編輯器了並且能正常處理圖片上傳了。
8.將文字編輯器的內容儲存到資料庫中去:
3.選擇使用的伺服器 如圖：
開啟image.js，將其中的如下程式碼
改成需要的伺服器處理檔案，這裡面改成upload_json.jsp。 4.在jsp中進行配置 (1)引入如下檔案：
<link rel="stylesheet" href=" <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. <script charset="utf-8" src="<%=path%>/kindeditor/plugins/code/prettify.js"></script>
(2)定義jsp中相應標籤，我們通常用textarea來存放文字編輯器中的值，如下：
<tr><tdalign="center"><textareaname="content"id="content"cols="100"rows="8"style="width:700px;height:400px;visibility: <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/";//檔案儲存目錄URLString 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>
這樣子整個文字編輯器的內容儲存和回顯就完成了。