在FCKeditor中使用自定义的图片与附件上传页面

     FCKeditor自带的附件图片上传功能已经比较好，但有些时候仍然不能满足用户的需求，于是就产生了一个改变FCKeditor附件上传功能的需求。由于FCKeditor大部分实现都是脚本，想要在原有的功能上进行扩展，可能工作量比新开发一个上传页面要大的多，而且更难维护。
      一般来讲，公司都有自己的附件与图片资源管理功能，比如图片的预览、附件的删除和添加上传，以及直接将图片的地址直接添加到FCKeditor编辑器中等功能。
      我首先是将公司已经开发好的图片与附件资源管理页面功能从某系统中分离出来，这个页面的效果图如下：本页最后的图片
http://songhongchen.iteye.com/upload/attachment/104154/a0f6d0b6-f213-3734-95f9-f5ad320265ce.jpg
有了现成的图片与附件资源管理功能，那么只需要将它集成到FCKeditor中即可。翻了一下FCKeditor的脚本传码，发现FCKeditor的上传使用的页面是

FCKEditor\editor\fckdialog.html

，比如我们点击FCKeditor中上传图片或者上传附件时，就弹出的这个页面。那么只需要将FCKeditor点击传图片或者上传附件时弹出的是我们自定义的页面就可以了。经过一段时间的查找，最终找到两个脚本文件：

FCKEditor\editor\js\fckeditorcode_ie.js IE使用
FCKEditor\editor\js\fckeditorcode_gecko.js Firefox使用

修改fckeditorcode_ie.js文件，查找如下代码：

var J=FCKConfig.BasePath+'fckdialog.html'

，替换成自定义的图片与附件管理页面相对位置，我替换后为如下：

var J = '../../ContentHtmlTextBox/HelperScripts/ftb.HtmlFileIframe.aspx';

因为FCKeditor使用的是弹出模态窗口，而且窗口的宽高都很小，有必要改大一些，找到如下代码：

var G=F.showModalDialog(C,A,"dialogWidth:"+D+"px;dialogHeight:"+E+"px;help:no;scroll:no;status:no");

，替换成为：

var G=F.showModalDialog(C,A,"dialogWidth:800px;dialogHeight:800px;");

就这样，再点击FCKeditor图片或者上传附件时弹出的就是我们自定义的页面了。Firefox浏览器也一样，只是修改的文件不同而已。

      因为FCKeditor以前实现了点击确定后，上传的资源（如图片）会直接插入到指定的位置，这个功能我们仍然需要,比如双击预览的缩略图，那么此图片的地址就会直接插入到编辑器中的相应位置。复制原来FCKEditor\editor\fckdialog.html页面点击确定后执行的代码到我们的自定义页面中，执行相同的功能，原来的代码如下：

function Ok()
{
	if ( GetE('txtUrl').value.length == 0 )
	{
		window.parent.SetSelectedTab( 'Info' ) ;
		GetE('txtUrl').focus() ;

		alert( FCKLang.DlgImgAlertUrl ) ;

		return false ;
	}

	var bHasImage = ( oImage != null ) ;

	if ( bHasImage && bImageButton && oImage.tagName == 'IMG' )
	{
		if ( confirm( 'Do you want to transform the selected image on a image button?' ) )
			oImage = null ;
	}
	else if ( bHasImage && !bImageButton && oImage.tagName == 'INPUT' )
	{
		if ( confirm( 'Do you want to transform the selected image button on a simple image?' ) )
			oImage = null ;
	}
	
	if ( !bHasImage )
	{
		if ( bImageButton )
		{
			oImage = FCK.EditorDocument.createElement( 'INPUT' ) ;
			oImage.type = 'image' ;
			oImage = FCK.InsertElementAndGetIt( oImage ) ;
		}
		else
			oImage = FCK.CreateElement( 'IMG' ) ;
	}
	else
		oEditor.FCKUndo.SaveUndoStep() ;
	
	UpdateImage( oImage ) ;

	var sLnkUrl = GetE('txtLnkUrl').value.trim() ;

	if ( sLnkUrl.length == 0 )
	{
		if ( oLink )
			FCK.ExecuteNamedCommand( 'Unlink' ) ;
	}
	else
	{
		if ( oLink )	// Modifying an existent link.
			oLink.href = sLnkUrl ;
		else			// Creating a new link.
		{
			if ( !bHasImage )
				oEditor.FCKSelection.SelectNode( oImage ) ;

			oLink = oEditor.FCK.CreateLink( sLnkUrl ) ;

			if ( !bHasImage )
			{
				oEditor.FCKSelection.SelectNode( oLink ) ;
				oEditor.FCKSelection.Collapse( false ) ;
			}
		}

		SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ;
		SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;
	}

	return true ;
}

修改之后：

var oEditor = window.parent.dialogArguments.Editor;
        var FCK = oEditor.FCK;
        function Ok(sLnkUrl,isImage) {
			if(isImage=="image"){
				oImage = FCK.CreateElement('IMG');           
				oImage.alt = "Image";
				oImage.src = sLnkUrl;				
				oEditor.FCKSelection.SelectNode(oImage);
				oEditor.FCKSelection.Collapse(false);
			 }
			 else{
				oLink = oEditor.FCK.CreateLink( sLnkUrl ) ;
				oEditor.FCKSelection.SelectNode( oLink ) ;
				oEditor.FCKSelection.Collapse( false );
			 }
            window.close();
        }

注意：因为FCKeditor使用的是弹出模态窗口，而模态窗口在刷新提交时会弹出新的页面，为避免弹出新的页面，需要使用一个中间页面做为中转，此页面的代码非常简单，就一个iframe,

<iframe src='ftb_HtmlFile.aspx' width='100%' height='100%' scrolling=auto></iframe>

在ftb_HtmlFile.aspx页面就是图片与附件资源管理的功能了。
此图片就是页面ftb_HtmlFile.aspx的截图

评论

1 楼 jeff40577 2009-05-22  

很有用，最近正要做相关的东西，谢谢。