FCKeditor配置

Clayz

浏览: 297606 次
性别:
来自: 东京

最近访客更多访客>>

静妙仙人

david_xu

phncz310

weiwan5675

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web 2.0

fckeditor Servlet Web JSP XML

下载地址

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 代码

<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>

4> 修改合并后的web.xml文件，将名为SimpleUploader的Servlet的enabled参数值改为true，以允许上传功能，Connector Servlet的baseDir参数值用于设置上传文件存放的位置。并添加下面内容

xml 代码

<taglib>
<taglib-uri>/FCKeditor</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</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 代码

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" ;
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'

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

5> 添加页面 index.jsp

第一种方式

xml 代码

<%@ page contentType="text/html;charset=GBK"%>
<%@ taglib uri="/FCKeditor" prefix="FCK" %>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<form name="form1" action='sampleposteddata.jsp' method="post">
<FCK:editor id="EditorAccessibility"
width="80%" height="320">
</FCK:editor>
<input type="submit" name="SubM" value="发表" />
</form>
</body>
</html>

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

xml 代码

<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%@ taglib uri="/FCKeditor" prefix="FCK" %>
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>
<form action="sampleposteddata.jsp" method="post" target="_blank">
<table border="0" width="700"><tr><td>
<textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px"></textarea>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "FCKeditor/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>

6> 添加接受页面sampleposteddata.jsp

xml 代码

<%@ page contentType="text/html;charset=GB2312"%>
<%@ page language="java" import="java.util.*" %>
<%
Enumeration params = request.getParameterNames();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>FCKeditor - Samples - Posted Data</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<link href="../sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>FCKeditor中国的中 - Samples - Posted Data</h1>
This page lists all data posted by the form.
<hr>
<table width="100%" border="1" cellspacing="0" bordercolor="#999999">
<tr style="FONT-WEIGHT: bold; COLOR: #dddddd; BACKGROUND-COLOR: #999999">
<td noWrap>Field Name  </td>
<td>Value</td>
</tr>
<%
String parameter = null ;
while( params.hasMoreElements() )
{
parameter = (String) params.nextElement() ;
%>
<tr>
<td valign="top" nowrap><b><%=parameter%></b></td>
<td width="100%"><%=request.getParameter(parameter)%></td>
</tr>
<%
}
%>
</table>
</body>
</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/下，统统删除

分享到：

基于XML的即时消息开发Jabber | 创建Java中的线程池

2007-12-15 16:19
浏览 1597
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论