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

有点晚。需要注意的一件事：您的小提琴的实体是“已分割的”，而不是“不可变的”。

看看这个分叉的小提琴： https://codepen.io/anon/pen/pMEoyN

键入时：

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

您插入的文本既有一个实体（最后一个参数）又有一个内联样式（倒数第二个参数）。实体和内联样式在草稿中是不同的。

如果您查看底部的原始内容的字符串化状态，则会发现ENTITY范围在您继续输入时保持不变（实体未扩展），但是内联样式已扩展（在Windows中命名为“ INSERT”您的示例。）。这与草稿的行为一致。您需要单独关闭嵌入式样式。

Draft.js插入不可变实体

1 个答案: