Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1665130
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665131
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665132
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665133
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665134
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665135
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665136
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665137
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665138
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665129
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665140
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665141
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665142
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665143
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665144
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665145
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665146
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665147
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665148
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665149
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665150
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665151
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665152
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665153
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665144
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665155
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665156
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665157
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665158
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665159
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665160
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665161
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665162
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665163
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665164
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665165
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665166
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665167
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665168
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665159
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665170
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665171
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665172
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665173
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665174
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665175
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665176
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665177
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665178
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665179
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665180
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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页面顶端插入服务器端包含语句:


自我总结,FCKeditor配置方法-shark888-ChinaUnix博客
  • 博客访问: 1665181
  • 博文数量: 585
  • 博客积分: 14610
  • 博客等级: 上将
  • 技术积分: 7402
  • 用 户 组: 普通用户
  • 注册时间: 2008-05-15 10:52
文章存档

2013年(5)

2012年(214)

2011年(56)

2010年(66)

2009年(44)

2008年(200)

分类:

2008-05-22 03:28:50


新一篇: FCKeditor配置.txt

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里添加如下代码

代码
  1. <servlet>    
  2.   
  3.         <servlet-name>Connectorservlet-name>    
  4.   
  5.         <servlet-class>com.fredck.FCKeditor.connector.ConnectorServletservlet-class>    
  6.   
  7.         <init-param>    
  8.   
  9.             <param-name>baseDirparam-name>    
  10.   
  11.                 
  12.   
  13.             <param-value>/UserFiles/param-value>    
  14.   
  15.         init-param>    
  16.   
  17.         <init-param>    
  18.   
  19.             <param-name>debugparam-name>    
  20.   
  21.             <param-value>trueparam-value>    
  22.   
  23.         init-param>    
  24.   
  25.         <load-on-startup>1load-on-startup>    
  26.   
  27.     servlet>    
  28.   
  29.      
  30.   
  31.     <servlet>    
  32.   
  33.         <servlet-name>SimpleUploaderservlet-name>    
  34.   
  35.         <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServletservlet-class>    
  36.   
  37.         <init-param>    
  38.   
  39.             <param-name>baseDirparam-name>    
  40.   
  41.                 
  42.   
  43.                 
  44.   
  45.             <param-value>/UserFiles/param-value>    
  46.   
  47.         init-param>    
  48.   
  49.         <init-param>    
  50.   
  51.             <param-name>debugparam-name>    
  52.   
  53.             <param-value>trueparam-value>    
  54.   
  55.         init-param>    
  56.   
  57.         <init-param>    
  58.   
  59.                 
  60.   
  61.             <param-name>enabledparam-name>    
  62.   
  63.             <param-value>trueparam-value>    
  64.   
  65.         init-param>    
  66.   
  67.         <init-param>    
  68.   
  69.             <param-name>AllowedExtensionsFileparam-name>    
  70.   
  71.             <param-value>param-value>    
  72.   
  73.         init-param>    
  74.   
  75.         <init-param>    
  76.   
  77.                 
  78.   
  79.             <param-name>DeniedExtensionsFileparam-name>    
  80.   
  81.             <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgiparam-value>    
  82.   
  83.         init-param>    
  84.   
  85.         <init-param>    
  86.   
  87.             <param-name>AllowedExtensionsImageparam-name>    
  88.   
  89.             <param-value>jpg|gif|jpeg|png|bmpparam-value>    
  90.   
  91.         init-param>    
  92.   
  93.         <init-param>    
  94.   
  95.             <param-name>DeniedExtensionsImageparam-name>    
  96.   
  97.             <param-value>param-value>    
  98.   
  99.         init-param>    
  100.   
  101.         <init-param>    
  102.   
  103.             <param-name>AllowedExtensionsFlashparam-name>    
  104.   
  105.             <param-value>swf|flaparam-value>    
  106.   
  107.         init-param>    
  108.   
  109.         <init-param>    
  110.   
  111.             <param-name>DeniedExtensionsFlashparam-name>    
  112.   
  113.             <param-value>param-value>    
  114.   
  115.         init-param>    
  116.   
  117.         <load-on-startup>1load-on-startup>    
  118.   
  119.     servlet>    
  120.   
  121.      
  122.   
  123.   <servlet-mapping>    
  124.   
  125.     <servlet-name>Connectorservlet-name>    
  126.   
  127.     <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connectorurl-pattern>    
  128.   
  129.   servlet-mapping>    
  130.   
  131.      
  132.   
  133.   <servlet-mapping>    
  134.   
  135.     <servlet-name>SimpleUploaderservlet-name>    
  136.   
  137.     <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploaderurl-pattern>    
  138.   
  139.   servlet-mapping>    

5.在需要调用的页面

先导入:

代码
  1. <%@ taglib uri="" prefix="FCK" %>   

并在需要调用的地方输入:

代码
  1. <FCK:editor id="content" width="100%" height="320" fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"    
  2.          
  3.                                 imageBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  4.       
  5.                                 linkBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  6.       
  7.                                 flashBrowserURL="/hakula/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  8.       
  9.                                 imageUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  10.       
  11.                                 linkUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.       
  13.                                 flashUploadURL="/hakula/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">    
  14.                     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官司方网址:

FCKeditor在线DEMO

FCKeditor下载直址: (该版本为2.3.2),最新版已经是2.4了。

2.FCKeditor.java介绍

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

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

下载地址: (最近版本为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
=""
    xmlns:xsi
=""
    xsi:schemaLocation
=" /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的各个属性,最后调用FCKeditorReplaceTextarea()替换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/"


我的文件目录在下面,就照以上设置。如果在本地测试这个网站在虚拟目录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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68285) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68284) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68283) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68282) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68281) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68280) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68279) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68278) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68277) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68276) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68275) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68274) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68273) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68272) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68271) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68270) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68269) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68268) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68267) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68266) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68265) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68264) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68263) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68262) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68261) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68260) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68259) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68258) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68257) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68256) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68255) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68254) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68253) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68252) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68251) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68250) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68249) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68248) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68247) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68246) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68245) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68244) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68243) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68242) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68241) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68240) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68239) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68238) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68237) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68236) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68235) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!



然后在表单里面添加以下代码:

'' 定义变量
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对输入数据进行了检测,原始数据如果包含单引号之类的,那么更新数据库会出错。


阅读(68234) | 评论(1) | 转发(0) |
0

上一篇:FCKeditor使用示例

下一篇:Log4j 学习笔记

给主人留下些什么吧!~~

chinaunix网友2008-06-10 14:40:46

很好!