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

======================================================
注：本文源代码点此下载
======================================================

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

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

既然动态插入图片的问题解决了,那么就只剩下上传的了,上传在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('') 方法插入上传后的图片,并关闭上传窗口。

private void saveimage()

{

string filename = uploadfile();//取得上传后的图片路径

response.write(@"

");

response.end();

}

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

代码下载

程序代码:

[ 复制代码到剪贴板 ]

编辑器实际上是一个iframe

其实将数据装在到编辑器的实质是将iframe里面填充数据,那么就是:

iframe.document.body.innerhtml = "你的数据"

我不多说了,有些东西建议查msdn,上面写的很详细,专门写了一个例子说明如何制作一个编辑器,装载数据到编辑器中,在编辑器的光标位置插入数据:

html编辑器教程

html" size="60"/>

 

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/