FCKeditor的配置和使用问题！

最近这两天学习使用FCKeditor，但是jsp页面中只能显示一个输入框不能显示ToolBar。配置什么的检查了好多次应该没问题，但是页面就是没有工具栏。这是jsp页面的代码。<script type="text/javascript">
            var oFCKeditor = new FCKeditor('contest');
            oFCKeditor.BasePath = 'fckeditor_2.6/';
            oFCKeditor.ToolbarSet = 'Default';
            oFCKeditor.Width = '80%';
            oFCKeditor.Height = '200';
            oFCKeditor.Value = 'Hello World';
          oFCKeditor.ReplaceTextarea(); 
            oFCKeditor.Create();
</script>

解决方案 »

  1.   

    替换后无需再创建了吧，去掉 oFCKeditor.Create()看看;
      

  2.   

    FCKeditor编辑器在JAVA中的使用与配置
    http://www.enet.com.cn 2007年08月29日13：36 
    　　配置 　　1. 新建工程compass，在WebRoot文件夹下新建文件夹FCKeditor（用来存放FCKeditor相关文件， 　　记得大小写要一致，因为如果你需要改变的话变化的文件比较多，而且还不确定是否改全了） 　　2. 将FCKeditor_2.4.2包中的 editor 文件夹和fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 　　这四个文件放到项目中的 FCKeditor 目录。 　　3. 将FCKeditor.Java -2.3.zip 包中的 \web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot\WEB-INF\lib目录下 　　4. 将FCKeditor.Java -2.3.zip 包中的 \src 下的 FCKeditor.tld 文件到项目的 WebRoot\WEB-INF 目录 　　5. 在 WebRoot 目录下新建 UserFiles 文件夹，在此文件夹下新建 Image、 Flash 、File、Media四个文件夹 ，他们分别用来存放上传的图片、动画、文件、媒体文件 　　6. 修改fckconfig.js组件配置文件【说明一下，你可以在配置文件里搜索等号前面的信息来确定某一项做更改】： 　　A、FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ; 　　这是组件的样式模板，好确定你到底需要使用哪中样式，这个根据你自己的喜好更改, 　　B、FCKConfig.DefaultLanguage = 'zh-cn' ; 　　这个是确定你需要使用哪中语言，设定成上面的表示使用简体中文； 　　C、更改文件浏览的路径： 　　FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ; 　　FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ; 　　FCKConfig.FlashBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ; 　　把相应的信息屏蔽掉，使用上面的 　　D、更改上传文件的路径 　　FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ; 　　FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ; 　　FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ; 　　把相应的信息屏蔽掉，使用上面的 　　7. 修改 web.xml 文件，加入以下内容 ： 　　在FCKeditor.Java -2.3.zip 包中有个web\WEB-INF\WEB.XML，把这个节点里面的内容复制到你的工程里面的相应的位置，值得说明的地方是： 　　 
     
     22-FCKEditor参数配置 (通过JS文件实现)
     
    今天我们来继续上一篇博文的话题，我们介绍一下FCKEditor编辑器的参数配置！
    一、FCKEditor编辑器的配置选项根据FCKEditor官网解释：FCKEditor的配置选项共分为以下六类117项：1  Editor Behavior2  Styles3  HTML Output4  User Interface5  Advanced6  File Browser and Uploader具体的配置有:Editor Behavior•AutoDetectPasteFromWord•BaseHref •CleanWordKeepsStructure •ContentLangDirection •DefaultLinkTarget 
     
    •DocType •ForcePasteAsPlainText 
    •FullPage •LinkDlgHideTarget •MaxUndoLevels •StartupFocus •StartupShowBlocks 
    •TemplateReplaceAll 
    •TemplateReplaceCheckbox 
    •ToolbarComboPreviewCSS Styles •BodyId and BodyClass •CoreStyles •CustomStyles 
     
    •EditorAreaCSS 
     
    •EditorAreaStyles 
     
    •FontColors •FontFormats 
     
    •FontNames 
     
    •FontSizes 
    •IndentClasses 
     
    •IndentLength 
    •IndentUnit 
     
    •JustifyClasses 
    •RemoveFormatTags 
     
    •StylesXmlPath 
    HTML Output 
     
    •AdditionalNumericEntities 
     
    •EMailProtection and EMailProtectionFunction
    •EnterMode 
     
    •FillEmptyBlocks 
    •ForceSimpleAmpersand 
    •FormatIndentator 
     
    •FormatOutput 
    •FormatSource 
     
    •HtmlEncodeOutput 
    •IgnoreEmptyParagraphValue 
     
    •IncludeGreekEntities 
    •IncludeLatinEntities 
    •ProcessHTMLEntities 
     
    •ProcessNumericEntities 
    •ShiftEnterMode 
     
    •TabSpaces 
    User Interface
     
    •AutoDetectLanguage 
    •ContextMenu 
     
    •DefaultFontFormatLabel 
    •DefaultFontSizeLabel 
     
    •DefaultFontLabel 
    •DefaultLanguage 
    •DefaultStyleLabel 
     
    •DisableFFTableHandles 
    •DisableObjectResizing 
     
    •EnableMoreFontColors 
    •FlashDlgHideAdvanced 
     
    •FloatingPanelsZIndex 
    •ImageDlgHideLink 
     
    •ImageDlgHideAdvanced 
    •Keystrokes 
     
    •LinkDlgHideAdvanced 
    •ShowBorders 
     
    •ShowDropDialog 
    •SkinPath 
     
    •SourcePopup 
    •SmileyColumns 
    •SmileyWindowHeight 
     
    •SmileyWindowWidth 
    •ToolbarCanCollapse 
     
    •ToolbarStartExpanded 
    •ToolbarLocation 
     
    •ToolbarSets 
    Advanced 
     
    •AllowQueryStringDebug 
    •BrowserContextMenuOnCtrl 
     
    •CustomConfigurationsPath 
    •Debug 
     
    •FirefoxSpellChecker 
    •IeSpellDownloadUrl 
     
    •PluginsPath 
    •Plugins.Add 
     
    •PreloadImages 
    •PreserveSessionOnFileBrowser 
     
    •ProtectedSource.Add 
    •ProtectedTags 
     
    •SmileyPath 
    •SmileyImages 
     
    •SpellChecker 
    •ScaytAutoStartup 
     
    •SpellerPagesServerScript 
    •TemplatesXmlPath 
     
    •MsWebBrowserControlCompat 
    File Browser and Uploader
     
    •LinkBrowser 
    •LinkBrowserURL 
     
    •LinkBrowserWindowWidth 
    •LinkBrowserWindowHeight 
     
    •ImageBrowser 
    •ImageBrowserURL 
     
    •ImageBrowserWindowWidth 
    •ImageBrowserWindowHeight 
     
    •FlashBrowser 
    •FlashBrowserURL 
     
    •FlashBrowserWindowWidth 
    •FlashBrowserWindowHeight 
     
    •LinkUpload 
    •LinkUploadURL 
     
    •LinkUploadAllowedExtensions 
    •LinkUploadDeniedExtensions 
     
    •ImageUpload 
    •ImageUploadURL 
     
    •ImageUploadAllowedExtensions 
    •ImageUploadDeniedExtensions 
     
    •FlashUpload 
    •FlashUploadURL 
     
    •FlashUploadAllowedExtensions 
    •FlashUploadDeniedExtensions
     
    具体的配置说明请参照官网说明:
    http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options
    二、编辑器配置的实现方法
     
    对于FCKEditor编辑器的配置可以通过两种方法实现：
     
    (1):通过设置fckconfig.js实现(2):通过PHP文件实现编辑器的配置
     
    三、通过fckconfig.js实现编辑器的配置
     
    无论其配置参数有多少项，配置过程还是非常简单的！基本的语法结构是
     
    FCKConfig.属性名称 = 属性值;
     
    我们举几个例子来说明一下吧！
     
    FontNames功能:设置字体列表语法:FCKConfig.FontNames = ‘字体;字体;…’;如:
    FCKConfig.FontNames = ‘宋体;隶书;华文行楷; Arial;Times New Roman;Verdana’;FontSizes功能:设置字号列表语法:FCKConfig.FontSizes = ‘字号;字号;…’;如:FCKConfig.FontSizes = ‘12px;14px;16px;18px;20px;24px;28px’;
    ToolbarSets功能:设置工具栏FCKConfig.ToolbarSets[“工具栏名称”] = [['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']];说明:一项完整的工具栏必须位于英文中括号之间;如果某项工具栏被划分为多个子部分(如样式工具栏又可为基础样式(加粗、倾斜等)、上标与下标)，那么可以采用竖线进行分隔如果将工具栏进行换行，可采用"/"如下图
     
     
     
    SmileyPath功能:设置表情图片存放的路径语法:FCKConfig. SmileyPath = FCKConfig.BasePath + “表情图片存放的路径”;说明:在默认情况下,表情存放的位置在FCKConfig.BasePath文件夹下的images/smiley/msn/如果想改变表情图片，那么需要事先将表情图片复制到相应的文件夹而且还需要修改SmileyImages属性.
     
    在初始状态下截图如下:
     
      
    配置参数如下：FCKConfig.FontNames  = '宋体;隶书;华文行楷;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;FCKConfig.FontSizes  = '12px;14px;16px;18px;20px;24px;28px;smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;
    FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/QQFace/' ;FCKConfig.SmileyImages = ['0.gif','1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif’];
     
    配置后的效果如下图:
     
     
     
     
    另外，当改变设置后必须清除缓存！关于通过PHP来实现编辑器配置的方法，我们明天再来研究吧！