之前用的文本编辑器是dialog(图)用(组图)

　　之前用的文本编辑器是dialog(图)用(组图)

　　之前使用的文本编辑器是对话框。这个编辑器在写超长内容的时候不是很可控。内容将始终运行在编辑框之外。今天无意中发现大家都在用FCKeditor，而且用了很多年了。 ，我顿时心情好了出来。 . . . .

　　我在网上找到了FCKeditor的使用方法，确实不错。 . 下面的介绍也是抄的，如果你已经看过了就不用看了，哈哈。 . .

　　CKeditor，以前叫FCKeditor，用了很多年了，功能自然就不提了。最近升级到了3.0版本，好像改写了代码，所以构造方法也变了一点，应该说更简单了。

　　相关地址：

　　官方网站：

　　下载链接：

　　CKfinder：上传插件（四种语言可选，按需下载）

　　部署：

　　下载CKeditor并解压网站/ckeditor/（当然名字可以修改，但是需要修改对应​​的config文件才能设置新路径）

　　调用：

　　在页面头部调用

　　然后将代码放在需要编辑器的地方：

　　复制代码代码如下：

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

　　复制代码代码如下：

　　var editor = CKEDITOR.replace('Text',

　　{

　　language:'zh-cn',//简体中文

　　工具栏://工具栏设置

　　[

　　['来源'],

　　'/',

　　['剪切','复制','粘贴','PasteText','PasteFromWord'],

　　['粗体','斜体','下划线','罢工','-','下标','上标'],

　　['TextColor','BGColor'],

　　]

　　});

　　具体设置有很多，具体的可以查看他的帮助：

　　这个设置可以在/ckeditor/config.js 中设置。此处设置后，修改了编辑器的默认默认设置，以上设置仅适用于当前编辑器。

　　具体设置方法如下

　　复制代码代码如下：

　　CKEDITOR.editorConfig = 函数（配置）

　　{

　　// 在此处定义对默认配置的更改。例如：

　　config.language ='zh-cn'; //配置语言

　　//config.uiColor ='#FFF'; //背景色

　　config.width = 500; //宽度

　　config.height = 400; //高度

　　config.skin='v2'; //设置编辑器的样式。不喜欢现在的样子，但还是喜欢v2版的，干净清爽。

　　//工具栏

　　config.toolbar =

　　[

　　['来源'],

　　'/',

　　['剪切','复制','粘贴','PasteText','PasteFromWord'],

　　['粗体','斜体','下划线','罢工','-','下标','上标'],

　　['TextColor','BGColor'],

　　]

　　};

　　数据提交

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

　　在fckeditor(Ver2.0)中，提供了一个可以直接使用的web控件，但是3.x中好像没有提供。幸好我用的是mvc，所以有什么给我？没问题。

　　上面这句话是因为默认是禁止上传带有html标签的文字。当然可以通过修改页面的配置来实现，但是在fckeditor(Ver2.0)，他提交数据之前是HTMLEncode内容的(分别用&代替&)，这确实是一个很棒的方法，这样就不需要修改默认设置了。

　　但是CKeditor中默认的提交是直接发布原创数据。后来通过老版本的代码，发现CKeditor其实提供了一个HTMLEncode的方法，就是CKEDITOR.tools.htmlEncode(string)，如果直接使用就没有办法填写表单表单提交，所以你只能使用 JavaScript 提交。我的选择是使用jQuery的ajax方法提交。代码如下：

　　复制代码代码如下：

　　$(function(){

　　$("#btSubmit").click(function(){//$("#btSubmit") 获取提交按钮，这里绑定提交按钮的点击事件

　　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( //gi); // 标签。

　　config.protectedSource.push( //gi); // 标签。

　　config.protectedSource.push( //gi); // 标签。

　　config.protectedSource.push( //gi); //

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

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

　　修改上传方式

　　我的图片服务器是，网站的服务器是，不需要它提供的浏览功能，除了图片上传外不允许上传其他文件。

　　修改三个地方，1.modify默认上传2.cancel浏览功能3.cancel文件，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');

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

　　我们只需要调用上面的方法，具体上传成功后，输出页面上的代码

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

　　关于fnID，具体的描述不是很清楚，但是通过代码发现FF浏览器的值为2，其他浏览器的值为1。由此可以推断，CKeditor是用来判断哪个打电话。接受上传反馈信息的方法。

　　这个值可以通过我们自己的程序获取。但更好的方法是CKeditor提供的值。当我们设置editorObj.config.filebrowserImageUploadUrl = "new address"时，CKeditor会自动为我们添加几个url参数：

　　新地址？CKEditor=Text&CKEditorFuncNum=2&langCode=zh-cn

　　CKEditorFuncNum就是我们需要的fnID，我们可以直接拿到，然后反馈回来。

　　如果选择跨域上传，只需要在当前域中设置一个GetFile.aspx()即可。它有三个参数，分别是接受fnID、FileUrl、Message这三个值，在我们的editorObj.config.filebrowserImageUploadUrl中设置：:///GetFile.aspx，就是域的upfile.aspx接收文件，处理完成后：

　　复制代码代码如下：

　　ImageUrl=""

　　Message="根据错误与否，设置，没有错误可以为空"

　　CKEditorFuncNum=request("CKEditorFuncNum")

　　response.Redirect("="+ ImageUrl + "&Message=" + Message + "&CKEditorFuncNum=" + CKEditorFuncNum)