让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();
}

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

代码下载