FCKeditor学习笔记

huibin

浏览: 757188 次
性别:
来自: 郑州

最近访客更多访客>>

y6cn

allen900625

dameimm

cntip2010

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

FCKeditor

fckeditor 应用服务器配置管理 CSS 浏览器

一、自我认识：
1、类似world的编辑器
2、所见即所得的编辑器

二、资料下载：
1、官方网站：http://www.fckeditor.net/
2、Docs文档页面
3、Download页面
4、FCKeditor2.***.zip和FCKeditor.Java
需要下载fckeditor-java-2.5-bin.zip
演示工程：fckeditor-java-demo-2.5.war
5、在项目中要用到的是：FCKeditor2.***.zip和fckeditor-java-2.5-bin.zip
6、例子：default.html(可以参看它的使用方法)
三、安装使用与配置（主要的两种方法）：
1、解压FCKeditor2.***.zip，将其下面的fckeditor文件夹拷贝到工程项目的WebRoot下边。
2、FCKeditor的调用方式：
第一种调用方式：通过javascript调用
可以参考：
   1、附带的例子（FCKeditor_2.***/fckeditor/_samples/default.html）右键查看源文件
   2、文档
方法一（创建并且输出一个编辑器）：
   Step1:在网页<head></head>中加入
   //引入js文件
   <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
   Step2：创建FCKeditor对象
   <script type="text/javascript">
   //新建一个fckeditor的实例，它的名字叫FCKeditor1
    var oFCKeditor =new FCKeditor("FCKeditor1");
   //设置编辑器的基准路径(必须以"/"结尾)
   //（注意默认的"/fckeditor/"中的第一个“/”指的是当前站点，即：http://localhost:8080/fckeditor)
   //所以我们必须改一下，在前边加上我们的工程名，例如“/myPro/fckeditor/”）
    oFCKeditor.BasePath="/fckeditor/";
   //创建并且输出一个编辑器
    oFCKeditor.Create();
   </script>
方法二（用编辑器替换一个textarea）：
   Step1:在网页<head></head>中加入
   <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
   并且加入onload方法
   <script type="text/javascript">
   window.onload=function()
   {
   //此处的MyTextarea必须和boday中的textarea的name属性相同
   var oFCKeditor = new FCKeditor('MyTextarea');
   oFCKeditor.BasePath="/fckeditor/";
   oFCKeditor.ReplaceTextarea();
   }
   </script>
   step2:在boday中加入要替换的textarea元素
   <textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> inital value.</textarea>
3、FCKeditor对象的属性
属性名描述     默认值
Width 宽度     100%
Height 高度     200
Value 编辑器初始化内容   （空字符串）
ToolbarSet 工具条集合的名称
    （内置有Default和Basic，也可自定制） Default

BasePath 编辑器的基准路径   /fckeditor/
4、构造器：
var FCKeditor = function(instanceName, width, height, toobarSet, value)
* 其中 instanceName 为编辑器输出的texteara元素的name属性的值，必须指定
*参数会赋值给同名属性（可以指定也可不指定）

第二种调用方式：在jsp中通过自定义标签调用
可以参考：
1、演示工程fckeditor-java-demo-2.5.war（找发布后对应的jsp文件）
2、fckeditor-java-2.5的文档（site文件下）
step1：
   解压fckeditor-java-2.5-bin.zip
   将提供的jar包拷贝到工程的WEB-INF/lib目录里
   (fckeditor-java-core-2.5.jar和lib文件里的jar包（commons-fileupload-1.2.1，commons-io-1.3.2，slf4j-api-1.5.8，imageinfo-1.9）
   可以在演示工程里将slf4j-simple-1.5.8.jar拷贝过来)
step2：
   //引入自定义标签
   <%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>
step3：
   //注意此处的value属性必须有值否则会抛出空指针异常，所以就value=" "可以了，不能是空字符串，可以加个空格
   <FCK:editor instanceName="myEditor" basePath="/fckeditor" value="this is content"></FCK:editor>

jsp自定义标签调用注意点：
   1、BasePath以“/”开头，并且这个“/”代表当前工程的路径
   2、一定要设置value属性的值，并且值不能是空字符串

四：配置FCKeditor
1、配置文件的使用（feckeditor/fckconfig.js）---主配置文件（所有可配置的项）
2、修改配置其实就是修改FCKConfig这个对象的属性，一般情况下我们不这样做，我们采用一个额外的配置文件来覆盖默认的配置

步骤：
1、在webroot下新建一个js文件（myconfig.js）
//是否自动检测语言
FCKConfig.AutoDetectLanguage=false;
//默认语言为英文
FCKConfig.DefaultLanguage="en";

告诉编辑器使用我们自己的配置文件：
方法一：在fckcofig.js中指定(注意我们把myconfig.js放到了Webroot下，所以指定路径为)
FCKConfig.CustomConfigurationsPath='/mypro/myconfig.js';

方法二：在页面中调用FCKeditor时指定配置
var oFCKeditor = new FCKeditor("FCKeditor1");
oFCKeditor.Config["CustomConfigurationsPath"]="/mypro/myconfig.js";
oFCKeditor.Create();

总结：配置FCKeditor有三种方法：
第一种：直接修改主配置文件fckconfig.js文件
第二种：定义单独的配置文件（只需要写需要修改的配置项）
第三种：在页面的调用代码中对FCKeditor的实例进行配置

配置加载顺序：
1、加载主配置文件fckconfig.js
2、加载自定义的配置文件（如果有），覆盖相同的配置项
3、使用对实例的配置覆盖相同的配置项（只对当前实例有效）

注意事项：
1、系统会自动侦测并运用适当的界面语言（默认，可以修改）
2、无论什么情况都不能删除主配置文件fckconfig.js
3、修改配置后要清空浏览器的缓存，以免影响结果（或访问时强制刷新也可以）
*在IE中 Ctrl+F5 （快捷键）是强制刷新
*在FireFox中 Shift+Ctrl+R（快捷键）是强制刷新
五、FCKeditor一般需要修改的配置
   1、自定义ToolbarSet，去掉一些不需要的功能
2、加上几种常用的字体
3、修改“回车”和“Shift+回车”的换行行为
     *它的默认回车是一个段落，而不是一行。而“Shift+回车”才是真正的换行。
     *所以我们要把这两个操作功能调换过来。
4、修改编辑区的样式文件
5、更换表情图片（默认的太少）

问题一：如何去掉一些不需要的功能呢？
    首先：我们要在配置文件中定义个自定义的工具集。只包含有对外提供的功能。
    其次：在生成FCKeditor实例的时候指定要使用这个工具集。
    可以参考文档：
    fckconfig.js中默认配置为：

FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;

其中每個‘**’引起來的每个短语都對應視圖中的一個功能。‘-’表示|分隔符，‘/’表示回車
编辑器有三行，因为有两个‘/’所以就分成了三行。

所以我们就要把上边的代码定义到我们的自己定义的配置文件中，让它覆盖主配置文件中相应的属性。
   例如可以在myfckconfig.js中这样写：

FCKConfig.ToolbarSets["zhangxiangrong"] = [
['Source','DocProps','-'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;

    注意：这些其实就是一个数组，所以我们修改时不能破坏它的结构。

     然后我们再调用FCKeditor的时候可以指定工具集：
     要指定我们自己的配置文件。
     可以在主配置文件(fckconfig.js)中指定：
     FCKConfig.CustomConfigurationsPath='/mypro/myfckconfig.js';
     在调用时指定我们自定义的工具集：
     var oFCKeditor =new FCKeditor("myEditor");
     oFCKeditor.ToolbarSet("zhangxiangrong");//我们自定义的工具集

问题二：如何加上常用的字体？

看主配置文件fckconfig.js文件中的属性：
FCKConfig.FontNames
所以我们就可以在指定的配置文件中修改它，（即让它覆盖主配置文件中相应属性）
在我们指定的配置文件（myfckconfig.js）中加入：
FCKConfig.FontNames = '宋体;楷体_GB2312;黑体;隶书;Times New Roman;Aral;'

注意在保存时会出现错误：无法保存（因为含有中文，而它的默认编码是ISO-8859-1）;
所以我们要把它的编码格式修改一下，注意只能修改成"UTF-8"这种编码格式。
然后我们就可以编辑想要的字体了。

问题三：如何修改“Enter”和“shif+Enter”的换行功能呢？

默认是：“Enter”-------------->一个段落
默认是：“shift+Enter”----------->换行
一般这样不符合我们的实际应用，所以要将其功能调换。

也在fckconfig.js中查看默认的项设置：
FCKConfig.EnterMode = 'p';       //可以设置的值：p | div | br

FCKConfig.ShiftEnterMode = 'br'; //可以设置的值：P | div | br

然后把这两个项拷贝粘贴到我们指定的配置文件中：

修改为：

FCKConfig.EnterMode = 'br';       //可以设置的值：p | div | br
FCKConfig.ShiftEnterMode = 'p'; //可以设置的值：P | div | br

这样我们就在编辑器中编辑时按下“Enter”就会是换行，“shift+Enter”就是一个段落

问题三：如何修改编辑区样式文件呢？

这个样式文件也是在主配置文件（fckconfig.js）中指定的：
默认指定为：
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css';

注意这里的FCKConfig.BasePath和我们的FCKeditor.BasePath是不一样的。
这里我们可以用alert(FCKConfig.BasePath)来看它指的是什么？（它指到fckeditor/editor这个文件夹）
找到这个样式文件我们可以把我们的样式加进去。这样就可以了。

问题四：如何更换表情图片？

默认的表情图片不够丰富，所以我们可以修改成更多丰富的表情。
也是在主配置文件(fckconfig.js)中找到相应的配置项，复制到我们指定的配置文件中进行修改。
默认为：
//表情图片所在的文件夹路径
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
//要显示文件夹中那些图片
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
//每行显示几个图片
FCKConfig.SmileyColumns = 8 ;
//显示表情图片的宽度和高度
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;

我们可以把我们自己的表情图片拷贝到表情图片的文件中，并且在 FCKConfig.SmileyImages数组中加入名称。

注意在这其中如果显示的格式不好的话，可以查看表情图片的源文件，进行修改：
它的默认是不显示滚动条的，而且我们设置的宽度和高度不起作用，所以我们就得在源文件中修改成合适我们的。

我们可以点击（窗口）右键---》属性 --看到它的具体位置，找到它打开修改。
（应该是fckeditor\editor\dialog\fck_smiley.html）
在他处理onload事件中有这么一句代码：
window.onload = function ()
{
// First of all, translate the dialog box texts
oEditor.FCKLanguageManager.TranslatePage(document) ;
//注意这个方法是FCKeditor自己定义的（作用：根据当前的内容调整合适的窗口大小）
//我们就把这行给注释掉，负责影响我们自定义窗口大小
dialog.SetAutoSize( true ) ;
}
将上边的 dialog.SetAutoSize( true ) ;代码注释掉。
但我们的表情图片窗口还是没滚动条，如果图片过多，就显示不完。
继续查看它的源文件：
在<body>中它设置了<body style="overflow: hidden">这种样式，因此我们就得查查style="overflow: hidden"是什么意思呢？
查询CSS手册可知道了：（CSS手册中这样解释）

overflow

说明：检索或设置对象的内容超过其指定高度及宽度时如何管理内容。

语法：
overflow:visible |auto |hidden |scroll

取值：
visible: 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的window或frame的尺寸裁切。并且clip属性设置将失效。
auto：在必需时对象内容才会被裁切或显示滚动条
hidden：不显示超过对象尺寸的内容
scroll：总是显示滚动条

看完手册，我们明白了，就应该把 <body style="overflow: hidden">修改成：<body style="overflow: auto">

问题五：最后一个问题：我们的自定义配置文件的路径问题！
因为我们的应用程序的发布目录是不确定的。
所以我们在主配置文件中不能这么写：
    FCKConfig.CustomConfigurationsPath='/mypro/myfckconfig.js';
解决方法一：
那么我们可以把自定义配置文件放到fckeditor/editor/下边：
这样的话我们知道它有个BasePath是指到这个目录的。所以可以这样指定：
FCKConfig.CustomConfigurationsPath = FCKConfig.BasePath + "myfckconfig.js";
解决方法二（推荐）：
另外我们也可以把自定义配置文件放到fckeditor这个文件夹下面：
它还有一个属性可以指定到fckeditor这个文件夹，那么我们就可以这样指定：
FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + "myfckconfig.js";

总结注意点：
           1、要使用UTF-8编码保存配置文件。
           2、FCKConfig.BasePath和调用fckeditor时指定的BasePath（FCKeditor.BasePath）不是同一个，其值也不一样。

六、文件上传的配置和使用
参考文档：fckeditor-java-2.5中的文档，（connector_servlet）
文档列出了配置步骤（总共分两步）：

第一步：
      在我们的web.xml中配置一个servlet，并且把它映射到指定的url上边。
      <web-app version="2.4">
    ...
    <servlet>
      <servlet-name>ConnectorServlet</servlet-name>
        <servlet-class>
          net.fckeditor.connector.ConnectorServlet
      </servlet-class>
      <load-on-startup>1</load-on-startup>
    </servlet>
    ...
    <servlet-mapping>
      <servlet-name>ConnectorServlet</servlet-name>
      <url-pattern>
        /fckeditor/editor/filemanager/connectors/*
      </url-pattern>
    </servlet-mapping>
    ...
</web-app>

第二步：
      新建一个fckeditor.properties配置文件，并且把它放到classpath路径下边，里边要有如下内容：
      connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
      《在eclipse里classpath即就是把fckeditor.properties放到src目录下》
      注意：此名称和路径都是固定的。

至此，我们就可以上传图片啦！！！

七、使用文件上传：遇到中文文件名乱码的问题
1、上传文件名为中文的文件时会出现乱码
     思路：我们要首先明白是在服务器端保存的是乱码还是在网页中显示的时候是乱码。
        首先我们可以进入到发布目录里，查看文件名是否为乱码？
     结果：在服务器端的图片中文名字是乱码（因此确定是在服务器端保存时成了乱码）
     而不是在显示的时候出现的乱码。

     造成乱码原因分析：
        在这个过程中，有两个环节可能造成乱码我们要分析一下：
        第一个环节：因为文件上传要以post方式提交给服务器，而在提交表单的时候，它是按照当前页面显示的编码对其内容进行编码，
          如果说这个编码不支持中文（如iso-8859-1），那么就会产生乱码。
        第二个环节：如果发送的编码是对的，而我们在服务器处理的时候没有以正确的编码格式进行解码，这也能造成乱码。

        查找原因：
        第一个环节：我们可以点击右键属性来查看对应那个页面（注意点击位置要正确，因为一个页面可能是有多个页面组成）
        fckeditor\editor\filemanager\browser\default\frmupload.html(源文件)
        其中是这样的：
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        说明这个环节没有造成乱码。（到此我们只能找服务器端的处理程序---进入第二个环节）
        第二个环节：我们要知道它提交到什么地方呢？（就提到了我们在web.xml中配置的那个servlet里边了）
        即：net.fckeditor.connector.ConnectorServlet这个servlet里了。
        这里我们可以关联上其源代码，进行查看它的doPost方法就可以了。
        可以看到：
              他在出来请求时没有指定编码格式：
              部分源代码：
              List<FileItem> items=upload.parseRequest(request);
              正确做法是：我们在调用这个方法对request解析之前应该设置一下编码才对。
              所以我就把这个文件的代码复制到自己工程的类里边。
              例如：我新件一个类： ConnectorServlet放到了com.zxr.fckeditor包下了
              这个类就是我们自己的类了，我们可以对其修改：我们要修改的在doPost方法里，解析request之前：
              加上一行设置编码的语句：

                upload.setHeaderEncoding("UTF-8");//指定成和页面一致的格式

              这样再在web.xml里修改配置：
              <servlet-class>
                    net.fckeditor.connector.ConnectorServlet
              </servlet-class>
              改成：
              <servlet-class>
                    com.zxr.fckeditor.ConnectorServlet
              </servlet-class>
       这样，fckeditor就用我们自己的这个类来进行处理了。

       到此：文件名中文乱码问题彻底解决了。其中的思路和分析方法值得发扬。


八、使用文件上传：创建中文目录名时出现乱码问题
     利用文件上传我们可以点击--->>Create New Folder创建文件夹
     创建的文件夹都放到了服务器端的目录里。

     思路同上：还是找到服务器端网页源文件：fckeditor\editor\filemanager\browser\default\frmcreatefolder.html(源文件)
              网页编码格式为：
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              说明这里没有问题。
              在看后边，是否是以表单的形式提交的？可以看到如下代码段：
<body>
<table class="fullHeight" cellSpacing="0" cellPadding="0" width="100%" border="0">
   <tr>
    <td>
     <button type="button" style="WIDTH: 100%" onclick="CreateFolder();">
      <table cellSpacing="0" cellPadding="0" border="0">
       <tr>
        <td><img height="16" alt="" src="images/Folder.gif" width="16"></td>
        <td> </td>
        <td nowrap>Create New Folder</td>
       </tr>
      </table>
     </button>
    </td>
   </tr>
</table>
</body>
可以看出，也不是以表单提交的，但发现有以onclick事件：“onclick="CreateFolder();”，估计就在这个方法里向服务器发送了目录文件名
源码如下：
function CreateFolder()
{
var sFolderName ;

while ( true )
{
//它通过显示一个带有输入框的提示对话框，来获取要创建的文件夹的名字
sFolderName = prompt( 'Type the name of the new folder:', '' ) ;

if ( sFolderName == null )
   return ;
else if ( sFolderName.length == 0 )
   alert( 'Please type the folder name' ) ;
else
   break ;
}

oConnector.SendCommand( 'CreateFolder', 'NewFolderName=' + encodeURIComponent( sFolderName) , CreateFolderCallBack ) ;
}
经过一番追究，还是到了我们的servlet里，这回是它的doGet方法里
应该是取文件夹名字时的转码问题：
我们自己的servlet里找到doGet方法中的如下语句代码：
String newFolderStr=UtilsFile.sanitizeFolderName(request.getParameter("NewFolderName"));
这行代码取出文件夹的名字，没有对中文进行处理而造成的乱码结果，因此我们可以对其进行处理：
修改此行代码为：
对于通过get方式传递的中文参数我们一般如下处理：
String folderStr = request.getParameter("NewFolderName");
folderStr = new String(folderStr.getBytes("ISO-8859-1"),"UTF-8");
String newFolderStr=UtilsFile.sanitizeFolderName(folderStr);

这样我么就解决了上传文件名为中文的文件夹名称乱码的问题啦！！！！

九、使用文件上传：引用中文名的图片不能正常显示问题？
现象：引用中文名的图片时，显示X，（即不能正常显示）
第一种解决办法（不宜使用）：
     需要修改Tomcat连接器的配置：因为连接器默认的是以ISO-8859-1解码的。
     修改URIEnoding的方法：
     停掉tomcat服务器，进入D:\Program Files\Apache Software Foundation\Tomcat 6.0\conf下
     即tomcat的安装位置
     找到server.xml配置文件，打开
     因为我用的是8080端口，所以就找到这段配置：
   <Connector port="8080" protocol="HTTP/1.1"
              connectionTimeout="20000"
              redirectPort="8443"
              
              URIEncoding="UTF-8"
              />
保存，重新启动tomcat服务器，就可以正常显示了。
建议：此方法最好不要使用，因为它可能会对使用get方法传递的中文参数产生影响，造成乱码。

第二种解决办法：
        避免出现引用中文名字图片的情况。
        我们可以在它保存文件的时候，让其保存成非中文名称。
        在我们的servlet中doPost方法中找到保存文件的代码段：

        FileItem uplFile = items.get(0);
        String rawName = UtilsFile.sanitizeFileName(uplFile.getName());
        String filename=FilenameUtils.getName(rawName);
        String baseName=FilenameUtils.removeExtension(filename);
        //它的扩展名
        String extension=FilenameUtils.getExtension(filename);

        //在这里我们可以把它的文件名改了（即把名字给换掉，换成一个包含中文的字符串，我们可以使用UUID）
        //这样我在它真正保存文件名之前，把名字替换成了UUID。进而达到了避免中文名的问题。
           filename=UUID.randomUUID().toString()+"."+extension;
        .......
    建议：推荐使用此种方法来进行处理，而不建议使用第一中方法。

十、控制允许上传的文件类型
为了安全我们可以控制允许上传的文件的类型。

FCKeditor把上传的文件分为四类：
     1、File
     2、Image
     3、Flash
     4、Media
参考文档，对连接器（Connector）的配置。
The integration library supports file, flash, image, and media resource types. Replace type name in the property name with "file", "flash", "image", or "media".

Define either an allowed or denied list. If an allowed list is pre-defined overwrite it with an empty list and define your denied list as you wish.

控制上传文件的类型有两种设置的方式：
1、设置允许上传的文件的扩展名的列表
2、设置禁止上传的文件的扩展名的列表
注意：以上两种方式只能二选一，不能同时使用。他的默认是第一种方式。

设置允许上传的文件类型

文件分类                客户端验证配置（fckconfig.js）               服务器端验证配置（fckeditor.properties）
File                   FCKConfig.LinkUploadAllowedExtesions         connector.resourceType.file.extensions.allowed
Image                  FCKConfig.ImageUploadAllowedExtensions       connector.resourceType.image.extensions.allowed
Flash                  FCKConfig.FlashUploadAllowedExtensions       connector.resourceType.flash.extensions.allowed
Media                              无对应配置                       connector.resourceType.media.extensions.allowed

注意事项：修改时要注意客户端的配置要和服务器端的配置一致。

我们可以找到fckeditor-java-core-2.5.jar下的net.fckeditor.handlers下的默认配置文件default.properties，拷贝其中要修改的项即可
粘贴到我们的fckeditor.properties文件中，我们要覆盖它的默认配置。

举个小例子：例如我们可以加入一个扩展名为zxr的图片（Image）文件
做法：
     在fckeditor.properties文件中加入：
           connector.resourceType.image.extensions.allowed = bmp|jpg|gif|png|jpeg|zxr
这是我们修改了服务器端的配置文件，我们还要修改客户端的配置文件（即我们指定的配置文件myfckconfig.js）
   我们还得去fckconfig.js（主配置文件）中去中找相应的项（即要被指定配置文件覆盖的项）
即：
      FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp)$" ; // empty for all
将它拷贝到指定配置文件（myfckconfig.js）中。修改为：
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp|zxr)$" ;

重新发布，启动服务器，就可以上传Image，扩展名为zxr的文件了。

这样我们就可以控制允许上传文件的类型了。

十一、控制允许上传文件的大小
在实际应用中，我们当然要对允许上传的文件大小进行控制，而FCKeditor-java并没有提供相关的设置。
此时，我们就要修改它的代码，以便符合我们的要求。
首先，琢磨一下它的默认处理机制：

上传文件的页面（浏览器客户端）                      ConnectorServlet(服务器端)
    ------------                                    -------------------------------------
    | 表单    | ---------------提交-------------> |处理上传的文件                       |
    |          |                                   |(不同的处理结果对应不同的响应信息)   |
    -----------                                     -------------------------------------
                                                              |
                                                              |
                                                              |
                                           (调用回调函数，并且传递错误码)
                  ------------------                          |
                 |OnUploadCompleted | <----------------------|
                 |   回调函数       |
                  ------------------
                               |
                               |
                         (对错误码进行处理)
                               |
                               |
    -------------              |
   | 打印错误码对 | <---------|
   | 应的错误信息 |
    ------------
了解了它的基本机制后，我们就可以修改它的代码了，要修改两处：
1、在服务器端的servlet中，在保存文件之前先判断一下文件大小，如果超出限制，就传递一个自定义的错误码，并且不再保存文件。
2、修改对应的页面中的回调函数，增加对这个自定义错误码的处理。

打开处理文件上传的servlet（我们在web.xml中配置的那个servlet）,找它的doPost方法-->找到它保存文件的那段代码。

部分代码：
..............
//如果这个文件的扩展名不允许上传
if(!ExtensionsHandler.isAllowed(resourceType, extension)){
    ur=new UploadResource(UploadResponse.SC_INVALID_EXTENSION);
}
/*------在这里我们要写一个分支---------*/
//如果文件大小超过限制
else if(uplFile.getSize()>10*1024){
//传递一个自定义错误码（注意要使用一个没有被使用的错误码）
   ur=new UploadResponse(204);
}
/* --------- 自加代码------        */
//如果不存在以上情况 ,则保存文件
else｛
       File pathToSave = new File(currentDir, filename);
       .............
｝

到此我们服务器端修改好了，接着修改客户端，增加对此自定义错误码的处理。
fckeditor\editor\dialog\fck_image目录下有个fck_image.js文件
首先将它的编码改为UTF-8，方便编辑中文。
在此文件中找到回调函数：function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
里边代码段（可以在这里看那些错误码没使用）：
switch ( errorNumber )
{
case 0 : // No errors
   alert( 'Your file has been successfully uploaded' ) ;
   break ;
case 1 : // Custom error
   alert( customMsg ) ;
   return ;
case 101 : // Custom warning
   alert( customMsg ) ;
   break ;
case 201 :
   alert( 'A file with the same name is already available. The uploaded file has been renamed to "' + fileName + '"' ) ;
   break ;
case 202 :
   alert( 'Invalid file type' ) ;
   return ;
case 203 :
   alert( "Security error. You probably don't have enough permissions to upload. Please check your server." ) ;
   return ;
//加入错误码处理
case 204:
      alert("文件大小超出限制");
      return ;
case 500 :
   alert( 'The connector is disabled' ) ;
   break ;
default :
   alert( 'Error on file upload. Error number: ' + errorNumber ) ;
   return ;
}

此外我们还要修改客户端：fckeditor\editor\filemanager\browser\default\frmupload.html(源文件)
同理也是找到回调函数：function OnUploadCompleted( errorNumber, data )
代码段：
switch ( errorNumber )
{
case 0 :
   window.parent.frames['frmResourcesList'].Refresh() ;
   break ;
case 1 : // Custom error.
   alert( data ) ;
   break ;
case 201 :
   window.parent.frames['frmResourcesList'].Refresh() ;
   alert( 'A file with the same name is already available. The uploaded file has been renamed to "' + data + '"' ) ;
   break ;
case 202 :
   alert( 'Invalid file' ) ;
   break ;
//增加错误码处理
case 204:
      alert(' 文件大小超出限制');
      break;
default :
   alert( 'Error on file upload. Error number: ' + errorNumber ) ;
   break ;
}

以上的错误信息默认都是英文的，我们可以直接将其修改成中文，就可以了。

综上：以上的是基于Image上传的大小限制，其他的三类(File, Flash, Media)方法类似。

十二、在表单中使用FCKeditor
一般应用中，我们不会单独使用FCKeditor的。
直接在myfckeditor.jsp中：
<form action="display.jsp" method="post">
<script type="text/javascript">
   //新建一个fckeditor的实例，它的名字叫content
    var oFCKeditor =new FCKeditor("content");
   //设置编辑器的基准路径(必须以"/"结尾)
   //（注意默认的"/fckeditor/"中的第一个“/”指的是当前站点，即：http://localhost:8080/fckeditor)
   //所以我们必须改一下，在前边加上我们的工程名，例如“/myPro/fckeditor/”）
    oFCKeditor.BasePath="/fckeditor/";
   //创建并且输出一个编辑器
    oFCKeditor.Create();
   </script>

      <input type="submit">
</form>
然后我们就可以在display.jsp中取出内容
display.jsp：
方法一（jsp代码）：
   <%
                Stirng content=request.getParameter("content");
               %>
方法二（EL表达式）：
              ${param.content}

注意，我们如果填写的是中文，那么提交后，如果哦显示乱码，就必须指定编码格式:
在display.jsp中加入：
     <% request.setCharacterEncoding("UTF-8") %>
     此处的“UTF-8”是myfckeditor.jsp中的显示格式：
     即在 myfckeditor.jsp中有语句：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
这样我们就搞定啦！！

十三、应用

根据实际应用，综合上边的方法就可以把FCKeditor加入到我们自己的项目中去。

   例如我们要将一个textarea替换成FCKeditor：
   <td>
   <html:textarea property="content" rows="10"/>
   <script type="text/javascript" src="${pageContext.request.contextPath}/fckeditor/fckeditor.js"></script>
   <script type="text/javascript">
   var myeditor=new FCKeditor("content");
   myeditor.BasePath="${pageContext.request.contextPath}/fckeditor/";
   myeditor.ReplaceTextarea();
   </script>
   </td>
   这样就把textarea替换成FCKeditor了。
   如果要修改样式，那么我们可以把我们自己的样式加进FCKeditor的CSS文件即可。
   即找到fckeditor\editor\css下的fck_editorarea.css文件。(假设我们自己的样式文件在Webroot\css\mycss1.css)
   为了方便，我们就把我们自己的样式文件给加到这个CSS文件中：
   用命令：
        @import url(../../../css/mycss1.css);

    然后我们可以自定义工具集：
    在myfckconfig.js中配置相应的项(假如我们自定义的工具集叫“myToolbar”)。
    然后在调用的页面里指定使用这个工具集：myeditor.ToolbarSet="myToolbar";
    在自定义配置文件中，我们还可以修改其他的属性。（参看前面的技术）

    问题：我们在上传文件时不希望用户有“浏览服务器按钮的功能”，即：去掉页面中的部分功能。
    因为用户可以通过浏览服务器可以随意的在服务器端创建文件夹和上传文件。（我们不希望用户这样做，只能把这个浏览服务器按钮给去掉）

    在上边点右键--》属性找到对应的源文件。fckeditor\editor\dialog\fck_image.html(源文件)
    找到这段代码：

    <input id="btnBrowse" onclick="BrowseServer();"
     type="button" value="Browse Server"
   fcklang="DlgBtnBrowseServer" />

   就是它对应的按钮。它的按钮上显示的是中文，而这里是英文，因为它页面上按钮支持多种语言的，我们目前使用的是简体中文。
   所以它显示的是中文。
   我们可以查找它的语言文件（使用快捷键：Crtl+Shift+R 然后查找：zh-cn）,就找到了fckeditor\editor\lang\zh-cn.js
   打开它，查找“浏览服务器”，就可以找到它的键值（"key"-"value"）对了。
   部分代码如下：
.....
// Dialogs
DlgBtnOK   : "确定",
DlgBtnCancel : "取消",
DlgBtnClose   : "关闭",
DlgBtnBrowseServer : "浏览服务器", //这里的key 就是上边的：fcklang="DlgBtnBrowseServer"
DlgAdvancedTag : "高级",
DlgOpOther   : "<其它>",
DlgInfoTab   : "信息",
DlgAlertUrl   : "请插入 URL",
.....
这样我们就知道是这个按钮了。然后把它注释掉：
   
到此，我们就把浏览服务器这个按钮去掉了。其他的和Image也类同。

具体的应用，我们就具体配置相应的东西，就可以灵活的将FCKeditor应用到自己的项目中啦！！

分享到：

（转）文件上传相关 | fckeditor-java-2.6中遇到的问题

2010-07-16 09:30
浏览 2787
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论