javascript开发随笔3 开发iframe富文本编辑器的一点

近期，我们团队面临一个全新的挑战：开发一个富文本编辑器。虽然此任务看似似曾相识，但在深入研究需求细节后，我们发现其中蕴藏着许多未曾遭遇过的难题，值得我们去与记录。在此过程中，我们曾借助强大的TinyMCE编辑器进行尝试，作为一个第三方工具，它在满足我们特定需求时显得略有不足。

我们的首要任务是理解并操作光标位置及其所在元素的样式。每当光标位置发生改变，编辑器的工具栏按钮样式也需要相应更新。那么，何时会改变光标的位置呢？答案是键盘方向键的输入和鼠标的点击操作。为了应对这两种情况，我们需要对键盘事件和鼠标事件进行精确判断与处理。

为了实现这一目标，我们必须首先获取光标位置或选中的元素。为此，我们可以借助浏览器提供的 getSelection API 以及创建 range 对象来实现。这背后涉及到的技术细节颇多，但我们的目标是将这些复杂的技术实现转化为直观、易用的功能。

我们的富文本编辑器不仅需要在功能上与现有工具竞争，更需要在用户体验上实现突破。我们计划密切关注每一个细节，确保编辑器的每一个动作都能为用户提供流畅、自然的体验。从光标位置的判断到工具栏样式的更新，每一个环节我们都将精心打磨。

让我们构建一个可编辑的网页环境。当页面加载完毕，一个可编辑的文本区域将被创建并填充带有特定样式的文本。这个文本区域允许用户编辑内容，并且在编辑过程中，我们可以获取并显示关于当前选中元素的各种样式信息。

以下是HTML页面的结构：

```html

信息

```

以下是实现的代码：

```javascript

if (Util.browser.msie) { // 针对IE浏览器进行操作

// 在文档“beforedeactivate”事件触发时，获取当前范围并保存书签

Util.bind(this.E.ifr_win.document, "beforedeactivate", function() {

var Rng = _self.getRange().range;

_self.rangeBookMark = Rng.getBookmark(); // 保存当前光标位置的书签

});

// 当文档“activate”事件触发时，根据之前保存的书签恢复光标位置，并选中

Util.bind(this.E.ifr_win.document, "activate", function() {

var Rng = _self.getRange().range;

Rng.moveToBookmark(_self.rangeBookMark); // 恢复到之前保存的光标位置

Rng.select(); // 选中恢复后的范围

_self.rangeBookMark = null; // 重置书签

});

// 关于IE中的撤销与重做功能

// 当iframe外部有弹出窗口或修改html时，撤销和重做功能可能会失效。这可能是由于IE的bug所致。

// IE可能无法正确区分iframe和页面本身的document，导致撤销和重做功能混淆。

}

```

```html