javascript - Draft.js 插入不可变实体

Question

我一直在玩 Draft.js，我一直在尝试让不可变实体正常工作。

我想在用户单击按钮时插入一个不可变实体。这是插入实体的函数:

const text = "foo";

const editorState = this.state.value;
const selectionState = editorState.getSelection();
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity("TOKEN", "IMMUTABLE", { time: new Date().getTime() });
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const modifiedContent = Modifier.insertText(contentState, selectionState, text, OrderedSet([ "INSERT" ]), entityKey);
const nextState = EditorState.push( editorState, modifiedContent, editorState.getLastChangeType() );

this.setState({value: nextState}, this.focus );

我在这里有一个工作示例:https://codepen.io/dakridge/pen/XgLWJQ

它似乎几乎可以工作，但是在插入不可变文本之后，它似乎仍然是可编辑的，因为继续键入会保留实体的样式。

我做错了什么？有更好的方法吗？我看过这里发布的示例:https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/entity/他们似乎使用了 span 元素。这是首选方法吗？

感谢大家的帮助!

Answer 1

有点晚了。需要注意的一件事:您的 fiddle 实体是“SEGMENTED”而不是“IMMUTABLE”。

看看这个 fork 的 fiddle : https://codepen.io/anon/pen/pMEoyN

当您键入此内容时:

const modifiedContent = Modifier.insertText(contentState, 
   selectionState, 
   text, 
   OrderedSet([ "INSERT" ]), 
   entityKey);

您插入的文本具有实体(最后一个参数)和内联样式(倒数第二个参数)。实体和内联样式在 Draft 中是不同的。

如果您查看底部的字符串化原始内容状态，您会看到当您继续键入时实体范围保持不变(实体未扩展)，但内联样式已扩展(在你的例子。)。这与草稿的行为一致。您需要单独关闭内联样式。