展开元素时在 contenteditable 中保留插入符号的位置？答案

【问题标题】：Preserve caret position in contenteditable when unwrapping element?展开元素时在 contenteditable 中保留插入符号的位置？
【发布时间】：2012-05-23 12:09:43
【问题描述】：

我有这个问题，我试图在this jsFiddle 中显示。我有 contenteditable ，其中是简单的 html - 只有文本和一个 <B> 元素。我的问题是关于插入符号位于<B> 元素内部并且用户点击“X”键的情况。然后<B> 元素被成功解包，但插入符号改变位置并移动到解包<B> 元素的开头。

我希望插入符号不改变其位置并保持在 samoe 位置。是否可以？最好使用Rangy library 解决方案？

为了这个问题，代码被简化了：

<div id="contenteditable" contenteditable="true">
  text text text text <b>bold bold bold</b> text text text
</div>

$(document).ready(function(){
  $('#contenteditable').bind('keyup', function(e){
    if (e.which == 88) {
      $('#contenteditable').find('b').contents().unwrap();
    }
  });
});

【问题讨论】：

标签： jquery selection contenteditable rangy

【解决方案1】：

我建议将插入符号的位置作为字符索引存储在 contenteditable 元素内的文本中。我在回答你最近的一个问题时链接到的相同代码可以：

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

【讨论】：

哇，这真是太巧妙了。从没想过会这么容易。我尝试了很多困难的方法，但这很简单：-）谢谢！
简单？！这其中最简单的部分在哪里？