为什么 Rangy 库不适用于 Opera 中的 contenteditable？答案

【问题标题】：Why Rangy library doesn't work with contenteditable in Opera?为什么 Rangy 库不适用于 Opera 中的 contenteditable？
【发布时间】：2012-05-27 05:21:41
【问题描述】：

我在 contenteditable DIV 中使用流行的Rangy library。我的代码很简单：

var saved_selection = false;

$('#contenteditable').bind('keypress mouseup', function(e){
  $(this).find('.rangySelectionBoundary').remove();
  saved_selection = rangy.saveSelection();
});

现在这在 Chrome 和 FF 中运行良好。然而，在 Opera 中它的行为非常奇怪，因为它不允许在 contenteditable 中插入任何字符，而且它会失去焦点，或者至少看起来如此。

我已经为测试准备了 jsFiddle。在 Opera 中，无法在可编辑的 DIV 中输入任何字符：http://jsfiddle.net/twST6/1/

任何人都可以解释和解决我的问题如何使这段代码在 Opera 中工作？

提前感谢您的帮助。

【问题讨论】：

标签： selection opera contenteditable rangy

【解决方案1】：

有趣。我认为问题在于在 Opera 中的按键事件期间更改 DOM 会阻止本机浏览器按键动作的发生（我想我以前见过）。除了避免在每次按键时保存选择之外，我看不到一个简单的方法。另一种解决方案是将选择保存为内容中的字符索引，这不会更改 DOM，因此应该可以工作。看到这个答案：

https://stackoverflow.com/a/5596688/96100

我也即将为 Rangy 发布更强大的基于字符索引的选择保存/恢复。在此处查看演示：

http://rangy.googlecode.com/svn/trunk/demos/textrange.html

顺便说一句，Rangy 中有一个内置方法可以删除选择标记：

rangy.removeMarkers(saved_selection);

【讨论】：

感谢您的回答，虽然我有点迷失在其中，主要是因为我不是 JS 选择等方面的专业专家...您能否更新我/创建 jsFiddle 以便它可以正常运行即使在 Opera 中？非常感谢您的帮助。