FCKEditor使用说明

liss

浏览: 825980 次
性别:
来自: 广州

最近访客更多访客>>

akacd

石不易

844700118

Agy0514

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

FckEditor

fckeditor JSP Servlet Web 浏览器

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 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中已经加入了一些常用配置的说明。<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 代码

(10) 新建display.jsp文件，这个文件比较简单，只是简单的显示从FCKeditor在线编辑器传递过来的内容，如下：<o:p></o:p>

<%=request.getParameter("testfck")%><o:p></o:p>
注意这里的getParameter(“testfck”)，这个”testfck”就是在input.jsp中设置的id。

４．FCKeditor类说明<o:p></o:p>

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

下面是用来在页面中建立编辑器的FCKEDITOR 类的说明<o:p></o:p>

(1) 构造器:<o:p></o:p>

FCKeditor(instanceName[,width,height,toolbarSet,value])<o:p></o:p>

instanceName:编辑器的唯一名称(相当于ID)<o:p></o:p>

WIDTH:宽度<o:p></o:p>

HEIGHT:高度<o:p></o:p>

toolbarSet:工具条集合的名称<o:p></o:p>

value:编辑器初始化内容<o:p></o:p>

instanceName:编辑器实例名<o:p></o:p>

width:宽度,默认值为100%<o:p></o:p>

height:高度,默认值是200<o:p></o:p>

ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default<o:p></o:p>

value:初始化编辑器的HTML 代码,默认值为空<o:p></o:p>

BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最用相对于站点根路径的表示方法,要以/结尾<o:p></o:p>

CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true<o:p></o:p>

DisplayErrors:是否显示提示错误,默为true;<o:p></o:p>

(3) 集合:<o:p></o:p>

Config[Key]=value;<o:p></o:p>

这个集合用于更改配置中某一项的值,如<o:p></o:p>

oFckeditor.Config["DefaultLanguage"]="ptbr";<o:p></o:p>

(4) 方法:<o:p></o:p>

Create()<o:p></o:p>

建立并输出编辑器<o:p></o:p>

RepaceTextArea(TextAreaName)<o:p></o:p>

用编辑器来替换对应的文本框<o:p></o:p>

5.如何配置FCKEDITOR<o:p></o:p>

FCKEDITOR 提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用JAVASCRIPT 语法.修改后,在建立编辑器时,可以使用以下语法:<o:p></o:p>

varoFCKeditor=newFCKeditor('FCKeditor1');<o:p></o:p>

oFCKeditor.Config['CustomConfigurationsPath']='/myconfig.js';<o:p></o:p>

oFCKeditor.Create();<o:p></o:p>

提醒:当你修改配置后,请清空浏览器缓存以查看效果<o:p></o:p>

配置选项:<o:p></o:p>

AutoDetectLanguage=true/false 自动检测语言<o:p></o:p>

BaseHref=""相对链接的基地址<o:p></o:p>

ContentLangDirection="ltr/rtl"默认文字方向<o:p></o:p>

ContextMenu=字符串数组,右键菜单的内容<o:p></o:p>

CustomConfigurationsPath=""自定义配置文件路径和名称<o:p></o:p>

Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容<o:p></o:p>

DefaultLanguage=""缺省语言<o:p></o:p>

EditorAreaCss=""编辑区的样式表文件<o:p></o:p>

EnableSourceXHTML=true/false 为TRUE 时,当由可视化界面切换到代码页时,把HTML 处理成XHTML<o:p></o:p>

EnableXHTML=true/false 是否允许使用XHTML 取代HTML<o:p></o:p>

FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代<o:p></o:p>

FontColors=""设置显示颜色拾取器时文字颜色列表<o:p></o:p>

FontFormats=""设置显示在文字格式列表中的命名<o:p></o:p>

FontNames=""字体列表中的字体名<o:p></o:p>

FontSizes=""字体大小中的字号列表<o:p></o:p>

ForcePasteAsPlainText=true/false 强制粘贴为纯文本<o:p></o:p>

ForceSimpleAmpersand=true/false

http://www.iteye.com/topic/54509

(2) 属性:<o:p></o:p>

分享到：

Ext Window 拖拽在IE里出错,在FF里正常 ... | JS网页加载进度条

2010-01-13 21:28
浏览 919
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论