`
Clayz
  • 浏览: 293823 次
  • 性别: Icon_minigender_1
  • 来自: 东京
社区版块
存档分类
最新评论

FCKeditor配置

阅读更多
下载地址

FCKeditor_2.3.2.zip
http://prdownloads.sourceforge.net/fckeditor/FCKeditor_2.3.2.zip?download

FCKeditor-2.3 (for java)
http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor-2.3.zip

1> 下载完成后,在J2EE应用中,建立项目:tomcat/webapps/fcktest,在根目录中建立文件夹FCKeditor,将FCKeditor中的editor目录及 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml文件拷贝到FCKeditor目录下。

2> 然后我们将FCKeditor-2.3\web\WEB-INF\lib中的两个jar包拷贝到\fcktest\WEB-INF\lib目录下,将 FCKeditor-2.3\src下的FCKeditor.tld拷贝到\fcktest\WEB-INF下。

3> 编辑\fcktest\WEB-INF\web.xml文件,将FCKeditor-2.3\web\WEB-INF\web.xml里的内容合并到项目的\WEB-INF\目录下的web.xml文件中,修改<servlet-mapping>里的内容为:

xml 代码
 
  1. <servlet-mapping>  
  2.   <servlet-name>Connector</servlet-name>  
  3.   <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>  
  4. </servlet-mapping>  
  5.   
  6. <servlet-mapping>  
  7.   <servlet-name>SimpleUploader</servlet-name>  
  8.   <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>  
  9. </servlet-mapping> 

4>   修改合并后的web.xml文件,将名为SimpleUploader的Servlet的enabled参数值改为true,以允许上传功能,Connector Servlet的baseDir参数值用于设置上传文件存放的位置。并添加下面内容
xml 代码
 
  1. <taglib>  
  2. <taglib-uri>/FCKeditor</taglib-uri>  
  3. <taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>  
  4. </taglib> 

5>修改页面fckconfig.js

第一个修改的文件,也就是fckeditor总配置文件,位于根目录下的fckconfig.js文件。请根据下面的列表进行

找到第50行 FCKConfig.DefaultLanguage = 'en' ;改为   FCKConfig.DefaultLanguage = 'zh-cn' ;设置默认语言为简体中文

找到第73行 FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。

找到第88行 FCKConfig.ToolbarSets["Default"],为默认按钮,根据你的需要自行增减

找到第109行FCKConfig.ContextMenu为右键菜单,根据需要自行增减

找到第113行FCKConfig.FontNames为字体的选项;加上几种我们常用的字体FCKConfig.FontNames = ' 宋体;黑体;隶书;楷体_GB2312; Arial;Comic Sans MS;Courier New;Tahoma; Times New Roman;Verdana' ;

找到第114行FCKConfig.FontSizes为字的大小选项(不用改)

第115行FCKConfig.FontFormats为字的格式(不用改)

第117/118行为字的样式(可以根据xml自行配置)(不用改)

而如果你还想用自己的表情图标的话,那跳到180行(FCKConfig.SmileyPath),改掉那个表情图标的文件夹地址,以及下面的表 情图标的文件名,再下面那三个数字是每行显示表情数及弹出窗口的宽和高了,这个的大小要根据您的表情图标排列的窗口的大小而定了。

将FCKConfig.LinkBrowserURL等的值替换成以下内容:

java 代码
 
  1. FCKConfig.LinkBrowserURL  
  2.  = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;  
  3.   
  4. FCKConfig.ImageBrowserURL  
  5.  = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;  
  6.   
  7. FCKConfig.FlashBrowserURL  
  8.  = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;  
  9.   
  10. FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;  
  11. FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;  
  12. FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image'  

OK,总配置文件修改结束。

5> 添加页面 index.jsp

      第一种方式

xml 代码
 
  1. <%@ page contentType="text/html;charset=GBK"%>  
  2.   <%@ taglib uri="/FCKeditor" prefix="FCK" %>  
  3.   <html>  
  4.    <head>  
  5.     <title>Welcome</title>  
  6.       
  7.    </head>  
  8.    <body>  
  9.    <form name="form1" action='sampleposteddata.jsp' method="post">  
  10.     <FCK:editor id="EditorAccessibility"  
  11.         width="80%" height="320">     
  12.     </FCK:editor>  
  13.       
  14.     <input type="submit" name="SubM" value="发表" />  
  15.    </form>  
  16.    </body>  
  17.   </html> 

      第二种方式(可以根据需要自动显示)(推荐)

xml 代码
 
  1. <%@ page language="java" import="com.fredck.FCKeditor.*" %>  
  2.   <%@ taglib uri="/FCKeditor" prefix="FCK" %>  
  3.   <script type="text/javascript" src="FCKeditor/fckeditor.js"></script>  
  4.   <form action="sampleposteddata.jsp" method="post" target="_blank">  
  5.     <table border="0" width="700"><tr><td>  
  6.     <textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px"></textarea>  
  7.     <script type="text/javascript">  
  8.     var oFCKeditor = new FCKeditor('content') ;  
  9.     oFCKeditor.BasePath = "FCKeditor/" ;  
  10.     oFCKeditor.Height = 400;  
  11.     oFCKeditor.ToolbarSet = "Default" ;    
  12.     oFCKeditor.ReplaceTextarea();  
  13.     </script>  
  14.     <input type="submit" value="Submit">  
  15.     </td></tr></table>  
  16.   </form>  

    6>   添加接受页面sampleposteddata.jsp

xml 代码
 
  1. <%@ page contentType="text/html;charset=GB2312"%>  
  2.     <%@ page language="java" import="java.util.*" %>  
  3.     <%  
  4.       Enumeration params = request.getParameterNames();  
  5.     %>  
  6.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
  7.     <html>  
  8.       <head>  
  9.         <title>FCKeditor - Samples - Posted Data</title>  
  10.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  11.         <meta name="robots" content="noindex, nofollow">  
  12.         <link href="../sample.css" rel="stylesheet" type="text/css" />  
  13.       </head>  
  14.       <body>  
  15.         <h1>FCKeditor中国的中 - Samples - Posted Data</h1>  
  16.         This page lists all data posted by the form.  
  17.         <hr>  
  18.         <table width="100%" border="1" cellspacing="0" bordercolor="#999999">  
  19.           <tr style="FONT-WEIGHT: bold; COLOR: #dddddd; BACKGROUND-COLOR: #999999">  
  20.             <td noWrap>Field Name&nbsp;&nbsp;</td>  
  21.             <td>Value</td>  
  22.           </tr>  
  23.           <%  
  24.           String parameter = null ;  
  25.           while( params.hasMoreElements() )  
  26.           {  
  27.             parameter = (String) params.nextElement() ;  
  28.           %>  
  29.           <tr>  
  30.             <td valign="top" nowrap><b><%=parameter%></b></td>  
  31.             <td width="100%"><%=request.getParameter(parameter)%></td>  
  32.           </tr>  
  33.           <%  
  34.           }  
  35.           %>  
  36.         </table>  
  37.       </body>  
  38.     </html> 

       现在就可以运行了

3,个性设置

精简控件,当然是文件精简而非功能精简化.进入到editor文件夹内,先把“_source”文件夹删除,这里是一些源文件,对于使用来说没什么用处。

进入images文件夹,删除smiley文件夹,些文件是放表情图标的,由于接下来我会用我自己的表情图标,先把他们的删除,当然,如果你想用这里 的表情图标那就不要删掉了。退出 images再进入lang文件夹内,这里的东西可以来个大清洗了,只保留 fcklanguagemanager.js、zh-cn.js、en.js、zh.js这四个文件,第一个文件是语言配置文件,有了它才能和 fckconfig.js里的设置成对对应上相应的语言文件,zh-cn.js是简体中文语言包,en.js就不用说了吧,zh.js是繁体中文的。怎 么样?一下子少了几百K,爽 吧~

再退出lang文件夹,进入skin文件夹,如果你想使用fckeditor默认的这种奶黄色,那就把除了default文件夹外的另两个文件夹直接 删除,如果想用别的,那就自己考虑了,不过我给你个建议,如果不想用默认的,那就选那个silver,因为银色也就是灰色和任何颜色配起来都不会难看,而 那个office2003的皮肤,反正我是非常不喜欢的,并且图片相对也比较大,又增加了下载时间,不要!

精简的最后一步,退出skin文件夹,再进入filemanager,如果你用的不是最新版的fckeditor的话,那这里就一个文件夹 browser,新版的还有一个upload文件夹。一个个来,先进入到 filemanager/browser/default/connectors/下统统删除然后再进入filemanager/upload/下,统 统删除
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics