我一直在玩 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 元素。这是首选方法吗?
感谢大家的帮助!
最佳答案
有点晚了。需要注意的一件事:您的 fiddle 实体是“SEGMENTED”而不是“IMMUTABLE”。
看看这个 fork 的 fiddle : https://codepen.io/anon/pen/pMEoyN
当您键入此内容时:
const modifiedContent = Modifier.insertText(contentState,
selectionState,
text,
OrderedSet([ "INSERT" ]),
entityKey);
您插入的文本具有实体(最后一个参数)和内联样式(倒数第二个参数)。实体和内联样式在 Draft 中是不同的。
如果您查看底部的字符串化原始内容状态,您会看到当您继续键入时实体范围保持不变(实体未扩展),但内联样式已扩展(在你的例子。)。这与草稿的行为一致。您需要单独关闭内联样式。
关于javascript - Draft.js 插入不可变实体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45177431/