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

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

代码下载


程序代码： [ 复制代码到剪贴板 ]

编辑器实际上是一个iframe
其实将数据装在到编辑器的实质是将iframe里面填充数据，那么就是：
iframe.document.body.innerHTML = "你的数据"

我不多说了，有些东西建议查msdn，上面写的很详细，专门写了一个例子说明如何制作一个编辑器，装载数据到编辑器中，在编辑器的光标位置插入数据：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> html编辑器教程 </TITLE>
<script language="javascript">
    <!--
    function init()
    {
        olEditor.document.open();
        olEditor.document.write("<div><i>HTML</i><b>编</b><font color=red>辑</font><u>器</u></div>");
        olEditor.document.close();
        olEditor.document.designMode="on";    //加上这个普通的iframe就可以变成一个在线编辑器了
    }

    function LoadDate(date)
    {
        olEditor.document.body.innerHTML = date;
    }

    function InsertDate(date)
    {
        olEditor.focus();
        olEditor.document.selection.createRange().pasteHTML(date);
        olEditor.focus();
    
    }
    // -->
</script>
</HEAD>

<BODY onload="init()">
<input type="text" name="myInsertDate" value="被插入数据<img src=http://www.openlab.net.cn/forum/olEditor/images/toolbar/face.gif>" size="60"/><input type="button" value="将数据插入编辑器中的光标位置" onclick="InsertDate(document.all.myInsertDate.value)"><br />
<input type="text" name="myLoadDate" value="被装载数据，支持<font color=blue>HTML</font>" size="60"/><input type="button" value="将数据装载到编辑器中" onclick="LoadDate(document.all.myLoadDate.value)">
<iframe id="olEditor" width="100%" height="400" SCROLLING ="yes"></iframe>
</BODY>
</HTML>