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

 更新时间:2009年12月27日 22:13:16   作者:   我要评论
因为我的网站需要一个编辑器,所以用周末时间研究了一下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>
然后在需要编辑器的地方放置一下代码:
复制代码 代码如下:

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


搞定,就这么简单,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 ) ; // <iframe> tags.
config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ; // <frameset> tags.
config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ; // <frame> tags.
config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags.
config.protectedSource.push( /<%[\s\S]*?%>/g ) ; // ASP style server side code
config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
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 = '/新文件夹名/';
调用方式:
复制代码 代码如下:

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

现在在打开编辑器的图片、链接、flash,窗口就多了一个上传选项卡,可以选择上传,还提供了浏览功能。
因为涉及到文件夹的访问权限,功能与我的网站需求不符,所以我没有使用它提供的默认上传,对他进行了修改。
上传方式的修改
我的图片服务器是image.tiyu.cc而网站的服务器是//www.jb51.net/,也不需要它提供的浏览功能,而且除了图片上传,不允许上传其他的文件。
这样就需要有三个地方需要修改,1.修改默认上传2.取消浏览功能3.取消文件、flash上传功能。
CKeditor的上传路径设置在/CKfinder/ckfinder.js中,有一项设置是CKFinder.SetupCKEditor,它的下面有以下代码,可以设置是否需要图片、文件、flash的浏览路径以及上传路径。
复制代码 代码如下:

//设置文件的浏览路径
editorObj.config.filebrowserBrowseUrl = url ;
//设置图片的浏览路径
editorObj.config.filebrowserImageBrowseUrl = url + qs + 'type=' + ( imageType || 'Images' ) ;
//设置flash文件浏览路径
editorObj.config.filebrowserFlashBrowseUrl = url + qs + 'type=' + ( flashType || 'Flash' ) ;
//设置文件上传文件地址
editorObj.config.filebrowserUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=Files" ;
//设置图片文件上传地址
editorObj.config.filebrowserImageUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( imageType || 'Images' ) ;
//设置flash文件上传地址
editorObj.config.filebrowserFlashUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( flashType || 'Flash' ) ;

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

//设置文件的浏览路径
editorObj.config.filebrowserBrowseUrl = "";
//设置图片的浏览路径
editorObj.config.filebrowserImageBrowseUrl = "";
//设置flash文件浏览路径
editorObj.config.filebrowserFlashBrowseUrl = "";
//设置文件上传文件地址
editorObj.config.filebrowserUploadUrl = "";
//设置图片文件上传地址
editorObj.config.filebrowserImageUploadUrl = "新地址";
//设置flash文件上传地址
editorObj.config.filebrowserFlashUploadUrl = "";

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

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

编辑器的接收是通过一个方法实现的,具体如下:
  CKEDITOR.tools.callFunction(fnID, 'FileUrl', 'Message');</script>

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

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

<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(fnID, '//www.jb51.net/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,我们可以直接获取到,然后反馈回来就好了。

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

ImageUrl="http://image.jb51.net/UpFile/2009/11/1/2009111201346_695.jpg"
Message="根据错误与否,设置,没有错误可以为空"
CKEditorFuncNum=request("CKEditorFuncNum")
response.Redirect("//www.jb51.net/GetFile.php?ImageUrl="+ ImageUrl + "&Message=" + Message + "&CKEditorFuncNum=" + CKEditorFuncNum)


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

相关文章

  • Windows Live Writer 实现代码高亮

    Windows Live Writer 实现代码高亮

    有时会包含大量代码,如果能在文章中高亮显示代码文章的可读性肯定会好很多。
    2009-05-05
  • FCKEditor+jQuery+PHP实现分页代码

    FCKEditor+jQuery+PHP实现分页代码

    根据一下步骤,即可实现使用FCKEditor+jQuery+PHP实现无刷新页面分页。
    2010-07-07
  • 详解React中的todo-list

    详解React中的todo-list

    这篇文章主要介绍了React中的todo-list的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • 使用Js获取、插入和更改FCKeditor编辑器里的内容

    使用Js获取、插入和更改FCKeditor编辑器里的内容

    这篇文章主要介绍了使用Js获取、插入和更改FCKeditor编辑器里的内容,包括JS操作Fckeditor的一些常用方法,需要的朋友可以参考下
    2020-02-02
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板
    2014-06-06
  • fckeditor 常用函数

    fckeditor 常用函数

    对于操作 fckeditor的朋友,有所帮助。其实我们用插件的方法制作也是不错的。功能可以更强。
    2009-06-06
  • ThinkPHP中FCKeditor编辑器的使用方法

    ThinkPHP中FCKeditor编辑器的使用方法

    前段时间一直为TP寻找好用的在线编辑器而苦恼,经过多次尝试与修改后,终于成功地将编辑器集成到Thinkphp里面
    2012-07-07
  • ASX文件 终极教程

    ASX文件 终极教程

    整理资料的时候,发现电脑里保存了一些ASX文件。这些文件原来是玩MSN空间时用到的,主要用于在MSN空间上安装播放器。很久没玩MSN空间了,虽然现在也还在用MSN,但MSN空间的速度真的是慢得让我难以接受,所以还是不用MSN空间。顺便分析一下ASX文件的格式,以方便那些还在用MSN空间的朋友。
    2008-02-02
  • jsp fckeditor 上传中文图片乱码问题的解决方法

    jsp fckeditor 上传中文图片乱码问题的解决方法

    彻底解决fckeditor(jsp版)上传中文图片乱码问题,我这里用的编码是utf-8的,这里用的fckeditor 是2.6的,fckeditor.java包是2.3的
    2009-02-02
  • KindEditor 编辑器 v3.5.1 修改版

    KindEditor 编辑器 v3.5.1 修改版

    最近刚认识了KindEditor,感觉挺好用,花了点时间做了些修改。如果您有更好的建议,欢迎大家一起讨论。
    2010-09-09

最新评论