Html online editor

看了现在网上流行的在线编辑器，也忍不住想了解一下原理。下了目前应用最广泛的eWebEdit，这个是我见到的最强的开源在线编辑器...研究了一天，终于知道了核心原理。

先解释一下在线编辑器的原理： 首先需要IE5.0以上版本的支持。因为IE5.0以上版本有一个编辑状态，可以在一个iframe里面输入文字。然后通过 "document.body.innerHTML"可以获取iframe里面的html代码，这个就是关键。那怎么才能让ifrmae处于编辑状态呢， 可以用：

function document.onreadystatechange()
{
HtmlEdit.document.designMode="On";
}

函数实现。剩下的问题就是就是取得焦点和选中的值：

HtmlEdit.focus(); var sel = HtmlEdit.document.selection.createRange();

以上2句可以获取选中的值的html代码。

到 了这里，基本原理搞清楚了，然后我们可以用 insertHTML("str")方法将html字符替换掉选种的值。以下就给出一个简单的demo来演示只有加粗效果的在线编辑器。我这里用了一个 textarea来或得iframe里的html值，实际情况，可以将textarea的display设置成false，然后就可以将iframe的内 容提交.
函数实现。剩下的问题就是就是取得焦点和选中的值：

HtmlEdit.focus(); var sel = HtmlEdit.document.selection.createRange();

以上2句可以获取选中的值的html代码。

到 了这里，基本原理搞清楚了，然后我们可以用 insertHTML("str")方法将html字符替换掉选种的值。以下就给出一个简单的demo来演示只有加粗效果的在线编辑器。我这里用了一个 textarea来或得iframe里的html值，实际情况，可以将textarea的display设置成false，然后就可以将iframe的内 容提交.
函数实现。剩下的问题就是就是取得焦点和选中的值：

HtmlEdit.focus(); var sel = HtmlEdit.document.selection.createRange();

以上2句可以获取选中的值的html代码。

到 了这里，基本原理搞清楚了，然后我们可以用 insertHTML("str")方法将html字符替换掉选种的值。以下就给出一个简单的demo来演示只有加粗效果的在线编辑器。我这里用了一个 textarea来或得iframe里的html值，实际情况，可以将textarea的display设置成false，然后就可以将iframe的内 容提交.

http://www.cnbruce.com/blog/showlog.asp?log_id=1168