给kindeditor增加代码高亮功能

文章转自：http://www.baiyuxiong.com/?p=426

实现原理：
利用一个jquery的代码高亮插件：SyntaxHighlighter
当HTML代码中有类似：

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

的代码的时，SyntaxHighlighter会自动将这个标签内的代码高亮。

实现方法：
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;
}

续：http://baiyuxiong.iteye.com/blog/778833

评论

2 楼 Silence_Smile 2010-10-10  

顶，一会去试试，找了好久了

1 楼 ArdenL 2010-10-09  

，楼主写的太好了，我找的好辛苦啊