FCKeditor使用

FCKeditor是B/S系统开发中经常用到的HTML编辑器，功能多，也支持表情。现在最新版是2.6.2，可在它官方主页下载： http://www.fckeditor.net/download

1、安装
在ASP.NET系统中安装,除了要下载FCKeditor外，还要下载一个叫FCKeditor.NET的服务器控件，这两个都可以在上面的下载页面下载到。
FCKeditor.NET压缩包解压后，找到合适的.NET版本，再添加到VS工具箱就可以用了。而FCKeditor解压后的文件还可以精简下，可以把所有以“_”下划线开头的文件和文件夹都删除，这些文件只要是一些范例，说明和源代码。
之后只要把解压出的fckeditor整个文件夹放到系统的网站根目录中，再从VS的工具箱中把FCKeditor.NET控件拖入页面，设置其属性BasePath为./fckeditor/或~/fckeditor/，原来的默认值是/fckeditor/，设置完后就能正常使用了^^

2、配置编辑器
在fckeditor文件夹下有个命名为fckconfig.js的文件，这个是FCKeditor的配置文件，可以根据自己需要更改它来自定义编辑器。
◊ 更改默认Enter键标签
FCKeditor默认当按下Enter键时，会把之前输入的内容用<p>标签分段，假如这会影响你的页面样式的话，可通过设置更改该标签。在fckconfig.js文件中找到以下内容：

FCKConfig.EnterMode  =   ' p '  ;             //  p | div | br
FCKConfig.ShiftEnterMode  =   ' br '  ;     //  p | div | br

第一行的EnterMode即是按下Enter时的标签，可更改为注释中的p或div或br，下面一行是指按住shift键，按下Enter时的标签，默认为</br>。

◊ 更改toolbar工具条的默认项
FCKeditor默认有两种工具栏样式，分别为Default和Basic，可通过设置控件FCKeditor.NET的ToolbarSet属性切换。当然，通过更改配置文件，你可以自定义自己的工具条或更改默认的工具条。在fckconfig.js中找到以下内容：

FCKConfig.ToolbarSets[ " Default " ]  =  [
    [ ' Source ' , ' DocProps ' , ' - ' , ' Save ' , ' NewPage ' , ' Preview ' , ' - ' , ' Templates ' ],
    [ ' Cut ' , ' Copy ' , ' Paste ' , ' PasteText ' , ' PasteWord ' , ' - ' , ' Print ' , ' SpellCheck ' ],
    [ ' Undo ' , ' Redo ' , ' - ' , ' Find ' , ' Replace ' , ' - ' , ' SelectAll ' , ' RemoveFormat ' ],
    [ ' Form ' , ' Checkbox ' , ' Radio ' , ' TextField ' , ' Textarea ' , ' Select ' , ' Button ' , ' ImageButton ' , ' HiddenField ' ],
     ' / ' ,
    [ ' Bold ' , ' Italic ' , ' Underline ' , ' StrikeThrough ' , ' - ' , ' Subscript ' , ' Superscript ' ],
    [ ' OrderedList ' , ' UnorderedList ' , ' - ' , ' Outdent ' , ' Indent ' , ' Blockquote ' ],
    [ ' JustifyLeft ' , ' JustifyCenter ' , ' JustifyRight ' , ' JustifyFull ' ],
    [ ' Link ' , ' Unlink ' , ' Anchor ' ],
    [ ' Image ' , ' Flash ' , ' Table ' , ' Rule ' , ' Smiley ' , ' SpecialChar ' , ' PageBreak ' ],
     ' / ' ,
    [ ' Style ' , ' FontFormat ' , ' FontName ' , ' FontSize ' ],
    [ ' TextColor ' , ' BGColor ' ],
    [ ' FitWindow ' , ' ShowBlocks ' , ' - ' , ' About ' ]         //  No comma for the last row.
] ;

FCKConfig.ToolbarSets[ " Basic " ]  =  [
    [ ' Bold ' , ' Italic ' , ' - ' , ' OrderedList ' , ' UnorderedList ' , ' - ' , ' Link ' , ' Unlink ' , ' - ' , ' About ' ]
] ;

第一个就是默认的Default工具条，你可以直接更改或者按照给出的样式自已写一个。

◊ 更改编辑区的样式
我们看到的FCKeditor编辑区实际是一个HTML页面，所以我们可以随意更变它的样式，如字体大小，背景颜色等。在fckconfig.js可找到以下内容：

FCKConfig.EditorAreaCSS  =  FCKConfig.BasePath  +   ' css/fck_editorarea.css '  ;
FCKConfig.EditorAreaStyles  =   ''  ;

第一行指定了一个外联的样式文件fck_editorarea.css，它的路径是/fckeditor/editor/css/fck_editorarea.css，找到它直接更改该文件就能改变编辑区样式。
第二行是提供直接写css的，可像以下这样写：

FCKConfig.EditorAreaStyles = 'body { font-size : 20pt }  p  { margin : 0px } ' ;

◊ 更改默认表情
在fck_config.js文件中找到以下内容：

FCKConfig.SmileyPath     =  FCKConfig.BasePath  +   ' images/smiley/msn/ '  ;
FCKConfig.SmileyImages     =  [ ' regular_smile.gif ' , ' sad_smile.gif ' , ' wink_smile.gif ' , ' teeth_smile.gif ' , ' confused_smile.gif ' , ' tounge_smile.gif ' , ' embaressed_smile.gif ' , ' omg_smile.gif ' , ' whatchutalkingabout_smile.gif ' , ' angry_smile.gif ' , ' angel_smile.gif ' , ' shades_smile.gif ' , ' devil_smile.gif ' , ' cry_smile.gif ' , ' lightbulb.gif ' , ' thumbs_down.gif ' , ' thumbs_up.gif ' , ' heart.gif ' , ' broken_heart.gif ' , ' kiss.gif ' , ' envelope.gif ' ] ;
FCKConfig.SmileyColumns  =   8  ;
FCKConfig.SmileyWindowWidth         =   320  ;
FCKConfig.SmileyWindowHeight     =   210  ;

SmileyPath是表情图像的存放路径，SmileyImages是图片名集，可以在smiley目录下新建个文件夹，把表情图片放进去，再更改SmileyImages为新的表情文件名就可以了。

◊ 提供上传功能
要正常使用FCKeditor的上传功能，需要更改一些配置和代码。下面以aspx系统为例说明下：
首先需要更改配置文件，指定系统上传功能使用的编程语言。定位到下面的配置项：

var  _FileBrowserLanguage     =   ' aspx '  ;     //  asp | aspx | cfm | lasso | perl | php | py
var  _QuickUploadLanguage     =   ' aspx '  ;     //  asp | aspx | cfm | lasso | perl | php | py

因为是aspx应用，所以上面两项要更改为“aspx”，默认是“php”。

在/fckeditor/editor/filemanager/connectors目录下，有一些与各种语言上传相关的文件。打开/aspx/config.ascx用户控件，会看到两个函数。
·CheckAuthentication()：验证是否有权限上传文件，有权限返回true，否则false
·SetConfig()：文件上传配置
最简单的配置方式是CheckAuthentication直接返回true，并更改SetConfig函数中的UserFilesPath变量值，UserFilesPath是文件上传后的保存路径。

配置完成后，可通过/fckeditor/editor/filemanager/connectors/uploadtext.html文件测试上传功能是否正常。测试时假如出现错误“使用主题 css 文件要求页上有标头控件。(例如 <head runat="server" />)。”，可能是网站使用到全局theme功能，可在/filemanager/connectors/aspx/upload.aspx页面加入语句“<%@ Page StylesheetTheme=""%>”去掉错误。

◊ 动态改变编辑区高度
编辑区实际就是一个iframe，要改变编辑区的高度就是改变iframe的高度。查看网页源文件可以发现，编辑区iframe的ID是由FCKeditor的ID再加上“___frame”构成，可以得到以下改变高度的代码：

var  editArea  =  document.getElementById( " FCKeditor1___frame " );   // 假设FCKeditor1是FCKeditor的客户端ID,只适用于IE
editArea.style.height  =   ' 500px ' ;   //  把高度改为500px

◊ 加载后自动隐藏工具条
FCKeditor_OnComplete是在FCKeditor加载完成后自动执行的函数，函数名必须要以FCKeditor_OnComplete命名。可以在该函数中执行一些初始化工作。

function FCKeditor_OnComplete(editorInstance)
{
    editorInstance.Commands.GetCommand( ' Source ' ).Execute();   // 执行“源代码”命令
    editorInstance.ToolbarSet.Collapse();   // 隐藏工具栏
}

你也可以设置它为默认隐藏工具条，在fck_config.js文件中找到以下内容：

FCKConfig.ToolbarStartExpanded     =   true  ;    //  设置工具栏默认展开/收缩
FCKConfig.ToolbarCanCollapse     =   true  ;    //  设置工具栏是否可以收缩

 

◊ 扩展阅读
FCKeditor 2.0 的设置.修改.使用
FCKeditor Javascript API
FCKeditor Configuration Options
FCKeditor Developers Guide