Draft.js获取已设置样式元素的选择或范围

时间:2016-11-21 15:06:54

标签: reactjs dom selection draftjs

我正在使用react-rte,但我愿意扩展它,所以让我们谈谈Draft-js。

我需要能够"内联式"一个选择。然后在随后的渲染中重新访问该选择的dom。

所以,我要强调一下选择。然后我坚持这份文件。然后我回来,重新加载文档,我需要能够访问突出显示的部分,但在dom中。

基本上在文档的一侧,我在draft-js之外应用标记,这些标记需要与突出显示的部分对齐。因此,当我进行初始突出显示时,我可以从window.getSelection()获取dom位置,然后我可以放置我的标记。但是dom可能会在以后改变,但我无法放置我的标记。

- 编辑 -

所以另一个用例是我突出显示一个选择,即使在同一个会话中,我需要以编程方式更改选择的颜色,所以我需要访问文档的部分,即使光标不在部分。

- 结束编辑 -

所以我真正需要的是类似于一个独特的类名,id或甚至更好的反应参考,用于执行内联样式时创建的新跨度。

如果您需要更好的解释,请告诉我。

1 个答案:

答案 0 :(得分:0)

SelectionState记录选择,包括起始块,起始偏移,结束块和结束偏移。将选择保存在代码中并稍后应用于编辑器是没有问题的。

  

所以我真正需要的是类似于一个独特的类名,id或甚至更好的反应参考,用于执行内联样式时创建的新跨度。

所以你想要的id是一个SelectionState,告诉span-js编辑器中的span。

<强>更新

您可以在block key节点属性中找到内联样式文本所属的data-offset-key={blockkey}-xx-xxblock key可帮助您从SelectionState.getStartKey()/getEndKey()找到节点。然后按span找到SelectionState.getStartOffset()/getEndOffset()节点。