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

CKeditor：一个周末的学习之旅

以下是具体的实现代码：

```javascript

$(function(){

$("btSubmit").click(function(){

var oEditor = CKEDITORstances.Text; // 获取编辑器对象

var text = oEditor.getData(); // 获取编辑器的数据

text = CKEDITOR.tools.htmlEncode(text); // 进行HTMLEncode编码

$.post("PostUrl", {Text: text}, callback); // 提交数据

function callback(data){

// 回调函数，可以在这里处理服务器返回的响应数据

}

});

})

```

尽管这种方式可以绕过系统默认的安全防御，但也可能导致恶意代码的提交。在服务器端进行安全验证是至关重要的。CKeditor提供了验证的设置方法，虽然我没有成功实现（特别是在Ver2时代），但这确实是一个值得深入研究的方向。以下是服务器端的验证配置示例：

```javascript

// 在/ckeditor/config.js文件的CKEDITOR.editorConfig中添加以下代码

config.protectedSource.push(/<\siframe[\s\S]?>/gi); // <iframe> tags

config.protectedSource.push(/<\sframeset[\s\S]?>/gi); // <frameset> tags

config.protectedSource.push(/<\sframe[\s\S]?>/gi); // <frame> tags

// 其他需要保护的标签也在这里添加

```

关于文件上传功能，新版本CKeditor的文件上传方式发生了很大的变化。它采用了CKfinder这个插件来实现。为了使用CKfinder，需要下载并解压到网站相应的目录。文件上传的路径可以修改，修改后需要相应地调整代码。具体的调用方式如下：

```html

```

现在，在打开编辑器的图片、链接、Flash等窗口时，会多一个上传选项卡，可以选择上传文件，还提供了浏览功能，这使得文件上传更加便捷。

由于文件夹访问权限和功能与我的网站需求不符，因此我决定不采用其提供的默认上传功能，而是对其进行了个性化的修改。我对上传方式的调整主要是为了满足特定的需求。我的图片服务器位于“image.tiyu.”上，而网站的服务器则独立运作，无需提供浏览功能。除了图片上传外，其他文件上传功能也被禁止。

为了实现这些修改，需要在三个方面进行调整。需要修改默认的上传设置。取消浏览功能。移除文件和Flash的上传功能。CKeditor的上传路径配置位于“CKfinder/ckfinder.js”中的“CKFinder.SetupCKEditor”。为了优化网站的SEO并满足特定需求，我们需要对相关的代码段进行调整。

关于浏览路径的设置，我们可以使用以下代码来配置：

1. 设置文件的浏览路径：`editorObj.config.filebrowserBrowseUrl = "";`

2. 设置图片的浏览路径：`editorObj.config.filebrowserImageBrowseUrl = "";`

3. 设置Flash文件的浏览路径：`editorObj.config.filebrowserFlashBrowseUrl = "";`

对于上传路径的设置，我们需要进行以下配置：

1. 设置文件上传地址：`editorObj.config.filebrowserUploadUrl = "";`（此设置将隐藏文件上传功能）

2. 保留并设置图片文件上传地址：`editorObj.config.filebrowserImageUploadUrl = "新地址";`（此设置将仅保留图片上传功能）

3. 设置Flash文件上传地址：`editorObj.config.filebrowserFlashUploadUrl = "";`（此设置将隐藏Flash上传功能）

调整这些设置后，打开编辑器的相应窗口时，除了图片上传按钮外，其他的浏览和上传功能都将被隐藏。为了实现新的文件上传功能，我们需要创建一个新的文件接收端点，它能够接收并保存上传的文件，然后将文件的路径反馈给编辑器。编辑器的接收是通过特定的方法实现的，通过调用“CKEDITOR.tools.callFunction(fnID, 'FileUrl', 'Message');"来实现不同浏览器的文件上传功能。这些调整使得网站更加符合我们的需求，同时也优化了用户体验。在我们的应用程序中，我们只需调用特定的方法即可完成文件上传功能。一旦上传成功，我们会在页面上执行一段JavaScript代码，以通知CKeditor成功接收文件。代码示例如下：

``

在这段代码中，FileUrl和Message参数可以单独存在，也可以同时存在。Message主要用于在上传失败时提供反馈信息。关于fnID的具体含义，它在不同的浏览器中有不同的值。在Firefox浏览器中，它的值为2，而在其他浏览器中，它的值为1。这个参数的主要作用是告诉CKeditor调用哪个方法来接收上传的反馈信息。

这个fnID的值可以通过我们的程序来获取。更好的方式是使用CKeditor提供的值。当我们设置editorObj.config.filebrowserImageUploadUrl为"新地址"时，CKeditor会自动为我们增加几个url参数，其中包括我们需要的fnID，即CKEditorFuncNum。我们可以直接获取这个值，然后反馈回去。

如果我们选择跨域上传，只需在当前域（

当image.jb51域的upfile.aspx接收到文件并完成处理后，会进行如下操作：设置ImageUrl为处理后的图片地址，例如"

至此，我们的任务就完成了。可以安心结束工作，享受美好的夜晚。

调用cambrian的render方法渲染'body'，呈现出我们的页面内容。让我们期待一个美好的用户体验，随着我们的程序流畅地展示和操作，用户可以轻松完成文件上传任务。