給kindeditor增加代碼高亮功能

文章轉自：[url]http://www.baiyuxiong.com/?p=426[/url]

[b]實現原理：[/b]
利用一個jquery的代碼高亮插件：SyntaxHighlighter
當HTML代碼中有類似：

<pre name="code" class="vb">
</pre>

的代碼的時，SyntaxHighlighter會自動將這個標籤內的代碼高亮。

[b]實現方法：[/b]
1、給kindeditor加一個插件，在編輯欄上加一個圖標，當點擊這個圖標時，內容部分會添加上這樣的代碼：

<pre name="code" class="vb">
</pre>

代碼如下：

<script type="text/javascript">
	//定義插件
	KE.lang['hello'] = "可支持語言：php,csharp...";
	KE.plugin['hello'] = {
		click : function(id) {
			KE.util.selection(id);
			var html = '<pre name="code" class="php">You php code here.</pre>';
			KE.util.insertHtml(id, html);
			KE.layout.hide(id);
			KE.util.focus(id);
		}
	};
    //顯示插件
    KE.show({
        id : 'content1',
        cssPath : './index.css',
		afterCreate : function(id) {
			KE.event.ctrl(document, 13, function() {
				KE.util.setData(id);
				document.forms['example'].submit();
			});
			KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
				KE.util.setData(id);
				document.forms['example'].submit();
			});
		},
		items : [
		'source', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',
		'plainpaste', 'wordpaste', 'justifyleft', 'justifycenter', 'justifyright',
		'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
		'superscript', 'selectall', '-',
		'title', 'fontname', 'fontsize', 'textcolor', 'bgcolor', 'bold',
		'italic', 'underline', 'strikethrough', 'removeformat', 'image',
		'flash', 'media', 'table', 'hr', 'emoticons', 'link', 'unlink', 'about','hello'],//在最後面加上hello插件
    });
  </script>
<textarea id="content1" name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>

這樣添加後，編輯欄上並沒有加上圖標，因爲我們沒有指定背景圖片。所以找到kindeditor\skins\default.css 給裏面加一句CSS（注意樣式名稱是ke-icon-後面加上插件的名稱）:

.ke-icon-hello{
	background-image:url(./../plugins/emoticons/qq.gif);
	width: 16px;
	height: 16px;
}

續：[url]http://baiyuxiong.iteye.com/blog/778833[/url]