[项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor相关知识及各种常见使用问题

1、fckeditor的使用

2、fckeditor的config介绍及一些常见配置

3、fckeditor的开发过程中碰到的问题及解决方法

1、通过在项目中引用FredCK.FCKeditorV2.dll

2、在网站中添加fckeditor相关HTML包

3、在需要使用fckeditor编辑器的页面拖入fckeditor控件

4、在网站的web.config中的<appconfig>配置接下添加fckeditor常用配置，如FCKeditor:UserFilesPath（通过fckeditor编辑器上传的文件保存路径）、FCKeditor:BasePath（fckeditor的HTML包路径）

1、皮肤更换，fckeditor默认是自带了3个皮肤：default、office2003和silver，都在fckeditor\editor\skins目录下，默认是使用的default皮肤，如果想更换只需将下面代码中default更换成office2003或silver既可：

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;

一般来说，在企业开发过程中这3个皮肤已经够了，但是如果想在网站中使用同时想想过更好，可以去搜索引擎中进行搜索fckeditor的skin。

2、工具栏自定义，在默认情况下fckeditor的工具栏是将所有的功能按钮都放在了上面，如下图：





但是对于使用者来说这是完全没有必要的，而且像HTML源代码编辑等功能开放给使用者也是比较危险，毕竟如果有人拿这个做恶就不好了，所以开发者则需要根据使用者的实际情况进行自定义工具栏中的按钮，这个需要查看fckconfig.js中的FCKConfig.ToolbarSets，fckeditor默认提供了2种工具栏配置，default和basic，其中basic就很适合一般网络留言、评论等功能，当然如果你还不满意的话可以自己建立一个工具栏样式，然后仿照着默认提供的配置进行自定义，下图就是我自己定义的工具栏配置：





在建立好工具栏配置后，我们想在页面的FCK编辑器中应用只需修改其控件属性：ToolbarSet=“View”

3、样式替换，如果你想将fckeditor作为一个新闻发布系统的编辑器的话，为了页面的样式统一你可能需要更改下fckeditor默认定义的样式（fckeditor本质上其实就是将具体的HTML代码封装成了一个个具体的按钮，已达到所见即所得的HTML页面效果），如果需要更改则需要对FCKConfig.CoreStyles这个变量下的内容进行变动，如下图：





你可以在这个变量下自由的添加或替换掉默认定义HTML元素，当然前提是你对HTML各种元素有个比较详细的了解。

4、中文化处理，由于fckeditor默认下载下来是英文语言的，你同样可以通过配置对fckeditor进行中文化，将FCKConfig.DefaultLanguage这个变量设置成zh-cn使得界面进行汉化，然后更改FCKConfig.FontNames变量，设置成宋体;楷体_GB2312;等，这样编辑器则会自动调用计算机中内置的中文字体了。

当然fckeditor还有许多配置，这个则需要使用者根据实际需求进行更改了，这边我就不详细介绍了（如果详细介绍不知道要写多久了：）），大家可以上网自己搜索，这方面的文章还是很多的。

1、使用fckeditor上传文件会出现错误：没有权限或者上传失败（只能在本机上传，其他机子传会报错）

引起这个问题的原因是FredCK.FCKeditorV2这个程序集中有段代码出了问题，解决方案如下：

源代码文件FileBrowser/FileWorkerBase.cs里找到这样一行代码：
Response.Write( @"(function(){var d=document.domain;while (true){try{var A=window.top.opener.document.domain;break;}catch(e){};d=d.replace(/.*?(?:.|$)/,'');if (d.length==0)break;try{document.domain=d;}catch (e){break;}}})();" );
删除里面的 try{document.domain=d;}catch (e){break;}后，重新编译既可。

2、如何判断fckeditor编辑器中是否输入了文字？

这个是在实际开发过程中碰到的一个问题，由于fckeditor编辑器的内容为必填字段，需要依靠JS进行判断。通过IE、FF或者chrome等页面调试工具我们可以知道fckeditor实际填写的内容是在一个iframe框架中，一般JS要获取其内容比较麻烦，不过幸好的是fckeditor内置的JS的API已经为我们提供了这样的功能，如下代码：

view source

print?

1	var fck = FCKeditorAPI.GetInstance(“fckeditor1”);

2	var content = jQuery(fck.EditorDocument.body).text();

FCKeditorAPI提供了一个GetInstance方法可以根据ID获取FCK对象，这样我们就可以通过这个对象获取到其中的内容了，从而检测其内部是否填写了内容，此API的其他方法以及FCK对象的其他属性可以通过IE、FF或者chrome等的JS调试工具查看到！

3、如何禁用fckeditor进行编辑？

这个同样是实际开发过程中碰到的问题，具体情况是这样的，在一个新闻发布系统中有个审核页面需要可以预览到新闻的内容，但是无法编辑。

这时同样还是需要FCKeditorAPI来出马了，看如下代码：

view source

print?

1	function FCKeditor_OnComplete(){

2	var fck = FCKeditorAPI.GetInstance( "<%=fckAttribute.ClientId %>" );

3	if (fck != null ){

4	if (fck.EditorDocument != null && fck.EditorDocument.body != null )

5	fck.EditorDocument.body.disabled = true ;

6

}

7

}

这边主要是通过FCKeditorAPI获取到FCK实例，然后将FCK实例中的编辑器主体给禁用掉，需要注意的是，这步处理需要在FCKeditor_OnComplete（一个JS事件）这个事件中进行处理，表示在FCK实例完成后触发，具体使用的时候只需将这段代码放入FCK编辑器所在的页面中即可，FCK编辑器会自动调用到这段事件的。