FCKeditor 2.6.4在ASP.NET中的配置方法

FCKeditor是一款功能强大的开源在线文本编辑器(DHTML editor),使你在web上可以使用类似微软Word 的桌面文本编辑器的许多强大功能。FCKeditor目前的最新版本是2.6.3，本文以FCKeditor2.6.3介绍在asp.Net中的配置方法。

 

FCKEditor官方下载地址：http://www.fckeditor.net/download  

 

1.fckeditor目录下除editor目录、fckconfig.js、fckeditor.js  fckstyles.xml  fcktemplates.xml 这几个保留，其余的全部删除  

2.editor/filemanager/connectors目录中除aspx目录外全部删除  

3.editor/lang目录中除en.js、zh.js 、zh-cn.js外全部删除  

4.删除_samples目录，当然如果你想看示例，就不要删除这个目录了。

 

 

5.配置皮肤，有default、office2003、silver风格等，可以使用默认。

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

 

 

 

6.在编辑器域内可以使用Tab键。（1为是，0为否）

FCKConfig.TabSpaces = 0 ; 改为 FCKConfig.TabSpaces = 1 ;

 

 

 

7.加上几种常用的字体：

           FCKConfig.FontNames = ‘宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’;

 

 

8.编辑器域内默认的显示字体为12px，想要修改可以通过修改样式表来达到要求，打开/editor/css/fck_editorarea.css，修改font-size属性即可

 

9.关于安全性

如果你的编辑器用在前台非认证的情况下，推荐使用Basic的toolbar

FCKConfig.ToolbarSets["Basic"] = [

  ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','Image','-','About']

] ;

 

10.在上传文件窗口点击浏览服务器，可能会出现 the server didn’t send back a proper xml….. 错误提示，是因为FCKeditor要求不同类型的文件分别传到不同的目录，包括file,image,falsh,media 等目录，可以先建立起来试试。

 

 

fckconfig.js修改：

 

//FCKConfig.DefaultLanguage= 'en' ;改为FCKConfig.DefaultLanguage= 'zh-cn' ;//var _FileBrowserLanguage= 'asp' ;// asp | aspx | cfm | lasso | perl | php | py//var _QuickUploadLanguage= 'asp' ;// asp | aspx | cfm | lasso | perl | php | py改为var _FileBrowserLanguage= 'aspx' ;// asp | aspx | cfm | lasso | perl | php | pyvar _QuickUploadLanguage= 'aspx' ;// asp | aspx | cfm | lasso | perl | php | py 

 

web.config相关配置： 

 

<appSettings> <add key="FCKeditor:BasePath" value="~/fckeditor/"/> <add key="FCKeditor:UserFilesPath" value="~/upload/"/> <!--在2.6中配置文件配置路径--> </appSettings>  

 

Files目录要有写的权限。你根据自己网站需求设置那个帐号，本文为方便设置User实际中你可能用ASP.NET帐号更合理。

 

 

 

页面调用  

<%@ Register assembly="FredCK.FCKeditorV2" namespace="FredCK.FCKeditorV2" tagprefix="FCKeditorV2" %> <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" ToolbarSet="Basic"></FCKeditorV2:FCKeditor>

 取值之只要 FCKeditor1.Value就可以轻松实现  

 

 

 

在配置完FCKeditor编辑器后，就可以使用，但是，有个问题让人很不爽；

编辑器工具栏界面太大了，如下图

 

 

 

 

很多用不到，也太占页面。

想编辑一下，去了一些没有用的，然后按自己习惯更换一个位置。当然是可以的

在FCKeditor目录下，找到fckconfig.js文件，打开它，打到FCKConfig.ToolbarSets["Default"]
下面就是FCK编辑器工具栏上的按钮

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'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
] ;

 

 

在修改之前，记得备份，当然，你可以把原来的注释掉，重新写一段。注意语法就行了。

"/"是换行，"-"是竖线，[]为一个显示块区。

我的修改结果

FCKConfig.ToolbarSets["Default"] = [
//['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['FitWindow','Source'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
//['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
//'/',

['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],
['TextColor','BGColor'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor']
//'/',
//['FontFormat','FontName','FontSize'], 
] ;

效果如下