开发iframe富文本编辑器的一点体会

Javascript开发iframe富文本编辑器的一点体会

前段时间有个需求是开发富文本编辑器，这个之前随做过，但看了需求，发现有些地方还需google就把遇到的问题记录一下。写这篇文章时用的TinyMCE编辑器就很强大，但毕竟是第三方的，项目也考虑了这些，如果做些自定义的东西不太方便。

1. 判断光标位置的元素（或者选中的部分）的样式。光标位置改变的时候更新工具栏对应按钮的样式。什么情况下光标的位置会改变呢？是键盘方向键和鼠标点击，于是就判断键盘事件和鼠标事件来执行光标移动的处理。

a. 获得光标位置或选中元素：首先getSelection，创建range。然后获得元素，获取到元素之后就可以或得样式、tagName等等，做更多的操作,运行代码：

复制代码代码如下:

信息< /span>

2. ie不能保持光标位置，这个是在添加超链接时候出现的问题，当不使用浏览器内置的输入框，光标移动其他的文本域里，ie会失去所选中的部分，无法对选中的部分加链接了，解决办法就是：利用range的getBookmark和moveToBookmark，然后给iframe的documen t绑定onbeforedeactivate(getBookmark)、onactivate（moveTo），这2个事件的大致意

思就是，当被激活和失去激活状态。增加事件之后，就不必保存lastRang或者再其他地方设置bookmark了，可以让ie像其他浏览器一样自动保持光标位置了

复制代码代码如下:

if(Util.browser.msie){

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

varRng = _self.getRange().range;

_self.rangeBookMark= Rng.getBookmark();

});

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

varRng = _self.getRange().range;

Rng.moveToBookmark(_self.rangeBookMark);

Rng.select();

_self.rangeBookMark = null;

});

}

3. ie中的撤销与重做。当iframe外部有弹出窗口、或者修改html撤销、重做功能将失效。只能归为ie的bug了。。。。也许ie没分清iframe和页面的document，把他们的撤销、重做混道义了。

如下：

复制代码代码如下:

信息< /span>

如何解决呢？只能依靠javascript模拟撤销与重做了。