ASp.net下fckeditor配置图片上传最简单的方法

 更新时间:2010年01月13日 03:45:39   转载 作者:  
fckeditor 的基本配置我就不讲了,讲讲图片上传这块吧;
1. 原先的配置
把 fckeditor/filemanager/connectors 目录删除;
有同学可能会问了,都删除了怎么上传文件?
呵呵。。。

2. 不要引用 FredCK.FCKeditorV2.dll;
因为我都是采用js写的,不采用控件的方式;
其实网上有很多人在尝试往 fckeditor/filemanager/connectors目录下注入,
确实也有人不小心直接把FCK编辑器没有任何配置的情况下传到网上导致中招了;

3. 现在讲正题吧,一般来说我们用FCK的时候并不多,在一个系统里面可能也就几个地方
现在假如我有一个简单的系统,里面有“新闻”发布和,类似“公司简介”单页发布两个地方要用的FCK
我要把所有文章的图片放到 /Article/yyyyMMdd/guid.jpg
把所有单页的图片放到 /Page/yyyyMMdd/guid.jpg
或者说我要把图片按用户存到不同的地方。。。

4.实现
怎么很简单的事情要说清楚需要做这么多铺垫,太麻烦了。。。。!!!

web页面:
代码
复制代码 代码如下:

<form id="form1" runat="server">
<div>
<div>
<asp:TextBox ID="TextBox1" TextMode="MultiLine" runat="server"> </asp:TextBox>
</div>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>


JS:


代码
复制代码 代码如下:

<script src="fckeditor/fckeditor.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
var oFCKeditor = new FCKeditor('<%= TextBox1.ClientID %>');
oFCKeditor.BasePath = 'fckeditor/'
oFCKeditor.Config.ImageUploadURL = "/admin/auploader.aspx";
oFCKeditor.ReplaceTextarea();
}
</script>


这样就搞定了!
不要不相信啊,下面把上传页面的代码简单的写一个吧,对这个也比较重要;

代码
复制代码 代码如下:

protected void Page_Load(object sender, EventArgs e)
{
if (Request.Files.Count > 0)
{
HttpPostedFile file = Request.Files[0];
string path = "/Article/" + System.DateTime.Now.ToString("yyyyMMdd") + "/";
string serverPath = Server.MapPath(path);
string fileName = Guid.NewGuid() + file.FileName.Substring(file.FileName.LastIndexOf("."));
if (!System.IO.Directory.Exists(serverPath))
System.IO.Directory.CreateDirectory(serverPath);
file.SaveAs(serverPath + fileName);
SendFileUploadResponse(0, path + fileName, fileName, "上传成功!");
}
else
{
SendFileUploadResponse(1, "", "", "上传失败!");
}
}

public void SendFileUploadResponse(int isSucceed, string fileUrl, string fileName, string customMsg)
{
System.Web.HttpContext.Current.Response.Clear();
System.Web.HttpContext.Current.Response.Write("<script type='text/javascript'>");
System.Web.HttpContext.Current.Response.Write(@"(function(){var d=document.domain;while (true){try{var A=window.top.opener.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();");
System.Web.HttpContext.Current.Response.Write("window.parent.OnUploadCompleted(" + isSucceed.ToString().ToLower() + ", '" + fileUrl + "', '" + fileName + "', '" + customMsg + "');");
System.Web.HttpContext.Current.Response.Write("</script>");
System.Web.HttpContext.Current.Response.End();
}


好了搞定了!
这个上传代码没有做严格的后缀限制,大小限制;因为这个页面路径是我们自己配置的嘛,想怎么写就怎么写了;
甚至你可以根据不同的用户存到不同的地方;
这里需要说明一下 SendFileUploadResponse 方法,其实就是为FCk传回消息;
这里:
System.Web.HttpContext.Current.Response.Write("window.parent.OnUploadCompleted(" + isSucceed.ToString().ToLower() + ", '" + fileUrl + "', '" + fileName + "', '" + customMsg + "');");

对应的是
fckeditor/dialog/fck_image/fck_image.js

代码
复制代码 代码如下:

function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
{
// Remove animation
window.parent.Throbber.Hide() ;
GetE( 'divUpload' ).style.display = '' ;
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 500 :
alert( 'The connector is disabled' ) ;
break ;
default :
alert( 'Error on file upload. Error number: ' + errorNumber ) ;
return ;
}
sActualBrowser = '' ;
SetUrl( fileUrl ) ;
GetE('frmUpload').reset() ;
}

注意到 0 ,是成功,1 是失败,其他的自己看吧。。。。
对了说明一下这里用的是 2.65 版本测试的,如果有其他版本不一样的灵活变通下哈;

总结一下:
1. 在不同的页面配置不同的图片处理路径,如:
oFCKeditor.Config.ImageUploadURL = "/admin/aupload.aspx";
oFCKeditor.Config.ImageUploadURL = "/admin/bupload.aspx";
。。。。

2. FCk 会把图片post到指定的路径,
然后你自己操作图片,按目录存啊还是按当前用户session存随便来;
当然别忘记验证用户的身份在先,没有权限的不要对他客气,直接返回错误,
验证身份示例代码里面没写,自己根据项目自己加吧

3. 一定要返回值告诉FCK你的操作结果,否则会一直死在那里的。。。

PS:
看来我不是个喜欢写东西的人,觉得很麻烦。。。

相关文章

  • FCKeditor 在chrome中不显示问题

    FCKeditor 在chrome中不显示问题

    今天在使用chrome打开后台的时候,发现FCKeditor编辑器菜单等都不显示,chrome确实不适合后台使用,以后还是继续ie核心的吧
    2014-01-01
  • FCKeditorAPI 手册 js操作获取等

    FCKeditorAPI 手册 js操作获取等

    FCKeditorAPI 手册 js操作控制,获取等函数代码,使用网页编辑器的朋友可以参考下。
    2011-01-01
  • Ueditor百度编辑器的Html模式自动替换样式的解决方法

    Ueditor百度编辑器的Html模式自动替换样式的解决方法

    百度的Ueditor编辑器出于安全性考虑,用户在html模式下粘贴进去的html文档会自动被去除样式和转义。虽然安全的,但是非常不方便。做一下修改把这个功能去掉,需要的朋友可以参考下
    2017-03-03
  • FCKeditor ASP.NET 上传附件研究

    FCKeditor ASP.NET 上传附件研究

    FCKeditor很好用,而且是开源软件。最近研究了一下自带的上传功能,对源代码作了一点修改,也算是依照开源软件的要求,介绍一下。
    2009-06-06
  • asp.net CKEditor和CKFinder的应用

    asp.net CKEditor和CKFinder的应用

    CKEditor和CKFinder在ASP.NET中的应用,需要的朋友可以参考下。
    2010-01-01
  • CKEditor 附插入代码的插件

    CKEditor 附插入代码的插件

    从官网下载ckeditor,我下载的是ckeditor_3.0.2。CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了。
    2010-03-03
  • SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

    SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

    作为程序员在写博客文章的时候,经常要插入些代码片断,很多博客系统都提供代码语法着色高亮显示的功能或插件,让代码显示更直接明了
    2012-09-09
  • 添加FCKeditor插件需要注意的地方

    添加FCKeditor插件需要注意的地方

    今天,在做程序的时候发现 FCKeditor功能并不强大(开始还不知道可以用插件,汗~),至少没有上传视频,专辑,音乐,水印等功能(以前我也修改过DVBBS的编辑器,也自定义了很多使用按钮).
    2009-11-11
  • 百度编辑器 如何获取光标位置与不同帧内的节点

    百度编辑器 如何获取光标位置与不同帧内的节点

    当我们console.log(domUtils)的时候,可以在控制台中,看见很多domUtils下的方法,这些方法都是用于操作节点的,findParentByTagName()顾名思义,获取的是节点,当我们的光标在编辑器内容处,而我们要获取相应内容外层节点的id以及各种属性,就需要通过domUtils来获得不同帧内的节点
    2012-07-07
  • TinyMCE syntaxhl插入代码后换行的修改方法

    TinyMCE syntaxhl插入代码后换行的修改方法

    上次搞了个整合insert code的TinyMCE编辑器,非常好用。但有一个缺点:每次插入代码后,光标都会停留在pre标记里面,打回车出不来,必须编辑HTML
    2012-02-02

最新评论