宝玉

专注于web开发技术
随笔 - 114, 评论 - 1501 , 引用 - 581

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

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

代码下载

发表于 2004年5月20日 18:39

评论

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

请把你没有编译过的freetextbox给大家一份,让我们学习一下如何增加功能.
2004-7-14 17:09 | hnsmxzb

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

我也是在编译过的基础上增加的,你看看代码就明白了
2004-7-14 17:21 | 宝玉

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

hg
2004-8-5 23:21 | ffg

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

宝玉你好!可以向你问一个关于FreeTextBox的问题吗?
将它添加到工具箱:
我在CSDN里搜索了一下,有如下方法:
用鼠标在工具栏的web窗体选项卡上右键点击,选中添加移除项,出来一个对话框,点击浏览,选择ftb的dll,两步确定。
但是我在工具箱的Web窗体里点右键,没有“添加移除项”啊,有个自定义工具栏,我选了,然后选.NET框架组件,选浏览,找到Ftb的DLL,确定,可是错误说 在“E:\www\test\bin\Freetextbox.dll”中没有可放置在工具箱上的组件,我的好像是vs2002。
2004-9-11 4:12 | Tmouse

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

抱歉我对vs2002不了解,可能这个功能是vs2003才有的,你升级到2003看看:)
2004-9-11 21:49 | 宝玉

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

不行啊~
你的代码运行不正确~~~
2004-12-7 23:59 | Spinach

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

你把代码下载看看
2004-12-8 0:00 | 宝玉

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

你把代码下载看看
2004-12-8 0:00 | 宝玉

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



Powered by:



2005-3-24 20:39 | yancp

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

我想通过双击一个列表控件里的词条来自动向freetextbox中插入相应的词条,请问怎么实现呢?
2005-3-31 5:07 | radargroup

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

FTB_InsertText怎么能在我的页面里调用呢?
2005-3-31 5:09 | radargroup

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

您可以参考CnForums(http://www.cnforums.net)源码中的
Web\Themes\default\Skins\View-CreateEditPost.ascx文件
2005-3-31 5:12 | 宝玉

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

如何把图片插入到指定位置呢?
2005-5-23 3:49 | c# hack

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

其实还有更简单的方法,可以直接将未上传的图片显示在网页上,是一个函数,我见过,可惜忘了,呵呵
2005-7-24 21:34 | wonphy

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

FreeTextBox.dll似乎是重新编译过的,freetextboxWeb.dll是如何产生的?希望能够得到解答,以便能够动手扩充,谢谢。
2005-9-10 23:43 | hulake

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

我用了这个方法,图片是可以上传了,可是却取不到FreeTextBox 里的内容,变成没办法保存到数据库中。
2005-10-8 4:46 | DMPX

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

你好,我刚学 asp.net 现在用 freeTextBox 遇到一个问题,我想把 text 里的内容保存到数据库里,我用的是 insert 语句来插入的,但是 Text 里有 " ' " 字符和 sql 里的 " ' " 有冲突,造成 sql 语句错误,该怎么解决呢,谢谢
2005-12-23 4:07 | qi_jianzhou

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

还有一个问题是用 FreeTextBox 不能插入表格,点插入表格的按纽没有反应,我按要求做了,可还是不行,我的 ie 是 6.0 的,应该不是 ie 的事吧
2005-12-23 4:19 | qi_jianzhou

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

给我一个吧PLEASE
2006-4-6 0:19 | lifengli

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

能告诉我从你这里下载的代码怎么用吗?
怎么嵌入我的web页面?
2006-6-7 10:22 | mn

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

点击插入图片后打开的网页没有显示,好像是叶面没有找到。。。这是什么原因?忘达人解答。。dldengke@hotmail.com
2006-7-14 7:49 | metaza

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

cao
2007-1-17 2:42 | cao

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

good work, thanks
2007-9-5 23:14 | 老田

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

11
2008-2-21 0:31 | 娃娃

Post Comment

主题  
姓名  
主页
校验码  
内容   
京ICP备 05050892号