2. 技术人生
    3. FCKeditor的JSP配置与使用

    FCKeditor的JSP配置与使用

    技术2022-05-20  41

    一 FCKeditor的下载

    先给出FCKeditor的下载页面 http://ckeditor.com/download

    下载FCKeditor_2.6.6.zip fckeditor-java-2.6-bin.zip fckeditor-java-demo-2.6.war 这3个文件

    分别解压后备用

    二 将FCKeditor放入Web Project

    将fckeditor拷贝,放置在WebRoot下 editor fckconfig.js fckeditor.js fckpackager.xml fckstyle.js fcktemplates.xml 以上红色部分 为必要项,喜欢用javascript显示就需要用fckeditor.js 导入fckeditor所需要的相关jar包 fckeditor-java-core-2.6.jar commons-fileupload.jaar commons-io.jar imageinfo.jar slf4j-api.jar slf4j.jar 在src目录下新建fckeditor.properties配置文件,内容如下 connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction 在web.xml文件中配置servlet <servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class> net.fckeditor.connector.ConnectorServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern> </servlet-mapping>

    三 FCKeditor在页面上的使用

    在<head>中引入 <script type="text/javascript" src="fckeditor/fckeditor.js"></script>在body中需要使用fckeditor的地方加入 <script type="text/javascript"> var oFCKeditor = new FCKeditor('FCKeditor1'); oFCKeditor.BasePath="<%=request.getScheme()+ "://" +request.getServerName() + ":" +     request.getServerPort()  + request.getContextPath() + "/fckeditor/"%>"; oFCKeditor.Create(); </script>

    四 FCKeditor配置

    FCKeditor的相关配置文件都可以在fckconfig.js修改,也可以自定义文件修改.

     

    本文中使用自定配置修改

     

    在WebRoot下新建/js/myfckconfig.js文件,内容如下

    //自动检查语言 FCKConfig.AutoDetectLanguage = false ; //默认语言 FCKConfig.DefaultLanguage = 'zh-cn' ; //自定义工具集 FCKConfig.ToolbarSets["Custom"] = [ ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], '/', ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Anchor'], ['Image','Flash','Table','Rule','Smiley'], '/', ['Style','FontFormat','FontName','FontSize'], '/', ['TextColor','BGColor'], ['FitWindow','ShowBlocks'] // No comma for the last row. ] ; //字体 FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //字号 FCKConfig.FontSizes = '8px;10px;11px;12px;13px;14px;16px;18px;20px;22px;24px;26px;28px;36px;48px;72px' ; //回车 FCKConfig.EnterMode = 'br' ; //SHIFT+回车 FCKConfig.ShiftEnterMode = 'p' ; //表情图片路径 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 ;

     

    更改页面

    <SCRIPT type="text/javascript"> var oFCKeditor = new FCKeditor('content','100%','400px'); oFCKeditor.BasePath="<%=request.getScheme()+ "://" +request.getServerName() + ":" +     request.getServerPort()  + request.getContextPath() + "/fckeditor/"%>";

    //指定自定义配置文件路径 oFCKeditor.Config["CustomConfigurationsPath"]="/FCK/js/myfckconfig.js";

    //选择工具集 oFCKeditor.ToolbarSet="Custom"; oFCKeditor.Create(); </SCRIPT>

    专利

    最新回复(0)