当每个用户输入不同的颜色时，我想实现etherpad UI 效果。我使用 contenteditable div 作为富文本编辑器。
到目前为止我已经尝试过：
1) 在任何输入更改时，在原始文本和更改文本之间进行差异（例如，使用 diff-match-patch）。
2）查看差异子字符串边界，看看它是否位于用户文本内（由几个标签定义）
3) 如果是真的，什么也不做。如果为 false，则在该子字符串旁边插入两个颜色标签，并应用更改调用$(element).html(new_text)
有一个主要问题 - 调用html()会将插入符号位置重置为零，当您在文本编辑器中工作时这有点糟糕。我试图从 contenteditable div 中提取插入符号位置并使用diff.length偏移量再次设置它 - 这也不起作用，因为我的 div 中有很多子节点，并且插入符号偏移量是相对于父节点的。
更新：
所以，我可以缩小我的问题范围：
1）我知道如何在 TextNode 元素中获取插入符号的位置
2）我知道如何在 TextNode 元素中设置它（有或没有 Rangy）
3）唯一的问题是如何找出我的插入符号现在在哪个元素上？