K9 通用版 博客版 主题版 地方门户版 企业版 |   企业(ASP) 分类 使用 分享 疑问 模板 建议 帮助 错误 其他
+新建主题 [Ajax]
填写帐号密码即可完成注册
+新建话题 最新回复排序 最新主题排序 精华帖子

为xheditor加上SyntaxHighlighter

1Next >

pktsandy 发表于:11-11-02 14:40 [添加收藏] 楼主 [回复] #Top#
pktsandy 人气:1181 积分:3438 金币:29309
VIP 管理团队 EST团队 技术精英 灌水狂人
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。并启动它。就收工了.



pktsandy 发表于:11-11-02 14:49 沙发 [回复] #Top#
pktsandy 人气:1181 积分:3438 金币:29309
VIP 管理团队 EST团队 技术精英 灌水狂人
4.来几张图哈:
为xheditor加上SyntaxHighlighter[图1]

显示效果:
为xheditor加上SyntaxHighlighter[图2]

模板中的JS:
为xheditor加上SyntaxHighlighter[图3]

只有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)

1Next >

发表回复

帐号 匿名发布 审核后可见 [加载完整在线编辑器]
内容
验证码
KingCMS 内容管理系统

关于我们 联系我们 广告报价 付款方式 站点导航

Copyright © 2004-2015 Focuznet All rights reserved.

广州唯众网络科技有限公司 粤ICP备08008106号