将用户输入文本绘制为键入的指定颜色

Question

当每个用户输入不同颜色时，我想实现etherpad UI效果。我使用contenteditable div作为富文本编辑器。

到目前为止我尝试过：

1）在任何输入更改时，在原始文本和更改的文本之间进行差异（例如，使用diff-match-patch）。

2）查看diff子串边界，看看它是否位于用户文本内（由几个标签定义）

3）如果是真的，什么都不做。如果为false，则在该子字符串旁边插入两个颜色标记，并应用调用$(element).html(new_text)

的更改

有一个主要问题 - 调用html()会将插入符号位置重置为零，这在您在文本编辑器中工作时有点不好。我试图从contenteditable div中提取插入位置并再次使用diff.length偏移量设置它 - 这也不能正常工作，因为我的div中有很多子节点，而插入符号偏移是相对的给父母。

更新

所以，我可以稍微缩小我的问题范围：

1）我知道如何在TextNode元素

中获取插入位置

2）我知道如何在TextNode元素中设置它（使用Rangy或不使用）

3）唯一的问题是如何找出我现在关注的元素？

Answer 1

我最终使用了Rangy的saveSelection和restoreSelection函数。非常感谢Tim Down，当然。