[h2]HTML在线编辑器实际上是什么[/h2] 其实有好几种实现方式，目前用得最多、兼容性最好的还是iframe方式。 [code]<iframe src="" frameborder="0"></iframe>[/code] 只有这个空iframe是不行的，还要用Javascript把它设成可编辑： [code]iframe.contentWindow.document.designMode = "on"; iframe.contentWindow.document.contentEditable = true;[/code] 换而言之，[b]HTML在线编辑器就是一个可编辑的iframe[/b]。 [h2]加粗、斜体、下划线、加链接等功能如何实现[/h2] 浏览器已经提供了实现这些功能的接口[b]execCommand[/b]： [code]iframe.contentWindow.document.execCommand([i]cmd, isDefaultShowUI, value[/i]);[/code] 这三个参数的意思分别是： [list] [*]cmd：命令文本，有好多，IE的可以看[url=http://msdn.microsoft.com/zh-cn/library/ms533049%28v=VS.85%29.aspx]这里[/url]，Firefox的可以看[url=https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla#]这里[/url]。[/*] [*]isDefaultShowUI：是否默认显示交互界面，比如加链接的时候，可以通过界面填入链接。不过这个参数存在兼容性问题，一般设为false将其禁用，并另外制作交互界面。[/*] [*]value：传入的值，某些命令可以省略。[/*][/list] execCommand的问题是，生成的代码可能不标准，比如在IE下，文字加粗用的是b标签而不是strong标签。 [h2]交互问题[/h2] 用户不可能总是在编辑器中输入，比如加粗、插入图片等功能是通过按钮操作的。假设用户要加粗一段选中的文字，当他按了加粗按钮后，选区以及焦点也会跟着跑到那去，因此选区（选中的文字）丢失，操作也就无法完成；同理，插入图片时插入位置也会丢失。 也就是说，要保存最后出现在编辑器中的选区。我采取的方案是，当焦点在编辑器内的时候，用一个定时器（setInterval）[b]定时获取当前选区[/b]。选区编程平时很少用，做起来也有很多兼容性问题，主要是参考微软的[i]MSDN[/i]（[url=http://msdn.microsoft.com/zh-cn/library/ms535872%28en-us,VS.85%29.aspx]TextRange[/url] [url=http://msdn.microsoft.com/en-us/library/ms537447%28VS.85%29.aspx]ControlRange[/url]）和Mozilla的[i]MDC[/i]（[url=https://developer.mozilla.org/En/DOM:range]Range[/url] [url=https://developer.mozilla.org/En/DOM:Selection]Selection[/url]）了。 [h2]回车问题[/h2] 在IE下，按回车是换段落，生成<p>，但在Firefox下是换行，生成的是<br>。要解决这个问题，就要监听keydown事件，如果检测到按键是回车，就插入“<p></p>”。 [h2]获取标准的代码[/h2] 如何获取编辑的内容呢？这个问题很简单，只要获取iframe页面body中的innerHTML就可以了： [code]var content = iframe.contentWindow.document.body.innerHTML;[/code] 然而，IE下的innerHTML非常不标准：标签名是大写的，属性没有引号包起来，单标签也没有结束符……即便是Firefox下获取的代码，也有少量瑕疵。这个时候就要用[b]正则表达式[/b]对代码进行标准化处理。 [h2]总结[/h2] 不多说了，做一遍HTML编辑器，你就会知道[url=http://ckeditor.com/]CKEditor[/url]是多么强大。