一、准备
下载FCKeditor的最新版本2.6RC(这个是核心)FCKeditor_2.6.zip,若在Java环境中使用,还需要下载FCKeditorfor java的工具包FCKeditor.Java2.4(这里面提供了标签库和图片上传的jar)FCKeditor-2.4.zip 。
二、配置
新建工程compass,在WebRoot文件夹下新建文件夹FCKeditor(用来存放FCKeditor相关文件)
将FCKeditor_2.6包中的 edit文件夹和fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml这四个文件放到项目中的 FCKeditor 目录。
将FCKeditor-2.4.zip 包中的\web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot\WEB-INF\lib 目录
将FCKeditor-2.4.zip 包中的\src 下的 FCKeditor.tld 文件到项目的WebRoot\WEB-INF 目录
在 WebRoot 目录下新建 UserFiles 文件夹,在此文件夹下新建 Image和 Flash 两个文件夹
修改 web.xml 文件,加入以下内容
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<!--此为文件浏览路径 -->
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<!--此为文件上传路径,需要在WebRoot 目录下新建 UserFiles 文件夹 -->
<!--根据文件的类型还需要新建相关的文件夹 Image、Flash -->
<param-value>/UserFiles/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<!--此参数为是否开启上传功能,默认的是false改为true-->
<param-name>enabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<!--此参数为文件过滤,以下的文件类型都不可以上传 -->
<param-name>DeniedExtensionsFile</param-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>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- 这里要注意路径问题,不能按拷贝过来的配置,我就是在这里出错搞了很久-->
<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> 刷新一下工程,有一个文件会出错,不管它是什么错,将错误信息清除
三、应用
新建一个提交页test.jsp 文件和一个接收页 test1.jsp 文件
test.jsp代码如下:
test1.jsp 代码如下:
就可以开始测试了,尤其是上传图片、flash功能
四、优化
删除 \WebRoot\FCKeditor\editor\filemanager\browser\default\connectors目录下所有的文件,这些是用来浏览文件的,对于jsp的话是使用了 servlet 来处理,所以这些文件都是多余的
删除 \WebRoot\FCKeditor\editor\filemanager\upload目录下所有的文件
删除 WebRoot\FCKeditor\editor\lang目录下不需要的语言,如保留中文和英文还有 fcklanguagemanager.js 文件
删除 \WebRoot\FCKeditor\editor\skins目录下不需要的皮肤文件,有三种皮肤,可根据需要进行删除
删除 \WebRoot\FCKeditor\editor\dialog\fck_image目录下 fck_image_preview.html文件中的部份文字,这些文字是出现在浏览图片时在预览框中的内容
<html>
<head>
<title>TEST</title>
</head>
<body>
<%=request.getParameter("testfck")%>
</body>
</html>
java 代码
<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck" %>
<html>
<head>
<title>Test</title>
</head>
<body>
<FORM action="updateMessage.jsp">
<fck:editor id="testfck" basePath="/compass/FCKeditor/"
height="100%"
skinPath="/compass/FCKeditor/editor/skins/default/"
toolbarSet="Default"
imageBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
</fck:editor>
</FORM>
</body>
</html>
分享到:
相关推荐
- **在JSP中使用**:通过JavaScript在JSP页面上创建FCKeditor实例,设置编辑器的宽高、初始内容等属性。 - **处理文件上传**:FCKeditor可以处理文件上传,需要在服务器端配置合适的存储路径,并处理Servlet的请求...
**JSP中使用FCKEditor** FCKEditor是一款在Web应用程序中广泛使用的开源富文本编辑器,它允许用户在浏览器端进行类似Word的文本编辑。在JSP(JavaServer Pages)环境中集成FCKEditor,可以极大地提升用户界面的交互...
- 为了兼容不同的浏览器,确保在JSP页面中使用XHTML标准。 - 如果在部署时遇到路径问题,检查FCKeditor的URL是否正确,确保所有相关文件可访问。 - 考虑安全问题,对用户提交的内容进行过滤和验证,防止XSS攻击。 ...
总结来说,FCKeditor 2.6.4 的配置和集成涉及到多个步骤,包括下载必要的文件、设置环境依赖、配置属性文件、更新 `web.xml` 文件以及在 JSP 页面中使用编辑器。通过这些步骤,可以在 JSP 项目中成功部署和使用 ...
在JSP中使用FCKeditor时,你需要将这些文件放入Web应用的适当目录,通常是`/js`或`/resources`目录下。确保包含了FCKeditor的核心文件,如`fckeditor.js`,以及任何额外的插件或语言包。 接下来,我们需要在JSP页面...
在JSP中使用FCKeditor通常涉及以下步骤: - **下载和引入**:首先从官方或第三方网站下载FCKeditor的压缩包,解压后将所需文件放入项目的资源目录。 - **配置路径**:在JSP页面中设置FCKeditor的路径,确保能正确...
3. **处理表单提交**:在JSP中,你需要处理表单提交,获取FCKeditor中的内容。由于FCKeditor会将内容转化为HTML格式,所以需要通过服务器端的脚本(如Java)来解析并保存。例如,在JSP中可以使用`request....
在JSP中使用FCKeditor,首先需要将下载的`FCKeditor-2.3`压缩包解压,然后将资源文件复制到Web项目的相应目录,如`/WEB-INF/fckeditor/`。接着,在JSP页面中引入FCKeditor的JavaScript文件并创建编辑器实例: ```...
在JSP中使用FCKeditor,主要是通过JavaScript在客户端实现富文本编辑,然后将编辑好的内容通过AJAX或表单提交的方式传递到服务器端。JSP页面通常会包含FCKeditor的JavaScript库,当用户在编辑器中完成内容编辑后,...
在JSP中使用FCKeditor,可以极大地提升用户在网页表单中的编辑体验。 **二、环境准备** 在使用FCKeditor之前,需要确保开发环境已经搭建好,包括: 1. **JDK**:Java Development Kit,用于编译和运行Java程序。 2....
当用户在FCKeditor中选择上传图片时,FCKeditor会向指定的`FileBrowserUploadUrl`发起POST请求,服务器端的Servlet接收到请求后,读取上传的文件并保存到服务器的特定目录。 **安全与优化** 在实际应用中,需要考虑...
本文将详细介绍如何在JSP中使用FCKeditor,并涵盖其基本调用方式、自定义控件使用、基本属性设置以及配置方法等内容。 #### 二、FCKeditor 的调用方式 FCKeditor 在JSP中的调用主要分为两种方式: ##### 方法一:...
完成以上步骤后,FCKeditor就能在JSP页面中正常使用了,用户可以通过富文本编辑器进行文字编辑、插入图片、链接等操作。而文件上传和目录浏览功能,也会根据我们在web.xml中的配置正常工作。 值得注意的是,实际...
在JSP中使用FCKEditor,你需要遵循以下步骤: 1. **下载与解压**: 首先,你需要从官方网站或GitHub等开源仓库下载FCKeditor 2.6的源码包,解压缩后得到FCKeditor的文件夹,里面包含了所有必要的JavaScript、CSS和...
在JSP中使用FCKeditor,首先需要将FCKeditor的资源文件下载并解压到项目目录下。在提供的信息中,"TestFCKeditor"可能是解压后的文件夹,包含了FCKeditor的所有必要文件,包括JavaScript库、CSS样式表、语言文件等。...
在JSP页面中集成FCKeditor,可以提升用户在后台管理系统中的编辑体验。 **1. FCKeditor简介** FCKeditor是由Fernando Gouveia开发的一款JavaScript富文本编辑器,它允许用户在浏览器端进行类似Word的文本编辑操作。...
在JSP环境中配置和使用FCKeditor涉及到一系列步骤,这个开源项目旨在提供一个强大的在线文本编辑器,使得Web应用程序能够具备类似MS Word的编辑功能。FCKeditor支持多种服务器端语言,包括Java,并且兼容IE 5+、...
综上所述,JSP程序中使用FCKeditor编辑器涉及到前端JavaScript的使用、后端数据的处理、安全性的考量以及可能的自定义扩展。理解并掌握这些知识点,将有助于在实际开发中更好地利用FCKeditor提升用户体验。
在JSP环境中集成FCKeditor2.3可以帮助开发者创建具有WYSIWYG(所见即所得)编辑能力的网页表单,提升用户体验。以下将详细介绍如何在JSP中配置FCKeditor2.3。 首先,我们需要下载FCKeditor的2.3.2版本,这个版本...
### 在JSP环境中配置使用FCKEditor #### 一、FCKEditor简介 FCKeditor是一个源自由项目,可在sourceforge.net上找到,其主要功能是实现在线网页编辑器的功能,使得Web应用程序能够具备类似MS Word的强大编辑能力。...