自定义FCKeditor的图片上传功能

关键问题:

WEB.XML配置:

程序代码

      <servlet>
        <servlet-name>Connector</servlet-name>
        <servlet-class>com.fredck.FCK editor.connector.ConnectorServlet</servlet-class>
        <init-param>
            <param-name>baseDir</param-name>
            <param-value> /UserFiles/</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet>
        <servlet-name>SimpleUploader</servlet-name>
        <servlet-class>com.fredck.FCK editor.uploader.SimpleUploaderServlet</servlet-class>
        <init-param>
            <param-name>baseDir</param-name>
            <param-value> /UserFiles/</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>enabled</param-name>
            <param-value>false</param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsFile</param-name>
            <param-value></param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsFile</param-name>
            <param-value>php|php3|php5|phtml|asp|aspx|ascx| jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsImage</param-name>
            <param-value>jpg|gif|jpeg|png|bmp</param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsImage</param-name>
            <param-value></param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsFlash</param-name>
            <param-value>swf|fla</param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsFlash</param-name>
            <param-value></param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

  <servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/ fckeditor/ editor/filemanager/browser/default/connectors/ jsp/connector</url-pattern>
  </servlet-mapping>
  
  <servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/fck editor/ editor/filemanager/upload/simpleuploader</url-pattern>
  </servlet-mapping>  
  
  <taglib>  
   <taglib-uri>/FCK editor</taglib-uri>  
   <taglib-location>/WEB-INF/FCK editor.tld</taglib-location>  
</taglib>  

  <taglib><taglib-uri>pinEdit.tld</taglib-uri><taglib-location>
      /WEB-INF/lib/pinEdit.jar
    </taglib-location>
  </taglib>

fckeditor并非WEB PROJECT的名称,而只是 我解压FCK后的根目录,即有路径WebRoot/fck editor/ editor

 <url-pattern>映射时不需要添加WEB PROJECT名称;

此外, 我们还必须在WebRoot下建立文件夹: UserFiles ,其下 我们可建立文件夹: File Image Flash,也可以不建立(系统在上传时会根据上传类型自动建立相应的文件夹)

============================================================

fck_image.js

196行
function Ok(){}
//图象插入“确定”按钮

203行
alert( FCKLang.DlgImgAlertUrl ) ;
//当没有图象URL时提示“请输入图象地址”，这个值分别定义在语言文件夹对应的语言js文件中

269行
function UpdateImage( e, skipId ){}
//更新、插入图象

    e.src = GetE('txtUrl').value ;
    SetAttribute( e, "_fcksavedurl", GetE('txtUrl').value ) ;
    SetAttribute( e, "alt"   , GetE('txtAlt').value ) ;
    SetAttribute( e, "width" , GetE('txtWidth').value ) ;
    SetAttribute( e, "height", GetE('txtHeight').value ) ;
    SetAttribute( e, "vspace", GetE('txtVSpace').value ) ;
    SetAttribute( e, "hspace", GetE('txtHSpace').value ) ;
    SetAttribute( e, "border", GetE('txtBorder').value ) ;
    SetAttribute( e, "align" , GetE('cmbAlign').value ) ;

//分别设置图象的各个属性值,这些属性分别对应fck_image.html中的各个文本输入框的ID。


281行
    // Advances Attributes

    if ( ! skipId )
        SetAttribute( e, 'id', GetE('txtAttId').value ) ;

    SetAttribute( e, 'dir'        , GetE('cmbAttLangDir').value ) ;
    SetAttribute( e, 'lang'        , GetE('txtAttLangCode').value ) ;
    SetAttribute( e, 'title'    , GetE('txtAttTitle').value ) ;
    SetAttribute( e, 'longDesc'    , GetE('txtLongDesc').value ) ;

    if ( oEditor.FCKBrowserInfo.IsIE )
    {
        e.className = GetE('txtAttClasses').value ;
        e.style.cssText = GetE('txtAttStyle').value ;
    }
    else
    {
        SetAttribute( e, 'class'    , GetE('txtAttClasses').value ) ;
        SetAttribute( e, 'style', GetE('txtAttStyle').value ) ;
    }

//对应“高级”选项卡的设置，在样式设置处并做了浏览器兼容判断


35-52行控制选项卡的显示

window.parent.AddTab( 'Info', FCKLang.DlgImgInfoTab ) ;

if ( !bImageButton && !FCKConfig.ImageDlgHideLink )
    window.parent.AddTab( 'Link', FCKLang.DlgImgLinkTab ) ;

if ( FCKConfig.ImageUpload )
    window.parent.AddTab( 'Upload', FCKLang.DlgLnkUpload ) ;

if ( !FCKConfig.ImageDlgHideAdvanced )
    window.parent.AddTab( 'Advanced', FCKLang.DlgAdvancedTag ) ;

// Function called when a dialog tag is selected.
function OnDialogTabChange( tabCode )
{
    ShowE('divInfo'        , ( tabCode == 'Info' ) ) ;
    ShowE('divLink'        , ( tabCode == 'Link' ) ) ;
    ShowE('divUpload'    , ( tabCode == 'Upload' ) ) ;
    ShowE('divAdvanced'    , ( tabCode == 'Advanced' ) ) ;
}

不需要某个选项卡时只要注释掉相应代码即可 。

在fckeditorcode_id.js和fckeditorcode_gecko.js中有一个设置图片上传窗口大小的代码：

new FCKDialogCommand('Image',FCKLang.DlgImgTitle,'dialog/fck_image.html',450,400)

这两个文件在FCK主目录下的editor/js目录下。
new FCKDialogCommand('Image',FCKLang.DlgImgTitle,'dialog/fck_image.html',450,400)

修改图片上传的界面：

文件：fck_image.html

控制“确定”与“取消”按钮的位置与样式:

文件：fckdialog.html   309~316行左右

去掉选项卡:35行左右

window.parent.AddTab( 'Info', FCKLang.DlgImgInfoTab ) ;

我们只需注释此类语句即可。