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的截图
- 大小: 32 KB
- 大小: 37.9 KB
分享到:
相关推荐
产品上传过程中,支持对产品图片添加图片或文字水印,上传图片同时生成缩略图;产品类别支持无限级分类,也支持上传分类图片及加入详细的分类信息;品牌设置支持上传品牌图片及添加详细品牌信息;附带产品批量导入...
5.上传图片或文件时可在同一个页面重复使用,也就是说一个页面可以放N个上传按钮; 6.修正了后台添加广告或编辑广告内容时,如果是代码类型发生错误问题; 7.换了广告焦点图FLASH插件,解决了用户反映第一张图片无法...
上传图片或文件时可在同一个页面重复使用,也就是说一个页面可以放N个上传按钮; 6.修正了后台添加广告或编辑广告内容时,如果是代码类型发生错误问题; 7.换了广告焦点图FLASH插件,解决了用户反映第一张图片...
支持批量上传图片、附件,支持涂鸦,支持插入视频和在线搜索视频,支持代码高亮哦亲~ 模板功能增强 全新制作CustomMeta插件,可以在发表文章时插入字段。合并部分模板文件,不需要再单独添加。支持不同文章、不同...
支持批量上传图片、附件,支持涂鸦,支持插入视频和在线搜索视频,支持代码高亮哦亲~ 模板功能增强 全新制作CustomMeta插件,可以在发表文章时插入字段。合并部分模板文件,不需要再单独添加。支持不同文章、...
支持批量上传图片、附件,支持涂鸦,支持插入视频和在线搜索视频,支持代码高亮哦亲~ 模板功能增强 全新制作CustomMeta插件,可以在发表文章时插入字段。合并部分模板文件,不需要再单独添加。支持不同文章、不同...
4. 自定义模块,可以自己修改页面上的的布局,让不懂制作网页的用户也能自己增加和修改页面上的版块 5. Skin功能,随时可以给自己的Blog换上新的CSS样式界面 6. 自定义分类,可以同时定制外部连接分类和Blog内置...
采用了FCKeditor在线文本编辑器,用FCKeditor上传文件时还存在有问题,不知道是不是配置存在问题,但是图片文件利用Struts2的action上传到服务器,因为有其他附件文件要上传,并且要保存文件信息,在删除文章时要把...
8.2.4 在ASP.NET中使用JMail接收邮件 98 8.3 小结 103 第9章 上传和下载模块 104 9.1 上传和下载简介 104 9.2 简单的上传和下载 104 9.2.1 上传文件到服务器 105 9.2.2 从服务器下载文件 106 9.3 ...
13,上传附件IE6下层的兼容问题 14,留言板FCKEditor编辑器增加 15,用户注册开启dz时网人和dz的问题答案不统一时的处理 16,城市区域字段和分类独立选项控制FF浏览器下值获取问题 17,后台-自定义标签-自订义标签-...
采用了FCKeditor在线文本编辑器,用FCKeditor上传文件时还存在有问题,不知道是不是配置存在问题,但是图片文件利用Struts2的action上传到服务器,因为有其他附件文件要上传,并且要保存文件信息,在删除文章时要把...
8、 "FCKLang 未定义"错误的解决办法问题:属编码问题,在本机使用记事本打开fckeditor\editor\lang\zh-cn.js,不用修改任何内容,重新保存后上传服务器覆盖原文件即可解决。 9、 修正了栏目设置中在 是否添加水印...
五、附件上传图片水印功能、附件上传防盗管理功能 发表日志时,附件上传图片,可自动产生水印;上传附件可启用防盗链; 水印功能设置在后台“站点基本设置”-“附件基本设置”中设置管理;防盗链附件在后台“数据库...
13,上传附件IE6下层的兼容问题 14,留言板FCKEditor编辑器增加 15,用户注册开启dz时网人和dz的问题答案不统一时的处理 16,城市区域字段和分类独立选项控制FF浏览器下值获取问题 17,后台-自定义标签-自订义标签-...
Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。 设定字符串为“张三,你好,我是李四” 产生张三的密钥对(keyPairZhang) 张三生成公钥(publicKeyZhang...
10.3. 在form中使用fckeditor 10.4. 健康快乐动起来,fx里的动画效果 10.5. 悄悄的更新网页内容 A. 常见问题乱弹 A.1. ext到底是收费还是免费 A.2. 怎么查看ext2里的api文档 A.3. 如何在页面中引用ext A.3.1. 顺便...
2.上传附件(图片/文件等)在线管理,可进行批量删除. 3.下载增加新的cookie防盗链方式检查. 4.tag(标签)页面增加/后台管理. 5.搜索关键词记录,并且可调用显示/后台管理. 6.广告调用标签加上[ad]node属性. 7.后台登录后...
10.3. 在form中使用fckeditor A. 常见问题乱弹 A.1. ext到底是收费还是免费 A.2. 怎么查看ext2里的api文档 A.3. 如何在页面中引用ext A.3.1. 顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来...
支持无限级的分类与子分类,可设置单独页面、频道、列表页 分类支持投稿,审核投稿,隐藏功能 FCKeditor在线编辑器 远程图片本地化,提取第一个图片为缩略图 广告管理功能 单独页面内容添加 自定义文章属性,方便...