Draft.js可以为已经样式化的元素选择或跨度 [英] Draft.js get selection or span for already styled elements

问题描述

我正在使用反应，但愿意扩展它，让我们来谈谈Draft-js。

I'm using react-rte but am willing to extend it so let's talk about Draft-js.

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

I need to be able to "inline-style" a selection. Then on subsequent renders re-access that selection's dom.

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

So let's say I highlight a selection. Then I persist the document. Then I come back, reload the document, I need to be able get access to that highlighted section, but in the dom.

基本上在文档的一侧，我在draft-js之外应用标记，这些标记需要与突出显示的部分对齐。所以当我做最初的突出显示，我可以从window.getSelection（）获得dom位置，我可以放置我的标记。但是dom可能会稍后改变，我将无法放置我的标记。

Basically on the side of the document I'm applying markers, outside of draft-js, and those markers need to line up with the highlighted part. So when I do the initial highlighting I can get the dom position from window.getSelection(), and i can place my marker. But the dom may change later and I won't be able to place my marker.

- 编辑 -

所以另一个用例是我突出显示一个选择，即使在同一个会话中，我需要改变选择的颜色，所以我再次需要访问文档的一部分，即使光标不在部分。

So another use case is that I highlight a selection, and even in the same session, I need to change the color of the selection programatically so again I need to access the section of the document even if the cursor is not on that section.

- 结束编辑 -

--end edit--

所以我真正需要的就是一个独特的类名， id或甚至更好地为您做一个内联样式时创建的新跨度做出反应。

So what I really need is something like an unique classname, id or even better a react ref for the new spans that are created when you do an inline style.

如果您需要更好的解释，请让我知道。

Please let me know if you need a better explanation.

推荐答案

SelectionState 记录选择，包括起始块，起始偏移，结束块和结束偏移。将代码保存在代码中并不适用于编辑器并不是问题。

The SelectionState records the selection, including start block, start offset, end block and end offset. It's not problem to save the selection in you code and apply to the editor later.

所以我真正需要的就是一个独一无二的类名，id或甚至更好地为您做一个内联样式时创建的新跨度做出反应。

So what I really need is something like an unique classname, id or even better a react ref for the new spans that are created when you do an inline style.

所以 id 你想要的是一个SelectionState，告诉你在draft-js编辑器中的跨度。

So the id you want is a SelectionState, tell where the span is in draft-js editor.

更新

您可以在中找到内置样式文本所属的块密钥 data-offset-key = {blockkey} -xx-xx 节点属性。 块密钥可以帮助您从 SelectionState.getStartKey（）/ getEndKey（）中找到该节点。然后通过 SelectionState.getStartOffset（）/ getEndOffset（）。

You can find the block key which your inline styled text belongs to, in data-offset-key={blockkey}-xx-xx node attribute. The block key helps you find the node from SelectionState.getStartKey()/getEndKey(). Then find the span node by SelectionState.getStartOffset()/getEndOffset().

这篇关于Draft.js可以为已经样式化的元素选择或跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！