Question

所以，我正在玩（AWESOME）Rangy文本选择包。我正在使用span在contenteditable=true内编辑文字，目标是拥有一个文本输入元素，允许每个角色的单独样式。让我强调最后一点 - 每个角色应该在自己的范围中。如果我不需要保持从一次击键到下一次击键的样式，这样就可以了。我只是做了类似的事情

var newHTML = field.innerText.split('').map(function(c){
    return ('<span class="letter">'+c+'</span>');
}).join('');
$(field).empty().append(newHTML);

并使用Rangy的（1.3）saveCharacterRange()函数来恢复选择，这一切都很好。

问题出现的时候，我已经设计了一些这样的跨度，我删除了一个，用新文本替换它。我希望新插入的文本没有样式，但是它会被插入前面的（或者如果选择在开头的话）下面。我已尝试通过在focusNode之后（或之前）明确地折叠选择区域来解决此问题，但似乎不允许endContainer（或startContainer）除了文本节点以外的任何内容......我甚至已经验证我可以创建一个文本范围，它会在我想要的地方折叠，但选择对象的setSingleRange()似乎在文本节点周围折叠。

我尝试插入一个新节点并将选择全部放在其中，当新节点在其中有内容之前工作，然后才调用insertNode()，但我显然可以＆＃39;在每个角色之间插入额外的内容......

这里有一个fiddle来展示我正在谈论的内容。谢谢你的帮助！

Answer 1

我认为您违反了一个常见问题：浏览器（特别是WebKit）对文档中的选择和插入符号的位置有特定的想法。以下是我最近对此主题的回答：

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

Answer 2

也许有人可以扩展这一点，但我认为save/restoreCharacterRanges()是解决这个问题的关键。我已经有了它（假设您的选择区域已折叠）in this fiddle，虽然不是我喜欢的方式 - 这种方法（删除刚刚添加的内容并进入新的范围）会导致密钥组之间的闪烁和keydown。我真的喜欢能够将光标（在keydown上）移动到一个新的范围内，这对用户来说是无缝的......

...和here's a fiddle适用于长选但不粘贴......

更新

我已经切换到'插入<span>὘</span>并将选择区域移动到它'的方法，这看起来效果很好，直到我开始尝试不同的浏览器。每个浏览器的行为完全不同！ Chrome会在需要时将光标正确移动到“空白”范围内，但会删除重音; Firefox完美地处理重音字符，但在删除跟随新范围的字符后无法进入新的范围; Safari显示重音标记然后移动到新的范围内，使重音符号成为孤儿......当删除后面的旧字母时，所有三个都会显示原始错误新的一个！此外，似乎不同的浏览器在按下修改键时报告不同的键码。这是一个失败的原因吗？我错过了什么吗？这是一个fiddle with the new code。

Rangy为细分的contenteditable div

2 个答案:

更新