ckeditor+ckfinder+syntaxhighlight实现上传和插入代码高亮（for .NET）

最近在做一个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

添加如下代码

01	config.skin = 'kama';

02	config.language = 'zh-cn';

03

04	config.toolbar_Full = [

05	['Source','-','Save','NewPage','Preview','-','Templates'],

06	['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],

07	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

08	['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

09

'/',

10	['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

11	['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

12	['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

13	['Link','Unlink','Anchor'],

14	['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

15

'/',

16	['Styles','Format','Font','FontSize'],

17	['TextColor','BGColor']

18

];

　　（注意：尽量不要加入汉字注释，可能导致发布网站是无法调用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 在函数内加入如下代码：

1	config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';

2	config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Image';

3	config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';

4	config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';

5	config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Image';

6	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 或者通过其他的手段达到一般用户不能非法上传，具体不再赘述)

本文只讲调用 所以就没有写的那么严格，修改后代码如下：

01	public override bool CheckAuthentication()

02

{

03	// WARNING : DO NOT simply return "true". By doing so, you are allowing

04	// "anyone" to upload and list the files in your server. You must implement

05	// some kind of session validation here. Even something very simple as...

06

//

07	//      return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );

08

//

09	// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the

10	// user logs on your system.

11

12	return true;

13

}

 　　还是在这个文件内找到 public override void SetConfig() 方法里面的    BaseUrl = "~/UploadFiles/"; 后面的目录根据自己的项目结构写，我单独建立了个UploadFiles文件夹存放上传文件。

　　　　

这样基本的上传算是搞定了！

接下来要实现代码高亮功能了

我们用SyntaxHighlighter来实现，其他的暂时还没研究，有兴趣的朋友可以研究下！

在ckeditor/plugins/下添加syntaxhighlight文件夹（名称可以按照自己爱好来写）我这里就用默认的名称。

在syntaxhighlight文件夹下分别添加 dialogs、images、lang文件夹和一个JS文件 plugin.js

plugin.js文件内容如下

1	CKEDITOR.plugins.add("syntaxhighlight",{requires:["dialog"],lang:["cn"],init:function(a){var b="syntaxhighlight";

1	var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));

1	c.modes={wysiwyg:1,source:1};

1	c.canUndo=false;a.ui.addButton("Code",{label:a.lang.syntaxhighlight.title,command:b,icon:this.path+"images/syntaxhighlight.gif"});

1	CKEDITOR.dialog.add(b,this.path+"dialogs/syntaxhighlight.js")}});

dialogs文件夹下添加syntaxhighlight.js文件 内容如下

001	/*********************************************************************************************************/

002

/**

003	* Syntax Highlighter plugin for CKEditor 3.x (Author: Lajox ; Email: lajox@19www.com)

004	* Insert/Edit Syntax Highlighter code snippet

005

*/

006	/*********************************************************************************************************/

007

008	CKEDITOR.dialog.add("syntaxhighlight",function(c){

009	var a=function(f){

010	f=f.replace(/<br>/g,"\n");

011	f=f.replace(/&/g,"&");

012	f=f.replace(/</g,"<");

013	f=f.replace(/>/g,">");

014	f=f.replace(/"/g,'"');

015

return f

016

};

017	var e=function(f){

018	var f=new Object();

019	f.hideGutter=false;

020	f.hideControls=false;

021	f.collapse=false;

022	f.showColumns=false;

023	f.noWrap=false;

024	f.firstLineChecked=false;

025	f.firstLine=0;

026	f.highlightChecked=false;

027	f.highlight=null;

028	f.lang=null;f.code="";

029

return f

030

};

031	var b=function(i){

032	var h=e();

033

if(i){

034	if(i.indexOf("brush")>-1){

035	var g=/brush:[ ]{0,1}(\w*)/.exec(i);

036	if(g!=null&&g.length>0){h.lang=g[1].replace(/^\s+|\s+$/g,"")}}

037	if(i.indexOf("gutter")>-1){h.hideGutter=true}

038	if(i.indexOf("toolbar")>-1){h.hideControls=true}

039	if(i.indexOf("collapse")>-1){h.collapse=true}

040	if(i.indexOf("first-line")>-1){var g=/first-line:[ ]{0,1}([0-9]{1,4})/.exec(i);

041	if(g!=null&&g.length>0&&g[1]>1){h.firstLineChecked=true;h.firstLine=g[1]}}

042	if(i.indexOf("highlight")>-1){

043	if(i.match(/highlight:[ ]{0,1}\[[0-9]+(,[0-9]+)*\]/)){

044	var f=/highlight:[ ]{0,1}\[(.*)\]/.exec(i);

045	if(f!=null&&f.length>0){h.highlightChecked=true;h.highlight=f[1]}

046

}}

047	if(i.indexOf("ruler")>-1){h.showColumns=true}

048	if(i.indexOf("wrap-lines")>-1){h.noWrap=true}

049

}

050

return h

051

};

052	var d=function(g){

053	var f="brush:"+g.lang+";";

054	if(g.hideGutter){f+="gutter:false;"}

055	if(g.hideControls){f+="toolbar:false;"}

056	if(g.collapse){f+="collapse:true;"}

057	if(g.showColumns){f+="ruler:true;"}

058	if(g.noWrap){f+="wrap-lines:false;"}

059	if(g.firstLineChecked&&g.firstLine>1){f+="first-line:"+g.firstLine+";"}

060	if(g.highlightChecked&&g.highlight!=""){f+="highlight: ["+g.highlight.replace(/\s/gi,"")+"];"}

061

return f

062

};

063

return{

064	title:c.lang.syntaxhighlight.title,

065	minWidth:500,

066	minHeight:400,

067	onShow:function(){

068	var i=this.getParentEditor();

069	var h=i.getSelection();

070	var g=h.getStartElement();

071	var k=g&&g.getAscendant("pre",true);

072

var j="";

073	var f=null;

074

if(k){

075	code=a(k.getHtml());

076	f=b(k.getAttribute("class"));

077	f.code=code

078	}else{f=e()}

079	this.setupContent(f)

080

},

081	onOk:function(){

082	var h=this.getParentEditor();

083	var g=h.getSelection();

084	var f=g.getStartElement();

085	var k=f&&f.getAscendant("pre",true);

086	var i=e();

087	this.commitContent(i);

088	var j=d(i);

089	var l=CKEDITOR.dom.element.createFromHtml('<pre class="'+j+'">'+a(i.code)+"</pre>", h.document);

090

if(k){

091	l.insertBefore(k);

092	k.remove();

093

}else{

094	h.insertElement(l);

095

}

096

},

097	contents:[

098	{   id:"source",

099	label:c.lang.syntaxhighlight.sourceTab,

100	accessKey:"S",

101	elements:[

102	{   type:"vbox",

103	children:[

104	{ id:"cmbLang",

105	type:"select",

106	labelLayout:"horizontal",

107	label:c.lang.syntaxhighlight.langLbl,

108	"default":"java",

109	widths:["25%","75%"],

110

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"]],

111	setup:function(f){if(f.lang){this.setValue(f.lang)}},

112	commit:function(f){f.lang=this.getValue()}}]

113

},

114	{   type:"textarea",

115	id:"hl_code",

116

rows:22,

117	style:"width: 100%",

118	setup:function(f){if(f.code){this.setValue(f.code)}},

119	commit:function(f){f.code=this.getValue()}}

120

]

121

},

122	{   id:"advanced",

123	label:c.lang.syntaxhighlight.advancedTab,

124	accessKey:"A",

125	elements:[

126	{   type:"vbox",

127	children:[

128	{ type:"html",

129	html:"<strong>"+c.lang.syntaxhighlight.hideGutter+"</strong>"

130

},

131	{ type:"checkbox",

132	id:"hide_gutter",

133	label:c.lang.syntaxhighlight.hideGutterLbl,

134	setup:function(f){this.setValue(f.hideGutter)},

135	commit:function(f){f.hideGutter=this.getValue()}

136

},

137	{ type:"html",

138	html:"<strong>"+c.lang.syntaxhighlight.hideControls+"</strong>"

139

},

140	{ type:"checkbox",

141	id:"hide_controls",

142	label:c.lang.syntaxhighlight.hideControlsLbl,

143	setup:function(f){this.setValue(f.hideControls)},

144	commit:function(f){f.hideControls=this.getValue()}

145

},

146	{ type:"html",

147	html:"<strong>"+c.lang.syntaxhighlight.collapse+"</strong>"

148

},

149	{ type:"checkbox",

150	id:"collapse",

151	label:c.lang.syntaxhighlight.collapseLbl,

152	setup:function(f){this.setValue(f.collapse)},

153	commit:function(f){f.collapse=this.getValue()}

154

},

155	{ type:"html",

156	html:"<strong>"+c.lang.syntaxhighlight.showColumns+"</strong>"

157

},

158	{ type:"checkbox",

159	id:"show_columns",

160	label:c.lang.syntaxhighlight.showColumnsLbl,

161	setup:function(f){this.setValue(f.showColumns)},

162	commit:function(f){f.showColumns=this.getValue()}

163

},

164	{ type:"html",

165	html:"<strong>"+c.lang.syntaxhighlight.lineWrap+"</strong>"

166

},

167	{ type:"checkbox",

168	id:"line_wrap",

169	label:c.lang.syntaxhighlight.lineWrapLbl,

170	setup:function(f){this.setValue(f.noWrap)},

171	commit:function(f){f.noWrap=this.getValue()}

172

},

173	{ type:"html",

174	html:"<strong>"+c.lang.syntaxhighlight.lineCount+"</strong>"

175

},

176	{ type:"hbox",

177	widths:["5%","95%"],

178	children:[

179	{type:"checkbox",id:"lc_toggle",label:"",setup:function(f){this.setValue(f.firstLineChecked)},commit:function(f){f.firstLineChecked=this.getValue()}

180

},

181	{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()}}

182

}

183

]

184

},

185	{ type:"html",

186	html:"<strong>"+c.lang.syntaxhighlight.highlight+"</strong>"

187

},

188	{ type:"hbox",

189	widths:["5%","95%"],

190	children:[

191	{type:"checkbox",id:"hl_toggle",label:"",setup:function(f){this.setValue(f.highlightChecked)},commit:function(f){f.highlightChecked=this.getValue()}

192

},

193	{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()}}

194

}

195

]

196

},

197	{ type:"hbox",

198	widths:["5%","95%"],

199	children:[

200	{type:"html",html:""

201

},

202	{type:"html",html:"<i>"+c.lang.syntaxhighlight.highlightLbl+"</i>"

203

}

204

]

205

}

206

]

207

}]

208

}

209

]

210

}

211

});

　　images文件夹添加syntaxhighlight.gif图标，自己在网上找一个自己喜欢的即可。

　　lang 文件夹下添加 一个en.js 和cn.js文件

　　 cn.js代码如下

01	CKEDITOR.plugins.setLang('syntaxhighlight', 'cn',

02

{

03	syntaxhighlight:

04

{

05	title: '添加或更新代码',

06	sourceTab: '代码',

07	langLbl: '选择语言',

08	advancedTab: '高级',

09	hideGutter: '隐藏分割线',

10	hideGutterLbl: '隐藏分割线和行号',

11	hideControls: '隐藏工具栏',

12	hideControlsLbl: '隐藏浮动工具栏',

13	collapse: '代码折叠',

14	collapseLbl: '默认折叠代码块 (需要启用工具栏)',

15	lineWrap: '自动换行',

16	lineWrapLbl: '关闭自动换行',

17	autoLinks: '自动链接',

18	autoLinksLbl: '不自动转换超链接',

19	lineCount: '起始行号',

20	highlight: '高亮行号',

21	highlightLbl: '输入以逗号分隔的行号, 如 <em>3,10,15</em>.'

22

}

23

});

en.js 代码

01	CKEDITOR.plugins.setLang('syntaxhighlight', 'en',

02

{

03	syntaxhighlight:

04

{

05	title: 'Add or update a code snippet',

06	sourceTab: 'Source code',

07	langLbl: 'Select language',

08	advancedTab: 'Advanced',

09	hideGutter: 'Hide gutter',

10	hideGutterLbl: 'Hide gutter & line numbers.',

11	hideControls: 'Hide controls',

12	hideControlsLbl: 'Hide code controls at the top of the code block.',

13	collapse: 'Collapse',

14	collapseLbl: 'Collapse the code block by default. (controls need to be turned on)',

15	showColumns: 'Show columns',

16	showColumnsLbl: 'Show row columns in the first line.',

17	lineWrap: 'Disable line wrapping',

18	lineWrapLbl: 'Switch off line wrapping.',

19	lineCount: 'Default line count',

20	highlight: 'Highlight lines',

21	highlightLbl: 'Enter a comma seperated lines of lines you want to highlight, eg <em>3,10,15</em>.'

22

}

23

});

 最后在ckeditor/config.js添加两行调用的代码

1	config.extraPlugins = 'syntaxhighlight';

2	config.toolbar_Full.push(['Code']);

在网站你觉得合适的位置添加一个scripts和styles 文件夹里面分别存放给代码着色的JS代码和CSS样式表（代码太长我不贴上来了，你可以去网上搜一下）

 接下来在你要显示代码的页面HTML的head部分加入

01	<script type="text/javascript" src="scripts/shCore.js"></script>

02	<script type="text/javascript" src="scripts/shBrushBash.js"></script>

03	<script type="text/javascript" src="scripts/shBrushCpp.js"></script>

04	<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>

05	<script type="text/javascript" src="scripts/shBrushCss.js"></script>

06	<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>

07	<script type="text/javascript" src="scripts/shBrushDiff.js"></script>

08	<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>

09	<script type="text/javascript" src="scripts/shBrushJava.js"></script>

10	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>

11	<script type="text/javascript" src="scripts/shBrushPhp.js"></script>

12	<script type="text/javascript" src="scripts/shBrushPlain.js"></script>

13	<script type="text/javascript" src="scripts/shBrushPython.js"></script>

14	<script type="text/javascript" src="scripts/shBrushRuby.js"></script>

15	<script type="text/javascript" src="scripts/shBrushScala.js"></script>

16	<script type="text/javascript" src="scripts/shBrushSql.js"></script>

17	<script type="text/javascript" src="scripts/shBrushVb.js"></script>

18	<script type="text/javascript" src="scripts/shBrushXml.js"></script>

19	<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>

20	<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>

21	<script type="text/javascript">

22	SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';

23	SyntaxHighlighter.all();

24

</script>

即可调用。

上一张最终效果图

　　　　

 　　至此基本上完成了ckeditor实现上传和代码高亮显示的功能，我自己也找了少资料，其中也遇到了不少小问题，最后差不多都解决了！

　　如有什么不足或者错误之处还望指出。^_^

本文转载自：http://www.cnblogs.com/root7/archive/2010/11/02/1866712.html