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

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

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


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

调用:
在页面的head中调用
  
然后在需要编辑器的地方放置一下代码:
复制代码 代码如下:





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

var editor = CKEDITOR.replace( 'Text',
{
language:'zh-cn',//简体中文
toolbar ://工具栏设置
[
['Source'],
'/',
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor'],
]
});

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

复制代码 代码如下:

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

数据提交
到这里我们已经基本上设置好了。如果调用的话后台可以使用request["text"]来获取编辑器的文本。
在fckeditor(Ver 2.0)中时,它提供了一个web控件,可以直接使用,但是在3.x中好像没有提供,好在我用的Asp.net Mvc所以有没有的对我来说没有任何问题。
提到上面的一句是因为,默认的asp.net是禁止上传带有html标签的文本的,当然可以通过修改页面的配置来实现,但是在fckeditor(Ver 2.0)中他在提交数据前对内容进行了HTMLEncode(将&<>分别替换成了&<>),确实是一个非常棒的方法,这样就不需要对asp.net的默认设置进行修改。
但是在CKeditor中默认提交就是将原始的数据直接post了,后来通过以前老版本的代码发现其实CKeditor提供了一个方法可以进行HTMLEncode,它就是CKEDITOR.tools.htmlEncode(string),如果直接使用form表填submit就没有办法实现了,所以只能采用JavaScript进行提交。我的选择是使用jQuery的ajax方式提交。代码如下:
复制代码 代码如下:

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

提交到服务器在进行反向的编码就可以了。
安全性
通过上面的提交虽然很好,但是绕过了系统默认的安全防御,很容易被提交恶意代码,所以在服务器端还需要进行安全的验证。
虽然CKeditor提供了验证的设置方法,但是我没有试验成功(Ver2时代就没成功),不晓得他是怎么运作的,有时间好好研究下,代码如下:
复制代码 代码如下:

//在/ckeditor/config.js文件的CKEDITOR.editorConfig中添加一下代码
config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ; //