1.将FCKeditor目录下的editor拷贝到项目的WebContent目录下
2.并把ECKeditor-2.3.jar 和 commons-fileupload.jar拷贝到 项目/WebContent/WEB-INF/lib目录下
3.把 FCKeditor.tld拷贝到项目/WebContent/WEB-INF下
4.在web.xml里添加如下代码
代码
5.在需要调用的页面
先导入:
代码
- <%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>
并在需要调用的地方输入:
代码
- <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"
-
- imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
-
- linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
-
- flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
-
- imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
-
- linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
-
- flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
- FCK:editor>
====================================================================================
另一种方式
把所有配置文件集中在editor文件下,有利于管理。及把原fckeditor 下文件(fckconfig.js、fckeditor.js、fckeditor.asp、fckstyles.xml、fcktemplates.xml)copy到editor 下。
1、需要修改editor/jsfck_startup.js ,
搜索
程序代码:
FCKScriptLoader.AddScript('../fckconfig.js')
改为
程序代码:
FCKScriptLoader.AddScript('fckconfig.js')
说明'fckconfig.js'与fckeditor.html 在同一目录
2、修改fckconfig.js'
增加
程序代码:
FCKConfig.BasePath="/../editor/"
将
程序代码:
FCKConfig.StylesXmlPath = FCKConfig.EditorPath + 'fckstyles.xml' ;
FCKConfig.TemplatesXmlPath = FCKConfig.EditorPath + 'fcktemplates.xml' ;
为
程序代码:
FCKConfig.StylesXmlPath = FCKConfig.EditorPath + 'editor/fckstyles.xml' ;
FCKConfig.TemplatesXmlPath = FCKConfig.EditorPath + 'editor/fcktemplates.xml' ;
或
程序代码:
FCKConfig.StylesXmlPath = FCKConfig.BasePath + 'fckstyles.xml' ;
FCKConfig.TemplatesXmlPath = FCKConfig.BasePath + 'fcktemplates.xml' ;
=======================================================================
方式三
1. FCKeditor 介绍
FCKeditor 这个开源的HTML 文本编辑器可以让web 程序拥有如MS Word 这样强大的编辑功
能.FCKeditor 支持当前流行的浏览器如IE 5.5+, Firefox 1.0+, Mozilla 1.3+与Netscape 7+等。
FCKeditor官司方网址:http://www.fckeditor.net/
FCKeditor在线DEMO:http://www.fckeditor.net/demo
FCKeditor下载直址:http://www.fckeditor.net/download (该版本为2.3.2),最新版已经是2.4了。
2.FCKeditor.java介绍
不能直接在JSP项目中使用,需要FCKeditor.java库的支持。
FCKeditor.java是针对对JAVA中使用FCKeditor由Simone Chiaretta开发的FCKeditor的JAVA实现。
下载地址:http://www.fckeditor.net/download (最近版本为2.3)
3.在JAVA项目中使用FCKeditor在线编辑器
开发环境:JDK5.0 + Eclipse3.2.1 + WTP1.5.2
(1)新建一个WEB工程:
(2) 解压 FCKeditor_2.3.2.zip包,将其中的 edit 文件夹到项目中的 WebRoot 目录
(3) 解压 FCKeditor_2.3.2.zip 包,将其中的 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夹到项目中的 WebRoot 目录
(4) 解压 FCKeditor.java-2.3.zip 包,将其中的 /web/WEB-INF/lib 下的两个 jar 文件到项目的 WebRoot/WEB-INF/lib 目录
(5) 解压 FCKeditor.java-2.3.zip 包,将其中的 /src 下的 FCKeditor.tld 文件到项目的 WebContent/WEB-INF 目录
(6) 删除 WebContent/edit 目录下的 _source 文件夹(以“_”开始的文件,在项目中无用)
完成后的目录结构下如:
说明:图中的input.jsp和display.jsp两个是我写的测试集成FCKeditor的JSP文件。
UserFiles是FCKeditor上传文件的文件夹。
修改WebContent/WEB-INF/web.xml文件,加入FCKeditor的配置信息,如下:
xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>FCKeditordisplay-name>
<servlet>
<servlet-name>Connectorservlet-name>
<servlet-class>
com.fredck.FCKeditor.connector.ConnectorServlet
servlet-class>
<init-param>
<param-name>baseDirparam-name>
<param-value>/UserFiles/param-value>
init-param>
<init-param>
<param-name>debugparam-name>
<param-value>trueparam-value>
init-param>
<load-on-startup>1load-on-startup>
servlet>
<servlet>
<servlet-name>SimpleUploaderservlet-name>
<servlet-class>
com.fredck.FCKeditor.uploader.SimpleUploaderServlet
servlet-class>
<init-param>
<param-name>baseDirparam-name>
<param-value>/UserFiles/param-value>
init-param>
<init-param>
<param-name>debugparam-name>
<param-value>trueparam-value>
init-param>
<init-param>
<param-name>enabledparam-name>
<param-value>falseparam-value>
init-param>
<init-param>
<param-name>AllowedExtensionsFileparam-name>
<param-value>param-value>
init-param>
<init-param>
<param-name>DeniedExtensionsFileparam-name>
<param-value>
php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi
param-value>
init-param>
<init-param>
<param-name>AllowedExtensionsImageparam-name>
<param-value>jpg|gif|jpeg|png|bmpparam-value>
init-param>
<init-param>
<param-name>DeniedExtensionsImageparam-name>
<param-value>param-value>
init-param>
<init-param>
<param-name>AllowedExtensionsFlashparam-name>
<param-value>swf|flaparam-value>
init-param>
<init-param>
<param-name>DeniedExtensionsFlashparam-name>
<param-value>param-value>
init-param>
<load-on-startup>1load-on-startup>
servlet>
<servlet-mapping>
<servlet-name>Connectorservlet-name>
<url-pattern>
/editor/filemanager/browser/default/connectors/jsp/connector
url-pattern>
servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploaderservlet-name>
<url-pattern>
/editor/filemanager/upload/simpleuploader
url-pattern>
servlet-mapping>
web-app>
注:web.xml中已经加入了一些常用配置的说明。
- 新建input.jsp文件,内容如下:(注意内容中的” testfck”这个id)
<%...@ page contentType="text/html;charset=UTF-8" language="java"%>
<%...@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck"%>
<html>
<head>
<title>Testtitle>
head>
<script type="text/javascript" src="fckeditor.js">script>
<script type="text/javascript">...
window.onload = function() ...{
var oFCKeditor = new FCKeditor("testfck"); —注意这里 -->
oFCKeditor.BasePath = "";
oFCKeditor.ToolbarSet = "Basic";
oFCKeditor.ReplaceTextarea("testfck");
}
script>
<body>
<FORM action="display.jsp">
<textarea rows="20" cols="20"
id="testfck" name="testfck">textarea> <br> —注意这里 -->
<hr>
<input type="submit" value="提交">FORM>
body>
html>
说明:在JSP中集成FCKeditor有以下几种方式:
(1) JavaScript集成:
如上面内容所示,通过新建一个FCKeditor对象,然后调用该对象的设置方法来设置FCKeditor的各个属性,最后调用FCKeditor的ReplaceTextarea()替换HTML页面中的<textarea>标签。另外FCKeditor也可以调用它的create()方法来直接在JSP嵌入FCKeditor编辑器。
注:注意上面的oFCKeditor.BasePath = "";用这种方式FCKeditor会去查找它的editor目录下的fckeditor.html文件,由于我是直接将editor文件夹拷贝到WebContent目录下,所以将它的BasePath设置为””,如果您将editor拷贝到其它目录,请设置相应的BasePath属性。FCKeditor默认是将其放在fckeditor目录下。
(2) 使用JSP自定义标签(该方法一定要完成第(5)步:解压 FCKeditor.java-2.3.zip 包,将其中的 /src 下的 FCKeditor.tld 文件到项目的 WebContent/WEB-INF 目录)
首先在JSP中加入FCKeditor标签:
<%@ taglib uri=”/WEB-INF/FCKeditor.tld” prefix=”fck” %>
然后在
JSP
页面中加入如下代码,集成
FCKeditor
编辑器:
<fck:editor
id="testfck" >
basePath="/FCKeditor/"
height="60%"
skinPath="/FCKeditor/editor/skins/default/"
toolbarSet="Default"
imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
fck:editor>
(10) 新建display.jsp文件,这个文件比较简单,只是简单的显示从FCKeditor在线编辑器传递过来的内容,如下:
<%=request.getParameter("testfck")%>
注意这里的getParameter(“testfck”),这个”testfck”就是在input.jsp中设置的id。
4.FCKeditor类说明
下面是用来在页面中建立编辑器的FCKEDITOR 类的说明
(1) 构造器:
FCKeditor(instanceName[,width,height,toolbarSet,value])
instanceName:编辑器的唯一名称(相当于ID)
WIDTH:宽度
HEIGHT:高度
toolbarSet:工具条集合的名称
value:编辑器初始化内容
(2) 属性:
instanceName:编辑器实例名
width:宽度,默认值为100%
height:高度,默认值是200
ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default
value:初始化编辑器的HTML 代码,默认值为空
BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最用相对于站点根路径的表示方法,要以/结尾
CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true
DisplayErrors:是否显示提示错误,默为true;
(3) 集合:
Config[Key]=value;
这个集合用于更改配置中某一项的值,如
oFckeditor.Config["DefaultLanguage"]="ptbr";
(4) 方法:
Create()
建立并输出编辑器
RepaceTextArea(TextAreaName)
用编辑器来替换对应的文本框
5.如何配置FCKEDITOR
FCKEDITOR 提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用JAVASCRIPT 语法.修改后,在建立编辑器时,可以使用以下语法:
varoFCKeditor=newFCKeditor('FCKeditor1');
oFCKeditor.Config['CustomConfigurationsPath']='/myconfig.js';
oFCKeditor.Create();
提醒:当你修改配置后,请清空浏览器缓存以查看效果
配置选项:
AutoDetectLanguage=true/false 自动检测语言
BaseHref=""相对链接的基地址
ContentLangDirection="ltr/rtl"默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath=""自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage=""缺省语言
EditorAreaCss=""编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE 时,当由可视化界面切换到代码页时,把HTML 处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML 取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors=""设置显示颜色拾取器时文字颜色列表
FontFormats=""设置显示在文字格式列表中的命名
FontNames=""字体列表中的字体名
FontSizes=""字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML 实体
FormatIndentator=""当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML 文件,还是仅允许编辑BODY 间的内容
GeckoUseSPAN=true/false 是否允许SPAN 标记代替B,I,U 标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL=""浏览服务器时运行的URL
ImageBrowserWindowHeight=""图像浏览器窗口高度
ImageBrowserWindowWidth=""图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL=""插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath=""插件文件夹
ShowBorders=true/false 合并边框
SkinPath=""皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组图符窗中图片文件名数组
SmileyPath=""图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages"设置拼写检查器
StartupFocus=true/false 开启时FOCUS 到编辑器
StylesXmlPath=""设置定义CSS 样式列表的XML 文件的位置
TabSpaces=4TAB 键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR 集合
ToolbarStartExpanded=true/false 开启是TOOLBAR 是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR 标记还是P 或者DIV 标记__
6.自定义样式列表
FCKEDITOR 的样式工具栏中提供了预定义的样式,样式是通过XML 文件定义的,默认的
XML 样式文件存在于FCkEditor 根文件夹下的FckStyls.xml 文件中
这个XML 文件的结构分析如下:
xml version="1.0" encoding="utf8"?>
<Styles>
<Style name="MyImage" element="img">
<Attribute name=" style " value="padding:5px" />
<Attribute name=" border " value="2" />
Style>
<Style name=" Italic " element="em" />
<Style name=" Title " element="span">
<Attribute name=" class " value="Title" />
Style>
<Style name=" TitleH3 " element="h3" />
Styles>
每一个STYLE 标记定义一种样式,NAME 是显示在下拉列表中的样式名,ELEMENT 属性指
定此样式所适用的对象,因为FCKEDITOR 中的样式是上下文敏感的,也就是说,选择不同的
对象,仅会显示针对这类对象定义的样式
============================================================================
1、默认语言
打开fckconfig.js文件(相对FCKeditor文件夹,以下同),把自动检测语言改为不检测,把默认语言改为简体中文:
FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = ''zh-cn'' ;
2、字体列表
打开fckconfig.js文件,在字体列表中添加常用的“宋体;黑体;隶书;楷体_GB2312”:
FCKConfig.FontNames = ''宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'' ;
3、文件上传
FCKeditor的文件管理程序在filemanager文件夹中,又分为浏览(browser)和上传(upload)两种。浏览是指浏览服务器文件并可以选择,也可以上传本地文件至服务器;上传是指快速上传(QuickUpload),在窗口中点“上传”选项卡打开就是,跟我们使用的UBB编辑器有点相似,选择本地文件后上传就行。
也就是说FCKeditor中有一个文件浏览,有两个文件上传,而这些设置有些在一个文件中,有的则在多个文件中。比较复杂,改动比较多,我们再分几个小点儿来说。
①打开和关闭文件浏览和上传功能
有三个文件跟这个开关有关系,一个是js文件,两个是asp文件,前者关闭后界面中不出现相关窗口或按钮,后者关闭后相关功能不可用。
首先是fckconfig.js文件,以下内容设为true为开,false则为关。
文件浏览和浏览中上传功能:
FCKConfig.LinkBrowser = false ;
FCKConfig.ImageBrowser = false ;
FCKConfig.FlashBrowser = false ;
文件快速上传功能:
FCKConfig.LinkUpload = true ;
FCKConfig.ImageUpload = true ;
FCKConfig.FlashUpload = true ;
其次设置两个asp文件:
editor/filemanager/browser/default/connectors/asp/config.asp
ConfigIsEnabled = False
表示文件浏览关闭
editor/filemanager/upload/asp/config.asp
ConfigIsEnabled = True
表示文件快速上传打开
②文件上传或浏览的路径设置
注意FCKeditor是不支持虚拟目录的,您的所有路径都是针对网站根目录的绝对路径,这点对于在本地测试用虚拟目录,发布到远程用网站目录的开发者不太方便。我的就是这样,WinXP系统只能一个站点,只有用虚拟目录表示不同的网站,在本地测试好了,上传前还要临时更改这个设置。
文件浏览路径,打开文件editor/filemanager/browser/default/connectors/asp/config.asp:
ConfigUserFilesPath = "/attachments/"
快速上传的路径,打开文件editor/filemanager/upload/asp/config.asp:
ConfigUserFilesPath = "/attachments/"
我的文件目录在 http://127.0.0.1/temp/下面,就照以上设置。如果在本地测试这个网站在虚拟目录xxx中,则应该设置为:
ConfigUserFilesPath = "/127.0.0.1/temp/"
③文件快速上传的一个源文件BUG
以上设置好后,文件浏览和浏览中上传可以顺利进行,但是你会发现“快速上传”不能用。现象就是当选择好本地文件后,点击“上传至服务器”的按钮后没有任何反应。这就是因为fckconfig.js文件中的一个bug所致。
打开fckconfig.js文件,把FCKConfig.QuickUploadLanguage字样的地方,替换成_QuickUploadLanguage,一共要替换三个地方。前者没有定义就使用,所以有错,按代码意图应该和后者的值一样的。
④上传文件名自动更名
FCKeditor不支持中文文件名称,所以我们要让文件存入服务器时更改名称。由于有两个上传的地方,而且所用文件不同,所以两个文件应该同时改,我们先来看看快速上传的文件,打开editor/filemanager/upload/asp/upload.asp,在文件最后添加以下函数:
Public Function GetNewFileName()
dim ranNum
dim dtNow
dtNow=Now()
randomize
ranNum=int(90*rnd)+10
GetNewFileName=year(dtNow) & right("0" & month(dtNow),2) & right("0" & day(dtNow),2) & right("0" & hour(dtNow),2) & right("0" & minute(dtNow),2) & right("0" & second(dtNow),2) & ranNum
End Function
我们用年月日时分秒和两位随机数字来作为文件名,这样既能够分辨出文件上传时间,也不容易重名。
然后仍然是这个文件,找到:
'' Get the uploaded file name.
sFileName = oUploader.File( "NewFile" ).Name
把它改为:
'' Get the uploaded file name.
sFileName = GetNewFileName() &"."& split(oUploader.File( "NewFile" ).Name,".")
上面说的是快速上传的文件,而文件浏览中上传则是更改另外一个文件(editor/filemanager/browser/default/connectors/asp/commands.asp),其修改方法和上面那个文件一样:添加一个函数,修改一行代码。
4、在ASP源程序中引用FCKeditor编辑器
首先在asp页面顶端插入服务器端包含语句:
然后在表单里面添加以下代码:
'' 定义变量
Dim oFCKeditor
'' 类的初始化
Set oFCKeditor = New FCKeditor
'' 定义路径(默认路径:/FCKeditor/)
oFCKeditor.BasePath="FCKeditor/"
'' 定义工具条(默认为:Default)
oFCKeditor.ToolbarSet="Basic"
'' 定义宽度(默认宽度:100%)
oFCKeditor.Width="100%"
'' 定义高度(默认高度:200)
oFCKeditor.Height=350
'' 输入框的初始值
oFCKeditor.Value="这是示例文本。"
'' 创建输入框名为:content
oFCKeditor.Create "content"
这样就在表单里面创建了一个隐藏的名称为content的输入框,可以和其他表单元素一样使用,例如用以下代码取得该输入框的值:
Dim content
content=CheckStr(Request.Form("content"))
以上用CheckStr对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。