为xheditor加上SyntaxHighlighter

1.下载SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
或google code:
http://code.google.com/p/syntaxhighlighter/

下载后传到systemeditorxheditorxheditor_plugins下

2.在我们的xheditor中加个一个按钮
打开
systemlibfunc.php中kc_htm_editor方法在下面这行
shortcuts:{'ctrl+enter':submitForm},
插入
                    plugins:{
                        Code:{c:'btnCode',t:'插入代码',h:1,e:function(){
                            var _this=this;
                            var htmlCode='<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="vb">VB/ASP</option><option value="sql">SQL</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';            var jCode=$(htmlCode),jType=$('#xheCodeType',jCode),jValue=$('#xheCodeValue',jCode),jSave=$('#xheSave',jCode);
                            jSave.click(function(){
                                _this.loadBookmark();
                                _this.pasteHTML('<pre title="code" class="brush:'+jType.val()+';">'+_this.domEncode(jValue.val())+'</pre>');
                                _this.hidePanel();
                                return false;    
                            });
                            _this.saveBookmark();
                            _this.showDialog(jCode);
                        }}
                    }

这段代码是在工具栏中注册一个按钮.可以xheditor的示例demo09.html中找到.当然为了配合SyntaxHighlighter
稍微改了一下.接着要想显示新按钮需要一段CSS：在下面这段代码后：
$s='<script src="../system/editor/xheditor/xheditor-zh-cn.min.js" type="text/javascript"></script>';
加上：
                $s.='<style type="text/css">  
                        .btnCode {  
                            background:transparent url(../system/editor/xheditor/xheditor_plugins/SyntaxHighlighter/styles/syntaxhighlight.gif) no-repeat 16px 16px;  
                            background-position:3px 3px;
                        }
                    </style>';
如果看不懂的话就看一看xheditor的示例吧.

3.在录入代码时点xheditor我们新增的按钮.输入代码后会生成类4这个的源码
<pre title="code" class="brush:html;">
....
</pre>
只要在我们的模板中加入SyntaxHighlighter的JS。并启动它。就收工了.

4.来几张图哈:


显示效果:


模板中的JS:


只有shCore.js是必需的!其它的都是脚本语言相应的JS.自已根据需要着情加吧.只要对应你相才在kc_htm_editor中的这段JS中的option就行
<option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="vb">VB/ASP</option><option value="sql">SQL</option>

示例用的是:
SyntaxHighlighter Version2.0.320 (May 03 2009)
Xheditor Version 1.1.10 (build 110904)