kindeditor3.x升級到4.x 加入代碼高亮功能

目前kindeditor已經升級到了4.1.2版本，其中4.0以上版本已經加入了代碼高亮功能，因此決定把系統中kindeditor從3.x升級到最新的4.1.2，不過官方對於代碼高亮功能，並未給予太多的說明，還須要本身作一些摸索，好在kindeditor的用戶仍是比較多的，相對資料也比較多。

對於kindeditor升級，官方給了一個說明文檔，相對仍是比較詳細的：http://www.kindsoft.net/docs/upgrade.html

首先在kindeditor官網下載最新4.1.2版本的插件包：http://kindeditor.googlecode.com/files/kindeditor-4.1.2.zip

下載完畢後進行解壓，目錄中：

asp、jsp、php：這幾個目錄主要放着對應語言的示例程序

那麼咱們須要的主要是：lang、plugins、themes這幾個文件夾，分別對應着是：語言包、插件包、主題樣式

將這三個包，複製放到咱們項目裏去。

1.在要顯示kindeditor的頁面引入下面文件

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

2.而後加入初始化代碼

<script>
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        resizeType : 2,
                        uploadJson : '../php/upload_json.php'
                });
        });
</script>

3.kindeditor3.x和4.x版本間升級較大，4.x修改過一些參數名，因此3.x的初始化參數不必定直接兼容4.x

4.下面發一個本身配置過的代碼供你們參考

<script type="text/javascript">
var editor;
KindEditor.options.filterMode = false;
KindEditor.ready(function(K) {
	editor = K.create('#editor', {
	resizeType : 1,
	uploadJson : '<%=basePath%>imgUpload.action',
	fileManagerJson: '<%=basePath%>fileManager.action',
	allowFileManager: true,
	items: ['bold','italic','underline','strikethrough','removeformat','|',
		'forecolor','hilitecolor','title','fontname','fontsize','|', 
		'justifyleft','justifycenter','justifyright','insertorderedlist',
		'insertunorderedlist','indent','outdent','|', 
		'link','unlink','code','image','table','hr','anchor','|',
		'quickformat','clearhtml','plainpaste', 'wordpaste','source'],
	width: "750px",
	height: "320px",
	themesPath: "<%=basePath%>styles/js/kindeditor4/themes/",
	pluginsPath: "<%=basePath%>styles/js/kindeditor4/plugins/",
	cssPath: "<%=basePath%>styles/js/kindeditor4/plugins/code/prettify.css"
});
	prettyPrint();
});
</script>

關於kindeditor4.x的初始化參數的說明，你們能夠參考官方文檔： http://www.kindsoft.net/docs/option.html

5.最後在提交數據時，發現一個問題，textarea中的內容並無提交到後臺，可是官方卻給了以下說明：

KindEditor在默認狀況下自動尋找textarea所屬的form元素，找到form後onsubmit事件裏添加sync函數，因此用form方式提交數據，不須要手動執行sync()函數。

解決辦法：在數據提交前，加入同步：editor.sync();

例如：

if(validate_title() && validate_newsType()){
    editor.sync();
    $("#news_form").submit();
}

6.當輸入html或script標籤時，保存後，再次編輯數據時，發現內容在編輯器中不顯示，切換html源碼模式，也沒有內容。緣由是kindeditor開啓了標籤過濾功能，解決辦法以下：

KindEditor.ready前添加

KindEditor.options.filterMode = false;

注：本文首發於 度外網絡 官方博客： http://www.duwaiweb.com/blog/20120825_aaa2796e-e023-4618-b613-d6a18ed2f9fa.html