CSDN博客

img cnfengxx

让FreeTextBox(一个HTML编辑器) 支持上传本地图片并插入编辑器中

发表于2004/6/25 16:53:00  1394人阅读

如果你不是很明白html编辑器的原理,请您看看我专门写的这个简单例子,演示了将一个iframe变成html编辑器,让编辑器load数据,在编辑器的光标处插入指定HTML数据

在编辑器的光标处插入指定HTML数据?也许您马上就想到了在我们上传图片的时候我们可以利用这点,在编辑器中直接插入一段HTML,编辑器可以是所见即所得的哦,当你插入一段用来显示图片的html(<img src='图片路径'>),在编辑器中马上就可以看到图片的啦!

既然动态插入图片的问题解决了,那么就只剩下上传的了,上传在asp.net里面变得so easy,好了,方案有了:上传本地图片到服务器-->返回路径src-->根据返回的src插入显示图片的html(img src='src')。

具体实现:

首先,给FreeTextBox添加一个上传图片的按钮。
 public class UploadImg: ToolbarButton
 {
  public UploadImg() : base("UploadImg","FTB_UploadImg","insertimage")
  {
   ScriptBlock = @"function FTB_UploadImg(){UploadImg()}";//按钮点击事件对应方法
  }
 }

然后,写几个客户端脚本,一个用来相应上传图片按钮点击事件——弹出一个用来上传图片的窗口。

function UploadImg()
  {
   window.open('upload_img.aspx','_UploadImg',"width=481 height=190");
  }

  //插入指定HTML数据到编辑器光标位置
  function InsertText(textToInsert) {
    FTB_InsertText("<%=PostBodyRichText.ClientID %>",textToInsert);
    <%=PostBodyRichText.ClientID + "_Editor" %>.focus();
  }

最后,在弹出窗口中上传本地图片到服务器指定目录中,返回图片上传到服务器后的路径(如:uploadImgs/myphoto.gif),调用InsertText('<img src=uploadImgs/myphoto.gif>') 方法插入上传后的图片,并关闭上传窗口。

  private void SaveImage()
  {
   string filename = uploadFile();//取得上传后的图片路径
   Response.Write(@"
    
   ");
   Response.End();
  }

注意:这种方法会产生很多垃圾图片

代码下载

0 0

相关博文

我的热门文章

img
取 消
img