[插件] ckeditor+ckfinder+syntaxhighlight实现上传和插入代码高亮（for .NET）
转载自Root7's Blog ckeditor+ckfinder+syntaxhighlight实现上传和插入代码高亮（for .NET） http://www.cnblogs.com/root7/archive/2010/11/02/1866712.html#
最近在做一个BLOG程序,找了好几款编辑器，起初想用FckEditor发现速度稍微有点慢，并且作为一个搞程序的，那肯定要插入代码了，代码高亮那是必须的,美观大方可是也有缺点客户浏览时页面代码过多，影响速度。以前没注意原来Fckeditor已经升级为ckeditor并且不再使用引用dll方式,我个人喜欢用新的,就研究了下最新版的ckeditor如何实现我们想要的功能！在调试期间也遇到了一点问题，现在还有一点BUG没有解决，待会我贴出来，废话说了这么多。呵呵~
转载请注明出处：http://www.cnblogs.com/root7
注：本文参考网上同行部分程序，在此致谢！
进入正题：ckeditor_3.4.1+ckfinder_aspnet_2.0.1 有需要的点击下载（目前是最新版），注意下载ckfinder的时候一定要选择.net版本。
由于新版的ckeditor不支持上传管理文件功能，我们要配合ckfinder来实现上传功能。
我在VS2005+xp 环境下进行测试。VS2008 10版本是否能正常调用，我不太清楚，有待大家测试！
第一步：搭建基本结构
先解压修改下程序，不是必需的文件都可以删除，因为有些文件我们根本用不到，不删除的话还有可能给黑客留下漏洞导致网站被入侵^_^。
ckeditor删除多余文件后结构如下图所示 在lang文件夹下删除那些不需要语言文件，后缀名为.js我们只留下 cn.js zh-cn.js 和en.js三个即可
ckfinder删除不必要文件后结构如下：（这里面也有一个lang的文件夹打开和ckeditor进行一样的操作删除那些不必要的语言文件）
接着我们打开VS新建网站
同时将瘦身后的ckeditor 和ckfinder 添加进来，大致结构如下图所示（在实际网站应用中，你可以修改默认文件夹名称防止被别人猜解目录搞破坏）：
bin 文件夹下的CKfinder.dll 在CKfinder/bin/debug 文件夹下有，直接添加引用即可自动生成bin文件夹。
至此我们做完前期的工作，现在肯定是不行的我们要修改一些配置文件。
第二部：修改配置
先修改ckeditor，在ckeditor文件夹下找到config.js
添加如下代码
config.skin = 'kama';
config.language = 'zh-cn';
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];
（注意：尽量不要加入汉字注释，可能导致发布网站是无法调用CSS样式表和JS代码）
说明：config.skin 后面是皮肤，默认ckeditor提供三个皮肤;
config.language 后面是默认语言 我们设置为 zh-cn;
config.toolbar_full 后面是工具按钮的栏;
到这里我们就可以在aspx页面中调用默认的ckeditor编辑器了;
新建一个aspx文件 在HTML代码的head 部分加入<script type="text/javascript" src="ckeditor/ckeditor.js"></script>（这个必需）
在div部分加入 <asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine" runat="server"></asp:TextBox> 运行即可看到ckeditor编辑器了
获取编辑器的值插入数据库 则TextBox.Text即可，绑定的话直就从数据库读取<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
提示：在插入类似'时候ASPX页面提示客户端（*）中检测到有潜在危险的 Request.Form 值。在页面HTML代码第一行加入validateRequest="false"或者修改web.config文件即可，但这不是最安全的做法，可能存在提交非法数据和跨站的危险，这里不做深入探讨。
我们看下效果
当我们打开插入图片按钮时候我们会发现跟以前的fckeditor不一样，缺少了上传图片按钮。如下：
那么接下来我们修改下cdeditor下面的config.js 在函数内加入如下代码：
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Image';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Image';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
说明：config.filebrowser* 为上传文件时调用的ckfinder connector.aspx文件相应路径，这个根据您的网站文件结构修改，仅为测试我没有修改文件夹名称。
添加代码后在运行一下看看这个时候你发现有了上传的按钮
点击浏览服务器按钮提示如下：
那我们来修改下找到ckfinder下面的config.ascx文件编辑 找到public override bool CheckAuthentication() 方法将return false;修改为 return true;
(这里需要说明一下，这样修改不安全，可以导致任何人上传文件，那么你可以先判断session 或者通过其他的手段达到一般用户不能非法上传，具体不再赘述)
本文只讲调用 所以就没有写的那么严格，修改后代码如下：
public override bool CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
//
// return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
//
// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
// user logs on your system.
return true;
}
还是在这个文件内找到 public override void SetConfig() 方法里面的 BaseUrl = "~/UploadFiles/"; 后面的目录根据自己的项目结构写，我单独建立了个UploadFiles文件夹存放上传文件。
这样基本的上传算是搞定了！
接下来要实现代码高亮功能了
我们用SyntaxHighlighter来实现，其他的暂时还没研究，有兴趣的朋友可以研究下！
在ckeditor/plugins/下添加syntaxhighlight文件夹（名称可以按照自己爱好来写）我这里就用默认的名称。
在syntaxhighlight文件夹下分别添加 dialogs、images、lang文件夹和一个JS文件 plugin.js
plugin.js文件内容如下
CKEDITOR.plugins.add("syntaxhighlight",{requires:["dialog"],lang:["cn"],init:function(a){var b="syntaxhighlight";
var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));
c.modes={wysiwyg:1,source:1};
c.canUndo=false;a.ui.addButton("Code",{label:a.lang.syntaxhighlight.title,command:b,icon:this.path+"images/syntaxhighlight.gif"});
CKEDITOR.dialog.add(b,this.path+"dialogs/syntaxhighlight.js")}});
dialogs文件夹下添加syntaxhighlight.js文件 内容如下
/*********************************************************************************************************/
/**
* Syntax Highlighter plugin for CKEditor 3.x (Author: Lajox ; Email: lajox@19www.com)
* Insert/Edit Syntax Highlighter code snippet
*/
/*********************************************************************************************************/
CKEDITOR.dialog.add("syntaxhighlight",function(c){
var a=function(f){
f=f.replace(/<br>/g,"\n");
f=f.replace(/&/g,"&");
f=f.replace(/</g,"<");
f=f.replace(/>/g,">");
f=f.replace(/"/g,'"');
return f
};
var e=function(f){
var f=new Object();
f.hideGutter=false;
f.hideControls=false;
f.collapse=false;
f.showColumns=false;
f.noWrap=false;
f.firstLineChecked=false;
f.firstLine=0;
f.highlightChecked=false;
f.highlight=null;
f.lang=null;f.code="";
return f
};
var b=function(i){
var h=e();
if(i){
if(i.indexOf("brush")>-1){
var g=/brush:[ ]{0,1}(\w*)/.exec(i);
if(g!=null&&g.length>0){h.lang=g[1].replace(/^\s+|\s+$/g,"")}}
if(i.indexOf("gutter")>-1){h.hideGutter=true}
if(i.indexOf("toolbar")>-1){h.hideControls=true}
if(i.indexOf("collapse")>-1){h.collapse=true}
if(i.indexOf("first-line")>-1){var g=/first-line:[ ]{0,1}([0-9]{1,4})/.exec(i);
if(g!=null&&g.length>0&&g[1]>1){h.firstLineChecked=true;h.firstLine=g[1]}}
if(i.indexOf("highlight")>-1){
if(i.match(/highlight:[ ]{0,1}\[[0-9]+(,[0-9]+)*\]/)){
var f=/highlight:[ ]{0,1}\[(.*)\]/.exec(i);
if(f!=null&&f.length>0){h.highlightChecked=true;h.highlight=f[1]}
}}
if(i.indexOf("ruler")>-1){h.showColumns=true}
if(i.indexOf("wrap-lines")>-1){h.noWrap=true}
}
return h
};
var d=function(g){
var f="brush:"+g.lang+";";
if(g.hideGutter){f+="gutter:false;"}
if(g.hideControls){f+="toolbar:false;"}
if(g.collapse){f+="collapse:true;"}
if(g.showColumns){f+="ruler:true;"}
if(g.noWrap){f+="wrap-lines:false;"}
if(g.firstLineChecked&&g.firstLine>1){f+="first-line:"+g.firstLine+";"}
if(g.highlightChecked&&g.highlight!=""){f+="highlight: ["+g.highlight.replace(/\s/gi,"")+"];"}
return f
};
return{
title:c.lang.syntaxhighlight.title,
minWidth:500,
minHeight:400,
onShow:function(){
var i=this.getParentEditor();
var h=i.getSelection();
var g=h.getStartElement();
var k=g&&g.getAscendant("pre",true);
var j="";
var f=null;
if(k){
code=a(k.getHtml());
f=b(k.getAttribute("class"));
f.code=code
}else{f=e()}
this.setupContent(f)
},
onOk:function(){
var h=this.getParentEditor();
var g=h.getSelection();
var f=g.getStartElement();
var k=f&&f.getAscendant("pre",true);
var i=e();
this.commitContent(i);
var j=d(i);
var l=CKEDITOR.dom.element.createFromHtml('<pre class="'+j+'">'+a(i.code)+"</pre>", h.document);
if(k){
l.insertBefore(k);
k.remove();
}else{
h.insertElement(l);
}
},
contents:[
{ id:"source",
label:c.lang.syntaxhighlight.sourceTab,
accessKey:"S",
elements:[
{ type:"vbox",
children:[
{ id:"cmbLang",
type:"select",
labelLayout:"horizontal",
label:c.lang.syntaxhighlight.langLbl,
"default":"java",
widths:["25%","75%"],
items:[["Bash (Shell)","bash"],["C#","csharp"],["C++","cpp"],["CSS","css"],["Delphi","delphi"],["Diff","diff"],["Groovy","groovy"],["Javascript","jscript"],["Java","java"],["Java FX","javafx"],["Perl","perl"],["PHP","php"],["Plain (Text)","plain"],["Python","python"],["Ruby","ruby"],["Scala","scala"],["SQL","sql"],["VB","vb"],["XML/XHTML","xml"]],
setup:function(f){if(f.lang){this.setValue(f.lang)}},
commit:function(f){f.lang=this.getValue()}}]
},
{ type:"textarea",
id:"hl_code",
rows:22,
style:"width: 100%",
setup:function(f){if(f.code){this.setValue(f.code)}},
commit:function(f){f.code=this.getValue()}}
]
},
{ id:"advanced",
label:c.lang.syntaxhighlight.advancedTab,
accessKey:"A",
elements:[
{ type:"vbox",
children:[
{ type:"html",
html:"<strong>"+c.lang.syntaxhighlight.hideGutter+"</strong>"
},
{ type:"checkbox",
id:"hide_gutter",
label:c.lang.syntaxhighlight.hideGutterLbl,
setup:function(f){this.setValue(f.hideGutter)},
commit:function(f){f.hideGutter=this.getValue()}
},
{ type:"html",
html:"<strong>"+c.lang.syntaxhighlight.hideControls+"</strong>"
},
{ type:"checkbox",
id:"hide_controls",
label:c.lang.syntaxhighlight.hideControlsLbl,
setup:function(f){this.setValue(f.hideControls)},
commit:function(f){f.hideControls=this.getValue()}
},
{ type:"html",
html:"<strong>"+c.lang.syntaxhighlight.collapse+"</strong>"
},
{ type:"checkbox",
id:"collapse",
label:c.lang.syntaxhighlight.collapseLbl,
setup:function(f){this.setValue(f.collapse)},
commit:function(f){f.collapse=this.getValue()}
},
{ type:"html",
html:"<strong>"+c.lang.syntaxhighlight.showColumns+"</strong>"
},
{ type:"checkbox",
id:"show_columns",
label:c.lang.syntaxhighlight.showColumnsLbl,
setup:function(f){this.setValue(f.showColumns)},
commit:function(f){f.showColumns=this.getValue()}
},
{ type:"html",
html:"<strong>"+c.lang.syntaxhighlight.lineWrap+"</strong>"
},
{ type:"checkbox",
id:"line_wrap",
label:c.lang.syntaxhighlight.lineWrapLbl,
setup:function(f){this.setValue(f.noWrap)},
commit:function(f){f.noWrap=this.getValue()}
},
{ type:"html",
html:"<strong>"+c.lang.syntaxhighlight.lineCount+"</strong>"
},
{ type:"hbox",
widths:["5%","95%"],
children:[
{type:"checkbox",id:"lc_toggle",label:"",setup:function(f){this.setValue(f.firstLineChecked)},commit:function(f){f.firstLineChecked=this.getValue()}
},
{type:"text",id:"default_lc",style:"width: 15%;",label:"",setup:function(f){if(f.firstLine>1){this.setValue(f.firstLine)}},commit:function(f){if(this.getValue()&&this.getValue()!=""){f.firstLine=this.getValue()}}
}
]
},
{ type:"html",
html:"<strong>"+c.lang.syntaxhighlight.highlight+"</strong>"
},
{ type:"hbox",
widths:["5%","95%"],
children:[
{type:"checkbox",id:"hl_toggle",label:"",setup:function(f){this.setValue(f.highlightChecked)},commit:function(f){f.highlightChecked=this.getValue()}
},
{type:"text",id:"default_hl",style:"width: 40%;",label:"",setup:function(f){if(f.highlight!=null){this.setValue(f.highlight)}},commit:function(f){if(this.getValue()&&this.getValue()!=""){f.highlight=this.getValue()}}
}
]
},
{ type:"hbox",
widths:["5%","95%"],
children:[
{type:"html",html:""
},
{type:"html",html:"<i>"+c.lang.syntaxhighlight.highlightLbl+"</i>"
}
]
}
]
}]
}
]
}
});
images文件夹添加syntaxhighlight.gif图标，自己在网上找一个自己喜欢的即可。
lang 文件夹下添加 一个en.js 和cn.js文件
cn.js代码如下
CKEDITOR.plugins.setLang('syntaxhighlight', 'cn',
{
syntaxhighlight:
{
title: '添加或更新代码',
sourceTab: '代码',
langLbl: '选择语言',
advancedTab: '高级',
hideGutter: '隐藏分割线',
hideGutterLbl: '隐藏分割线和行号',
hideControls: '隐藏工具栏',
hideControlsLbl: '隐藏浮动工具栏',
collapse: '代码折叠',
collapseLbl: '默认折叠代码块 (需要启用工具栏)',
lineWrap: '自动换行',
lineWrapLbl: '关闭自动换行',
autoLinks: '自动链接',
autoLinksLbl: '不自动转换超链接',
lineCount: '起始行号',
highlight: '高亮行号',
highlightLbl: '输入以逗号分隔的行号, 如 <em>3,10,15</em>.'
}
});
en.js 代码
CKEDITOR.plugins.setLang('syntaxhighlight', 'en',
{
syntaxhighlight:
{
title: 'Add or update a code snippet',
sourceTab: 'Source code',
langLbl: 'Select language',
advancedTab: 'Advanced',
hideGutter: 'Hide gutter',
hideGutterLbl: 'Hide gutter & line numbers.',
hideControls: 'Hide controls',
hideControlsLbl: 'Hide code controls at the top of the code block.',
collapse: 'Collapse',
collapseLbl: 'Collapse the code block by default. (controls need to be turned on)',
showColumns: 'Show columns',
showColumnsLbl: 'Show row columns in the first line.',
lineWrap: 'Disable line wrapping',
lineWrapLbl: 'Switch off line wrapping.',
lineCount: 'Default line count',
highlight: 'Highlight lines',
highlightLbl: 'Enter a comma seperated lines of lines you want to highlight, eg <em>3,10,15</em>.'
}
});
最后在ckeditor/config.js添加两行调用的代码
config.extraPlugins = 'syntaxhighlight';
config.toolbar_Full.push(['Code']);
在网站你觉得合适的位置添加一个scripts和styles 文件夹里面分别存放给代码着色的JS代码和CSS样式表（代码太长我不贴上来了，你可以去网上搜一下）
接下来在你要显示代码的页面HTML的head部分加入
<script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushBash.js"></script> <script type="text/javascript" src="scripts/shBrushCpp.js"></script> <script type="text/javascript" src="scripts/shBrushCSharp.js"></script> <script type="text/javascript" src="scripts/shBrushCss.js"></script> <script type="text/javascript" src="scripts/shBrushDelphi.js"></script> <script type="text/javascript" src="scripts/shBrushDiff.js"></script> <script type="text/javascript" src="scripts/shBrushGroovy.js"></script> <script type="text/javascript" src="scripts/shBrushJava.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <script type="text/javascript" src="scripts/shBrushPhp.js"></script> <script type="text/javascript" src="scripts/shBrushPlain.js"></script> <script type="text/javascript" src="scripts/shBrushPython.js"></script> <script type="text/javascript" src="scripts/shBrushRuby.js"></script> <script type="text/javascript" src="scripts/shBrushScala.js"></script> <script type="text/javascript" src="scripts/shBrushSql.js"></script> <script type="text/javascript" src="scripts/shBrushVb.js"></script> <script type="text/javascript" src="scripts/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
即可调用。
上一张最终效果图
至此基本上完成了ckeditor实现上传和代码高亮显示的功能，我自己也找了少资料，其中也遇到了不少小问题，最后差不多都解决了！
如有什么不足或者错误之处还望指出。^_^
posted on 2011-09-24 21:58 Blank.Wood 阅读(715) 评论(0) 收藏 举报
浙公网安备 33010602011771号