javascript开发随笔3 开发iframe富文本编辑器的一点体会
程序员文章站
2022-03-20 15:13:56
就把遇到的问题记录一下。写这篇文章时用的tinymce编辑器就很强大，但毕竟是第三方的，项目也考虑了这些，如果做些自定义的东西不太方便。 1. 判断光标位置的元素（或者选中...
就把遇到的问题记录一下。写这篇文章时用的tinymce编辑器就很强大，但毕竟是第三方的，项目也考虑了这些，如果做些自定义的东西不太方便。
1. 判断光标位置的元素（或者选中的部分）的样式。光标位置改变的时候更新工具栏对应按钮的样式。什么情况下光标的位置会改变呢？是键盘方向键和鼠标点击，于是就判断键盘事件和鼠标事件来执行光标移动的处理。
a. 获得光标位置或选中元素：首先getselection，创建range。然后获得元素，获取到元素之后就可以或得样式、tagname等等，做更多的操作,运行代码：
2. ie不能保持光标位置，这个是在添加超链接时候出现的问题，当不使用浏览器内置的输入框，光标移动其他的文本域里，ie会失去所选中的部分，无法对选中的部分加链接了，解决办法就是：利用range的getbookmark和movetobookmark，然后给iframe的document绑定onbeforedeactivate(getbookmark)、onactivate（moveto），这2个事件的大致意思就是，当被激活和失去激活状态。增加事件之后，就不必保存lastrang或者再其他地方设置bookmark了，可以让ie像其他浏览器一样自动保持光标位置了
3. ie中的撤销与重做 。 当iframe外部有弹出窗口、或者修改html撤销、重做功能将失效。只能归为ie的bug了。。。。也许ie没分清iframe和页面的document，把他们的撤销、重做混道义了。
如下：
如何解决呢？ 只能依靠javascript模拟撤销与重做了。网络这方面的资源还是不少的，就不在此详细说明了
1. 判断光标位置的元素（或者选中的部分）的样式。光标位置改变的时候更新工具栏对应按钮的样式。什么情况下光标的位置会改变呢？是键盘方向键和鼠标点击，于是就判断键盘事件和鼠标事件来执行光标移动的处理。
a. 获得光标位置或选中元素：首先getselection，创建range。然后获得元素，获取到元素之后就可以或得样式、tagname等等，做更多的操作,运行代码：
2. ie不能保持光标位置，这个是在添加超链接时候出现的问题，当不使用浏览器内置的输入框，光标移动其他的文本域里，ie会失去所选中的部分，无法对选中的部分加链接了，解决办法就是：利用range的getbookmark和movetobookmark，然后给iframe的document绑定onbeforedeactivate(getbookmark)、onactivate（moveto），这2个事件的大致意思就是，当被激活和失去激活状态。增加事件之后，就不必保存lastrang或者再其他地方设置bookmark了，可以让ie像其他浏览器一样自动保持光标位置了
3. ie中的撤销与重做 。 当iframe外部有弹出窗口、或者修改html撤销、重做功能将失效。只能归为ie的bug了。。。。也许ie没分清iframe和页面的document，把他们的撤销、重做混道义了。
如下：
如何解决呢？ 只能依靠javascript模拟撤销与重做了。网络这方面的资源还是不少的，就不在此详细说明了