FCKEditor，一个HTML可视化编辑器，兼容很好

在实际WEB开发中，越来越多的用到HTML文本编辑器来录入有固定格式的大文本信息。

比方说BLOG的文章录入的部分。FCKEditor是一款使用简单、实用的轻量级的HTML文本编辑器控件，他支持IE5.5+，Firefox1.0+，Mozilla1.3+，Netscape7.0+等各种不同的主流的浏览器。

 

官方网站：http://www.fckeditor.net/

 

使用方法：

1、到http://www.fckeditor.net/download下载最新版本。当前版本为FCKeditor 2.5.1

2、解压后将fckeditor整个文件夹拷贝到你项目的相应目录中。

3、在相应的动态页面创建fckeditor是一个很简单的操作。

Js代码

1. <link href="/html/js/fckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />   
2. <script type="text/javascript" src="/html/js/fckeditor/fckeditor.js"></script>   
3. <script type="text/javascript">   
4.     var oFCKeditor = new FCKeditor( 'fck' ) ;   
5.     oFCKeditor.BasePath = '/html/js/fckeditor/' ;   
6.     oFCKeditor.Config['ToolbarStartExpanded'] = false ;   
7.     oFCKeditor.ToolbarSet   = 'Basic' ;   
8.     oFCKeditor.ReplaceTextarea() ;   
9. </script>  

<link href="/html/js/fckeditor/_samples/sample.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/html/js/fckeditor/fckeditor.js"></script><script type="text/javascript">var oFCKeditor = new FCKeditor( 'fck' ) ;oFCKeditor.BasePath= '/html/js/fckeditor/' ;oFCKeditor.Config['ToolbarStartExpanded'] = false ;oFCKeditor.ToolbarSet= 'Basic' ;oFCKeditor.ReplaceTextarea() ;</script>

    引入CSS样式和JS文件，然后用简单的几行代码就可以完成一个FCKEditor控件了。

4、将fckeditor与相关的HTML标记绑定。

 

Xml代码

1. <textarea name="fck" rows="10" cols="80" style="width: 100%; height: 200px"></textarea>  

<textarea name="fck" rows="10" cols="80" style="width: 100%; height: 200px"></textarea>

只需要将我们的HTML标记的name属性和new FCKeditor('fck');构造函数中的名称保持一直就可以了，和原本的HTML代码完全没有过多的相关性。

以上就已经完成了一个简单的(Basic)的FCKeditor，如果觉得编辑框不够丰富的话，将下面两行代码去掉就可以了

Xml代码

1. //oFCKeditor.Config['ToolbarStartExpanded'] = false ;   
2. //oFCKeditor.ToolbarSet = 'Basic' ;  

//oFCKeditor.Config['ToolbarStartExpanded'] = false ;//oFCKeditor.ToolbarSet= 'Basic' ;

 如果你的FCKeditor看到不任何工具，只在左上角有一个向下的三角箭头的话，不用怀疑，用鼠标左键单击小箭头再试试吧。。

 

就是这么的简单。。

 

另外FCKeditor还支持插件功能，如果你对CSS有一定的造诣，可以尝试更改编辑器的显示效果咯。更多相关信息请参考FCKeditor的官方网站。

 

下面是用来在页面中建立编辑器的FCKEDITOR类的说明，摘自：

http://blog.csdn.net/phphot/archive/2008/01/02/2010085.aspx
构造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:编辑器的唯一名称(相当于ID)
WIDTH:宽度
  HEIGHT:高度
toolbarSet:工具条集合的名称
value:编辑器初始化内容
属性:
instanceName:编辑器实例名
width:宽度,默认值为100%
height:高度,默认值是200
ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default
value:初始化编辑器的HTML代码,默认值为空
BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾
CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true
DisplayErrors:是否显示提示错误,默为true;
集合:
Config[Key]=value;
这个集合用于更改配置中某一项的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";
方法:
Create()
建立并输出编辑器
RepaceTextArea(TextAreaName)
用编辑器来替换对应的文本框
如何配置FCKEDITOR?
FCKEDITOR提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js
你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用JAVAscrīpt语法.
修改后,在建立编辑器时,可以使用以下语法:
var ōFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;
oFCKeditor.Create() ;
提醒:当你修改配置后,请清空浏览器缓存以查看效果
配置选项:
AutoDetectLanguage=true/false 自动检测语言
Basehref="" _fcksavedurl="""" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
 

 

注意：

FCKeditor有一个BasePath的属性，是指定FCKeditor在你项目中的根目录。本例中我是将FCKeditor放在项目的/html/js/fckeditor/的文件夹中。如果你在尝试的过程中看不到效果，可以检查下这部分的设置。另外CSS和JS文件的引入路径也是一个需要注意的地方，仅做提醒。

 

其他：

FCKEditor只是一种工具（或控件），如果你不喜欢使用或者觉得他不能满足你的需求，可以尝试使用一些其他的HTML文本编辑器，另外也推荐另外一个比较好的支持word编辑方式的控件

TinyMCE

官方网站：http://tinymce.moxiecode.com/index.php

里面有一些DEMO还有文档，具体内容请自行参考。