富文本编辑器，rich text editor, 简称 rte, 它提供类似于 microsoft word 的编辑功能，容易被不会编写 html 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 ie 浏览器支持，其它浏览器相继跟进，在功能的丰富性来说，还是 ie 强些。虽然没有一个统一的标准，但对于最基本的功能，各浏览器提供的 api 基本一致，从而使编写一个跨浏览器的富文本编辑器成为可能。[br][br]　　在很多开发者看来，富文本编辑器的编写是一件很神秘或者复杂的事情。神秘倒没有，复杂的话，确实如此。但是它的基本原理并不复杂，入门也不难。今天我们的主题是讲述基本原理，并逐步演示一个简单富文本编辑器的产生。这是我在 d2 上的一个分享内容，在台上的演讲效果不佳，固写下来，希望能够对感兴趣的读者有所帮助。[br][br]　　富文本编辑器的基本原理[br][br]　　这个原理实在是太简单了！对于支持富文本编辑的浏览器来说，其实就是设置 document 的 designmode 属性为 on 后，再通过执行 document.execcommand('commandname'[, uiflag[, value]]) 即可。commandname 和 value 可以在 msdn 上和mdc 上找到，它们就是我们创建各种格式的命令，比方说，我们要加粗字体，执行 document.execcommand('bold', false) 即可。很简单是吧？但是值得注意的是，通常是选中了文本后才执行命令，被选中的文本才被格式化。对于未选中的文本进行这个命令，各浏览器有不同的处理方式，比方 ie 可能是对位于光标中的标签内容进行格式化，而其它浏览器不做任何处理，这超出本文的内容，不细述。同时需要注意的是，uiflag 这个参数设置为 true 表示 display any user interface triggered by the command (if any), 在我们今天的教程中都是 false, 而 value 也只在某些 commandname 中才有，具体参考以上刚给出的两个链接。[br][br]　　为了不影响当前 document, 通常的做法是在页面中嵌入一个 iframe 元素，然后对这个 iframe 内的 document（通过 iframe.contentwindow.document 获得）进行操作。[br][br]　　十分简单，是吧？下面我们来动手做一个。[br][br]　　编写一个简单的富文本编辑器[br][br]　　这个例子使用了 yui. 即使你对它不是很熟悉也没有关系，我在这里只使用了它的 dom 和 event 的一些跨平台基本方法。[br][br]　　搭架[br][br]　　在此强调一下很久未曾提及的 unobtrusive. 我们的编辑器是对 textarea 元素的一个增强（enhencement），就是说，即使 javascript 被禁用了，用户还可以通过 textarea 编辑内容。[br][br]　　在这个例子中，我们将使用 yahoo.realazy 的命名空间，在之下实现一个 rte 的类。我们今天的编辑器很简单，因此构造器(constructor) 的参数也只有 textarea 一个。我们使用一个实例变量来保存工具条的各个项目。实例初始化放到一个叫 render 的方法中。这一步的页面和代码见第 1 步。[br][br]　　创建 iframe 并替换 textarea[br][br]　　搭好架子，正如我在前面所说，建立一个 iframe, 编辑器的所有操作都在 iframe 的 document 内执行。并且把 textarea 隐藏起来。从第 2 步中可以看到，我们已经有了一个 iframe, 但不能输入任何东西，很正常，我们没有打开它的 designmode 嘛。[br][br]　　开启 designmode[br][br]　　这一步涉及的东西挺多，也是关键。我们会创建获取 iframe 的 document 的方法，并通过程序的方式向 iframe 写入空页而非使用一个外接的 blank.html. 我们使用一个类属性 yahoo.realazy.rte.htmlcontent 来保存空页的 html. 在准备好一切后，就可以开启 designmode 了。页面和代码详见第 3 步。看，我们已经可以在 iframe 里输入东西了。[br][br]　　构建工具条[br][br]　　我们需要操作的工具条！这样才可以控制 iframe 里的内容，才能称之为编辑器。在此我并不打算实现太多的功能，只是选择字形、字号、加粗、斜体、下划线、居左、居中、居右、超链接和插图作为示例。对于跨平台，mozilla midas specification 是不错的参考。ok, 请看第 4 步，我们的工具条出来了，虽然很丑。我同时用 css 对 iframe 的宽度做出了一些调整。[br][br]　　给工具条加上事件[br][br]　　嗯，工具条出来了，编辑器看起来也“人模狗样”了，你兴奋的点啊点，没什么效果……意料中嘛。我们接着给工具条绑定一些事件，让编辑器内容能够响应工具条。在这一步，我们把 execcommand 再封一层，前面说过，我们用不上 uiflag，让它永远是 false 好了。好，有代码就有真相，请看第 5 步。如果是正使用 ie, 请先暂时转移到其它浏览器。看到了吧，工具条生效了！[br][br]　　解决 ie 的问题[br][br]　　well, 如果你没有听我的劝告，依然使用 ie, 你会发现除了字型和字号其它的都不能用。为什么呢？你观察一下，有没有发现，其它浏览器选择文本后，再点击工具条上的项目，被选中的文本是否依然选中的？而 ie 呢，在点击工具条时，选中的文本马上失去选中的状态，所以它们就失败了。所以，如果我们能够保证点击工具条文本保持选中状态，就可以解决 ie 的问题了。[br][br]　　microsoft 给 html 标签一个很奇怪的属性 unselectable, 只要设置为 on, 焦点不会转移到点击的元素上，从而保证文本的选中状态。[br][br]　　请看第 6 步。这也是解决 ie 头痛问题的关键所在。我曾经在这上面费了很大脑筋。[br][br]　　高级主题展望[br][br]　　good, 看看我们现在的代码，224 行。相比其它动辄上万行的编辑器，你可能会觉得不可思议。因为我们这个最基本的编辑器，连 selection 都没有用到。很多很酷的效果，比如 google doc 里能够动态改变链接文本，使用页内层而非弹出的 prompt 来操作等高级功能，基本上都要用到 textrange(ie) 或者 range(w3c). 要命的是这两个东西互补兼容，只是相似而已。入门推荐看ppk 的 introduction to range.[br][br]　　在此我们就不深入了，等我有时间我会总结一些奇技淫巧（呜呼，前端开发需要的奇技淫巧太多了，这不是好事情）出来。