关于CKeditor的非主流个性应用的设置

很久以来一直在看博客园高手们的文章，受益匪浅，平常只做看客，今天手痒，写一篇，做篇学习笔记。


因为我的网站（体育课tiyu.cc）需要一个编辑器，所以用周末时间研究了一下CKeditor，终于最终修改成了合适的样子。

CKeditor，以前叫FCKeditor，已经使用过好多年了，功能自然没的说。最近升级到3.0版，好像重写了代码，所以构建的方式也有了些变化，应该说是更简单了。

 

相关地址：
官方网站：http://ckeditor.com/
下载地址：http://ckeditor.com/download
CKfinder：http://ckfinder.com/  用于上传的插件（有四种语言版本，根据需要下载）

 

部署：
将CKeditor下载下来，解压网站/ckeditor/下面（当然名字可以修改，只是需要修改相应config文件来设置新路径）

 

调用：
在页面的head中调用
　　<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
然后在需要编辑器的地方放置一下代码：

1 <textarea cols="80" id="Text" name="Text" rows="10">这里是默认值，修改文本的内容是放在这里。html需要进行HTMLEncode编码</textarea>
2 <script type="text/javascript">
3  var editor = CKEDITOR.replace('Text');
4 </script>
5 

 

搞定，就这么简单，CKEDITOR.replace('Text')就是创建编辑器的代码，CKEDITOR.replace()方法中还可以设置编辑器的样式，设置如下

 1 var editor = CKEDITOR.replace( 'Text',
 2 {
 3  language:'zh-cn',//简体中文
 4  toolbar ://工具栏设置
 5  [
 6   ['Source'],
 7   '/',
 8   ['Cut','Copy','Paste','PasteText','PasteFromWord'],
 9   ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],  
10   ['TextColor','BGColor'], 
11  ]
12 });
13 

 

具体的设置有很多，具体的可以查看他的帮助：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
这个设置可以在/ckeditor/config.js中设置，在这里设置之后，就修改了编辑器的默认默认设置，而上面设置只应用于当前编辑器。
具体的设置方法如下

 1 CKEDITOR.editorConfig = function( config )
 2 {
 3  // Define changes to default configuration here. For example: 
 4  config.language = 'zh-cn'; //配置语言 
 5  //config.uiColor = '#FFF'; //背景颜色 
 6  config.width = 500; //宽度 
 7  config.height = 400; //高度 
 8  config.skin='v2'; //设置编辑器的风格，不太喜欢现在的样子，还是喜欢v2版本的样子，干净、清爽。
 9  //工具栏 
10  config.toolbar =
11  [
12    ['Source'],
13    '/',
14    ['Cut','Copy','Paste','PasteText','PasteFromWord'],
15   ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],  
16   ['TextColor','BGColor'], 
17  ]
18 };
19 

 

数据提交

到这里我们已经基本上设置好了。如果调用的话后台可以使用request["text"]来获取编辑器的文本。

在fckeditor(Ver 2.0)中时，它提供了一个web控件，可以直接使用，但是在3.x中好像没有提供，好在我用的Asp.net Mvc所以有没有的对我来说没有任何问题。


提到上面的一句是因为，默认的asp.net是禁止上传带有html标签的文本的，当然可以通过修改页面的配置来实现，但是在fckeditor(Ver 2.0)中他在提交数据前对内容进行了HTMLEncode（将&<>分别替换成了&amp;&lt;&gt;），确实是一个非常棒的方法，这样就不需要对asp.net的默认设置进行修改。


但是在CKeditor中默认提交就是将原始的数据直接post了，后来通过以前老版本的代码发现其实CKeditor提供了一个方法可以进行HTMLEncode，它就是CKEDITOR.tools.htmlEncode(string)，如果直接使用form表填submit就没有办法实现了，所以只能采用JavaScript进行提交。我的选择是使用jQuery的ajax方式提交。代码如下：

 

1  $(function(){
2   $("#btSubmit").click(function(){//$("#btSubmit")获取的是提交按钮，这里绑定提交按钮的click事件
3    var oEditor = CKEDITOR.instances.Text;//获得编辑器对象
4    var text = oEditor.getData();//获取编辑器的数据
5    text = CKEDITOR.tools.htmlEncode(text);//进行HTMLEncode编码
6    $.post("PostUrl",{Text:text},callback);//提交数据，具体的调用方式和返回类型请查阅jQuery的帮助
7    function callback(data){}//回调函数
8   });
9  })

 

提交到服务器在进行反向的编码就可以了。

安全性

通过上面的提交虽然很好，但是绕过了系统默认的安全防御，很容易被提交恶意代码，所以在服务器端还需要进行安全的验证。


虽然CKeditor提供了验证的设置方法，但是我没有试验成功(Ver2时代就没成功)，不晓得他是怎么运作的，有时间好好研究下，代码如下：

1 //在/ckeditor/config.js文件的CKEDITOR.editorConfig中添加一下代码
2 config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ; // <iframe> tags.
3 config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ; // <frameset> tags.
4 config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ; // <frame> tags.
5 config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags.
6 config.protectedSource.push( /<%[\s\S]*?%>/g ) ; // ASP style server side code
7 config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
8 config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ;

 

服务器端的验证项目跟上面提到的一样，都是根据标签名称来判断是否允许提交。


文件上传
在新版本中文件上传方式有了很大的改变。它采用CKfinder这个插件来实现，首先还是需要下载一个CKfinder解压到网站/CKfinder/下面


路径也可以修改，修改后需要调用代码、/CKfinder/config.ascx文件、/CKfinder/ckfinder.js文件


/CKfinder/config.ascx文件需要修改BaseUrl = "/新文件夹名/userfiles/";

/CKfinder/ckfinder.js文件需要修改CKFinder.DEFAULT_BASEPATH = '/新文件夹名/';

 

调用方式：

1 <textarea cols="80" id="Text" name="Text" rows="10"></textarea>
2 <script type="text/javascript">
3  var editor = CKEDITOR.replace( 'Text');
4  CKFinder.SetupCKEditor(editor, '/新文件夹名（或默认）/');
5 </script>

 

现在在打开编辑器的图片、链接、flash，窗口就多了一个上传选项卡，可以选择上传，还提供了浏览功能。


因为涉及到文件夹的访问权限，功能与我的网站需求不符，所以我没有使用它提供的默认上传，对他进行了修改。

 

上传方式的修改

我的图片服务器是image.tiyu.cc而网站的服务器是http://www.tiyu.cc/，也不需要它提供的浏览功能，而且除了图片上传，不允许上传其他的文件。


这样就需要有三个地方需要修改，1.修改默认上传2.取消浏览功能3.取消文件、flash上传功能。

 

CKeditor的上传路径设置在/CKfinder/ckfinder.js中，有一项设置是CKFinder.SetupCKEditor，它的下面有以下代码，可以设置是否需要图片、文件、flash的浏览路径以及上传路径。

 1  //设置文件的浏览路径
 2  editorObj.config.filebrowserBrowseUrl = url ;
 3  //设置图片的浏览路径
 4  editorObj.config.filebrowserImageBrowseUrl = url + qs + 'type=' + ( imageType || 'Images' ) ;
 5  //设置flash文件浏览路径
 6  editorObj.config.filebrowserFlashBrowseUrl = url + qs + 'type=' + ( flashType || 'Flash' ) ;
 7  //设置文件上传文件地址
 8  editorObj.config.filebrowserUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector." 
 9   + ckfinder.ConnectorLanguage + "?command=QuickUpload&type=Files" ;
10  //设置图片文件上传地址
11  editorObj.config.filebrowserImageUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector." 
12   + ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( imageType || 'Images' ) ;
13  //设置flash文件上传地址
14  editorObj.config.filebrowserFlashUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector." 
15   + ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( flashType || 'Flash' ) ;

 

 

根据CKeditor是根据上传路径的有无来控制是否显示相应的上传标签，浏览按钮也是。
根据上面的需求，设置如下：

 1 //设置文件的浏览路径
 2  editorObj.config.filebrowserBrowseUrl = "";
 3  //设置图片的浏览路径
 4  editorObj.config.filebrowserImageBrowseUrl = "";
 5  //设置flash文件浏览路径
 6  editorObj.config.filebrowserFlashBrowseUrl = "";
 7  //设置文件上传文件地址
 8  editorObj.config.filebrowserUploadUrl = "";
 9  //设置图片文件上传地址
10  editorObj.config.filebrowserImageUploadUrl = "新地址";
11  //设置flash文件上传地址
12  editorObj.config.filebrowserFlashUploadUrl = "";
13 

 

设置到这里再次打开编辑器的相应窗口就会发现除了图片上传按钮外其他的浏览上传都隐藏掉了。

 

创建新的上传文件
具体步骤是，首先创建一个新的上传接收文件，接受并保存上传的文件，然后将文件的路径反馈给编辑器。


编辑器的接收是通过一个方法实现的，具体如下：

　　CKEDITOR.tools.callFunction(fnID, 'FileUrl', 'Message');</script>


其中fnID是调用的实际方法的编号，不同的浏览器，CKeditor调用不同的方法。

我们只需要调用上面的方法就可以了，具体上传成功后，在页面上输出一下代码


<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(fnID, 'http://www.tiyu.cc/image.jpg', '上传成功');</script>


FileUrl、Message，可以只有一个，也可以同时存在。Message主要应用于上传失败时的提示信息。


关于fnID,这个具体的说明不是很清楚，但是通过代码发现FF浏览器它的值是2，其他的浏览器是1，通过这个可以得出结论是，通过它来告知CKeditor来调用哪个方法接受上传反馈信息。


这个值，可以通过我们自己的程序去获得。但是更好的方式是CKeditor给我们提供的值，当我们设置editorObj.config.filebrowserImageUploadUrl = "新地址"时CKeditor会自动为我们增加几个个url参数：
新地址?CKEditor=Text&CKEditorFuncNum=2&langCode=zh-cn
其中CKEditorFuncNum就是我们需要的fnID，我们可以直接获取到，然后反馈回来就好了。

 

如果选择跨域上传，只需要在当前域（http://www.tiyu.cc/）设置一个GetFile.aspx他有三个参数，分别是接受fnID，FileUrl、Message这三个值，在我们的editorObj.config.filebrowserImageUploadUrl中设置成http://Image.tiyu.cc/upfile.aspx?backUrl=http://www.tiyu.cc/GetFile.aspx，就可以了，image.tiyu.cc域的upfile.aspx接受到文件，处理完成之后：

1 ImageUrl="http://image.tiyu.cc/UpFile/2009/11/1/2009111201346_695.jpg"
2 Message="根据错误与否，设置，没有错误可以为空"
3 CKEditorFuncNum=request("CKEditorFuncNum")
4 response.Redirect("http://www.tiyu.cc/GetFile.aspx?ImageUrl="+ ImageUrl + "&Message=" + Message + "&CKEditorFuncNum=" + CKEditorFuncNum)

 

 

搞定，收工，睡觉，做个好梦。

 

 

ps：现在新注册用户博客都需要申请了，我这以前注册的帐号，终于也发一篇，也算对得起这个帐号。

posted on 2009-12-27 21:42  Dis.asia  阅读(838)  评论(6)    收藏  举报

导航