FckEditor

最新推荐文章于 2023-04-27 15:27:27 发布

fyona

最新推荐文章于 2023-04-27 15:27:27 发布

阅读量94

点赞数

分类专栏：应用文章标签： fckeditor JSP Servlet Web 浏览器

本文链接：https://blog.csdn.net/fyona/article/details/83394994

版权

应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 (该版本为 <st1:chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">2.3.2 </st1:chsdate>)，最新版已经是2.4了。

2.FCKeditor.java 介绍 <o:p></o:p>

FCKeditor 不能直接在 JSP 项目中使用，需要 FCKeditor.java 库的支持。

FCKeditor.java 是针对对 JAVA 中使用 FCKeditor 由 Simone Chiaretta 开发的 FCKeditor 的 JAVA 实现。

FCKeditor.java 下载地址： http://www.fckeditor.net/download ( 最近版本为 2.3)

<o:p> </o:p>

3. 在 JAVA 项目中使用 FCKeditor 在线编辑器 <o:p></o:p>

开发环境： JDK5.0 ＋  Eclipse<st1:chsdate year="1899" month="12" day="30" islunardate="False" isrocdate="False" w:st="on">3.2.1</st1:chsdate> + WTP1.5.2

（1）新建一个 WEB 工程：

（2） 解压 FCKeditor_<st1:chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">2.3.2</st1:chsdate>.zip 包，将其中的 edit 文件夹到项目中的 WebRoot 目录 <o:p></o:p>

（3） 解压 FCKeditor_<st1:chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">2.3.2</st1:chsdate>.zip 包，将其中的 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夹到项目中的 WebRoot 目录 <o:p></o:p>

（4） 解压 FCKeditor.java-2.3.zip 包，将其中的 \web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot\WEB-INF\lib 目录 <o:p></o:p>

（5） 解压 FCKeditor.java-2.3.zip 包，将其中的 \src 下的 FCKeditor.tld 文件到项目的 WebContent \WEB-INF 目录 <o:p></o:p>

（6） 删除 WebContent \edit 目录下的 _source 文件夹（以“_”开始的文件，在项目中无用） <o:p></o:p>

完成后的目录结构下如：

说明：图中的input.jsp和display.jsp两个是我写的测试集成FCKeditor的JSP文件。<o:p></o:p>

UserFiles是FCKeditor上传文件的文件夹。<o:p></o:p>

修改WebContent/WEB-INF/web.xml文件，加入FCKeditor的配置信息，如下：<o:p></o:p>

xml 代码

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 > FCKeditor display-name >
< 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 >
< param-value > /UserFiles/ param-value >
init-param >
< init-param >
< param-name > debug param-name >
< param-value > true param-value >
init-param >
< init-param >
< param-name > enabled param-name >
< param-value > false 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 >
/editor/filemanager/browser/default/connectors/jsp/connector
url-pattern >
servlet-mapping >
< servlet-mapping >
< servlet-name > SimpleUploader servlet-name >
< url-pattern >
/editor/filemanager/upload/simpleuploader
url-pattern >
servlet-mapping >
web-app >

注：web.xml中已经加入了一些常用配置的说明。<o:p></o:p>

新建input.jsp文件，内容如下：(注意内容中的 ” testfck ” 这个id)

（上面不能直接帖HTML的代码，所以只能帖一个图片上来，要是有知道如何帖HTML代码的朋友，请告诉我一下，谢谢）

说明：在 JSP 中集成 FCKeditor 有以下几种方式：

（1） JavaScript 集成：

如上面内容所示，通过新建一个 FCKeditor 对象，然后调用该对象的设置方法来设置 FCKeditor 的各个属性，最后调用 FCKeditor 的 ReplaceTextarea() 替换 HTML 页面中的 < textarea> 标签。另外 FCKeditor 也可以调用它的 create() 方法来直接在 JSP 嵌入 FCKeditor 编辑器。 <o:p></o:p>

注：注意上面的 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 目录 ) <o:p></o:p>

首先在 JSP 中加入 FCKeditor 标签： <o:p></o:p>

<%@ taglib uri=”/WEB-INF/FCKeditor.tld” prefix=”fck” %>

然后在 JSP 页面中加入如下代码，集成 FCKeditor 编辑器：

js 代码

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