小博老師解析Java核心技術 ——KindEditor文本編輯器使用

[引言]

咱們在製做Java Web項目的時候，常常會須要用戶輸入並提交內容複雜的信息，好比文字、圖片、表格、樣式混排的數據信息，這樣簡單的文本域控件<textarea></textarea>就難以知足咱們的需求了，此時咱們則須要使用一些「富文本」編輯器了。文本小博老師就爲你們介紹一款很是簡單易學，卻又功能強大的文本編輯器——KindEditor。

[步驟閱讀一]文本編輯器原理

其實文本編輯器的原理很是容易理解，它經過Javascript封裝了不少現成的功能，將用戶控件分爲「顯示面板」和「代碼面板」，用戶在顯示面板中輸入內容，而且能夠經過現成的各種按鈕實如今文本內嵌入字體樣式、編輯表格、表單控件甚至上傳圖片的功能。而此時代碼面板中則經過Javascript，將顯示面板中的效果自動轉化成了HTML代碼，而且對於用戶隱藏了起來，當用戶編輯完成後，表單真正提交的，則是代碼面板中的HTML代碼。

 

[步驟閱讀二]文本編輯器使用

第一步：在KindEditor官網下載並解壓縮文件夾，而且把解壓縮的文件夾複製到項目中。

第二步：引入文件夾中kindeditor/jsp/lib/路徑下的jar文件。

第三步：在您須要添加文本編輯器的頁面中，導入css和javascript文件，以下：

<link rel="stylesheet" href="kindeditor-4.1.10/themes/default/default.css" />

<link rel="stylesheet" href="kindeditor-4.1.10/plugins/code/prettify.css" />

<script charset="utf-8" src="kindeditor-4.1.10/kindeditor.js"></script>

<script charset="utf-8" src="kindeditor-4.1.10/lang/zh_CN.js"></script>

<script charset="utf-8" src="kindeditor-4.1.10/plugins/code/prettify.js"></script>

第四步：在你須要添加文本編輯器的頁面中，加入javascript代碼，其做用是將文本域控件<textarea></textarea>替換成文本編輯器（其實文本域控件只是隱藏做爲代碼面板，而且生成與其對應的顯示面板）。核心代碼以下：

<script>

KindEditor.ready(function(K) {

    var editor1 = K.create('textarea[name="要替換的textarea的name"]', {

          cssPath : 'kindeditor-4.1.10/plugins/code/prettify.css',

          uploadJson : 'kindeditor-4.1.10/jsp/upload_json.jsp',

          fileManagerJson : 'kindeditor-4.1.10/jsp/file_manager_json.jsp',

allowFileManager : true,

afterCreate : function() {

var self = this;

K.ctrl(document, 13, function() {

self.sync();

document.forms['表單的name'].submit();

});

K.ctrl(self.edit.doc, 13, function() {

self.sync();

document.forms['表單的name'].submit();

});

}

});

prettyPrint();

});

</script>

第五步：轉義<textarea></textarea>控件中的特殊符號，核心代碼以下：

<%

private String htmlspecialchars(String str) {

str = str.replaceAll("&", "&");

str = str.replaceAll("<", "<");

str = str.replaceAll(">", ">");

str = str.replaceAll("\"", """);

return str;

}

%>

第六步：若是須要在編輯器中實現上傳文件的功能，能夠修改上傳文件在服務器的保存路徑，upload_json.jsp頁面中核心代碼以下：

//文件保存目錄路徑

String savePath = pageContext.getServletContext().getRealPath("/") + "你要的路徑";

 

//文件保存目錄URL

String saveUrl  = request.getContextPath() + "/你要的路徑";