当前位置：首页 > 资讯 > 技术文档

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

时间：2022-03-07 07:43 编辑：来源：阅读：
扫一扫，手机访问

摘要：关于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> 然后在需要编辑器的地方放置一下代码：

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

[url=http://www.1sucai.cn/]http://www.1sucai.cn/[/url]，也不需要它提供的浏览功能，而且除了图片上传，不允许上传其他的文件。这样就需要有三个地方需要修改，1.修改默认上传2.取消浏览功能3.取消文件、flash上传功能。 CKeditor的上传路径设置在/CKfinder/ckfinder.js中，有一项设置是CKFinder.SetupCKEditor，它的下面有以下代码，可以设置是否需要图片、文件、flash的浏览路径以及上传路径。

[u]复制代码[/u] 代码如下:

//设置文件的浏览路径
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是根据上传路径的有无来控制是否显示相应的上传标签，浏览按钮也是。根据上面的需求，设置如下：

[u]复制代码[/u] 代码如下:

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

设置到这里再次打开编辑器的相应窗口就会发现除了图片上传按钮外其他的浏览上传都隐藏掉了。 [b]创建新的上传文件[/b] 具体步骤是，首先创建一个新的上传接收文件，接受并保存上传的文件，然后将文件的路径反馈给编辑器。编辑器的接收是通过一个方法实现的，具体如下：　　CKEDITOR.tools.callFunction(fnID, 'FileUrl', 'Message');</script> 其中fnID是调用的实际方法的编号，不同的浏览器，CKeditor调用不同的方法。我们只需要调用上面的方法就可以了，具体上传成功后，在页面上输出一下代码 <script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(fnID, 'http://www.1sucai.cn/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.1sucai.cn/）设置一个GetFile.aspx他有三个参数，分别是接受fnID，FileUrl、Message这三个值，在我们的editorObj.config.filebrowserImageUploadUrl中设置成http://Image.jb51.net/upfile.aspx?backUrl=http://www.1sucai.cn/GetFile.aspx，就可以了，image.jb51.net域的upfile.aspx接受到文件，处理完成之后：

[u]复制代码[/u] 代码如下:

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

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

全部评论(0)

上一篇：彻底解决ewebeditor网站后台不能上传图片的方法
下一篇：为SyntaxHighlighter添加新语言的方法

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部