【经典】FCKediter详细配置说明

配置编辑器 ◊ 默认选项，默认选中源代码选项 view plaincopy to clipboardprint? function FCKeditor_OnComplete( editorInstance ) { editorInstance.SwitchEditMode(); } 在fckeditor文件夹下有个命名为fckconfig.js的文件，这个是FCKeditor的配置文件，可以根据自己需要更改它来自定义编辑器。 ◊ 更改默认Enter键标签 FCKeditor默认当按下Enter键时，会把之前输入的内容用

标签分段，假如这会影响你的页面样式的话，可通过设置更改该标签。在fckconfig.js文件中找到以下内容： FCKConfig.EnterMode = 'p' ; // p | div | br FCKConfig.ShiftEnterMode = 'br' ; // p | div | br 第一行的EnterMode即是按下Enter时的标签，可更改为注释中的p或div或br，下面一行是指按住shift键，按下Enter时的标签，默认为
。 ◊ 更改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 文件要求页上有标头控件。(例如 )。”，可能是网站使用到全局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 ; // 设置工具栏是否可以收缩