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

转载 2004年06月25日 16:53:00

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

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

代码下载

freetextbox控件本地上传图片

  • 2010年06月10日 17:09
  • 1.63MB
  • 下载

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

让FreeTextBox(一个HTML编辑器) 支持上传本地图片并插入编辑器中 如果你不是很明白html编辑器的原理,请您看看我专门写的这个简单例子,演示了将一个iframe变成html编辑器,让编辑...
  • zhu4068
  • zhu4068
  • 2006年12月02日 18:12
  • 4178

网页添加html编辑器

效果就如上清析处 编辑器使用方法 1. 下载编辑器 下载 KindEditor 最新版本,下载之后打开 examples/index.html 就可以看到演示。 下载页面: h...
  • yxwb1253587469
  • yxwb1253587469
  • 2015年10月07日 11:07
  • 882

markdown本地图片插入文本

markdown插入图片
  • lin_not_for_codes
  • lin_not_for_codes
  • 2017年02月27日 21:39
  • 1164

CSDN-markdown编辑器插入网上或本地电脑上的图片

写博客经常会用到图片,CSDN-markdown编辑器支持插入在线的网上图片,也可以上传本地电脑上的图片。   通过点击工具栏的图片工具或者按下快捷键“Ctrl+G(MAC系统使用Cmd+G)”...
  • testcs_dn
  • testcs_dn
  • 2015年03月12日 21:57
  • 13524

在IFRAME中编辑(HTML文本在线编辑器原理之一)

editarea.document.designMode="on";function a(){ alert(editarea.document.body.innerHTML);} 
  • banmuhuangci
  • banmuhuangci
  • 2006年09月27日 23:07
  • 1914

80给的获取ewebeditor编辑器中上传图片路径代码

先写下来,改天再好好研究研究 第一段:                if EditorType=2.8 then                    FormCellTmp=FormCellTmp...
  • x03570227
  • x03570227
  • 2007年06月23日 23:50
  • 2285

用javascript制作一个简单的html编辑器

Introduction Mozilla 1.3 introduces an implementation of Microsoft® Internet Explorer's designMod...
  • woshinia
  • woshinia
  • 2014年02月10日 17:37
  • 4093

新增WORD文档自动上传编辑器

各位网友:    为了进一步方便大家编辑和发表文章,我们新增了WORD文档自动上传编辑器,希望能给您的使用带来方便。    通过使用该编辑器,你可以将带有图片的WORD文档直接复制到编辑器中发表,这样...
  • blogdevteam
  • blogdevteam
  • 2006年08月10日 17:30
  • 25567

如何使用HTML编辑器

HTML在线编辑器不需要懂得使用Dreamweaver,会用Word就会使用此编辑器,在文章系统或者是新闻系统需要文字编辑的web程序中非常实用。 但是如何将htmll编辑器嵌入到web页中和怎么...
  • u013696557
  • u013696557
  • 2014年02月22日 15:04
  • 588
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:让FreeTextBox(一个HTML编辑器) 支持上传本地图片并插入编辑器中
举报原因:
原因补充:

(最多只允许输入30个字)