0

我必须插入一些跨度以将选择保存/恢复到 contentEditable div。不幸的是，这些跨度必须包含至少一个字符才能允许“range.setStart(startNode,0);” 功能正常工作。所以，这是我的一组元素：

<div contentEditable='true' id='THE_DIV'>
   some text
      <span id='START_SELECTION'>xxx</span>
         selected text
      <span id='END_SELECTION'>yyy</span>
   other text
</div>

现在通过将 span display 属性设置为 none 应该没有问题，但是虽然 Fire Fox 正确隐藏了元素，但 Internet Explorer (7) 似乎忽略了它。

我注意到这种行为与 contentEditable 属性有关，但不幸的是我需要两者（contentEditable 父 div 和隐藏跨度子项）。

你有什么建议吗？

先感谢您，

弗拉维奥。

4

2 回答 2

2

这是 IE 中的故意行为。您可以运行一个鲜为人知的命令来禁用它：

document.execCommand("RespectVisibilityInDesign", false, true);

看这个演示：http: //jsfiddle.net/DGWZF/1/

另外，你看过Rangy 的选择保存和恢复模块吗？它完全符合您的要求。披露：我是 Rangy 的主要开发人员。

于 2012-04-25T11:52:11.730 回答
0

非常感谢蒂姆，我已经尝试过你的 Rangy 插件（查看之前的几个答案），它与我正在寻找的非常接近。不幸的是，当通过箭头键移动光标时，我注意到 FF 中有一个奇怪的行为。当光标进入一个跨度与另一个跨度时，左箭头不起作用。

我试图更清楚：

<div contenteditable='true' id='THE_EDITOR'>
   some text <span class='in_red'>other in red</span><span class='in_blue'>||or in blue</span>
</div>

我用过“||” 来表示光标。在这种情况下：<span></span><span>||</span> 左箭头无法在 FF 中移动光标（我不明白原因），但如果两个元素之间至少有一个字符，则可以正常工作：<span></span>[space]<span>||</span>

如果您想尝试重现此“错误”，则代码为（使用 JQuery）：

$("#THE_EDITOR").attr("contentEditable","true").keyup(function(){

   var savedSel = rangy.saveSelection();

   //this blok is only to clean the HTML code every time
   $(this).children(".star").each(function(){
      $(this).after($(this).html());
      $(this).remove();
   });

   //to wrap the spewial word "*" with a personal formatting span
   var str = $(this).html();
       str = str.split("*").join("<span class='star'>*</span>");

   $(this).html(str);

   rangy.restoreSelection(savedSel);
   rangy.removeMarkers(savedSel);
});

如果您尝试按顺序键入两个或多个“*”，然后使用左箭头向后移动，光标将不会移动。在它们之间放置一个空格或另一个字符，它会再次移动。

于 2012-04-26T07:55:58.417 回答