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

如果你不是很明白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("",textToInsert);
    .focus();
  }

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

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

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

代码下载