javascript - Draft.js 自定义内容 block 不显示

Question

我正在从以编程方式创建的 block 数组创建 ContentState，但是当我使用 ContentState 创建 EditorState 时，编辑器中没有显示任何内容，这是创建自定义 block 的正确方法吗？

const dummyBlocks = [ new ContentBlock({
  key: genKey(),
  type: 'atomic',
  depth: 0,
  text: "This is a test block 1",
  characterList: List()

}), new ContentBlock({
  key: genKey(),
  type: 'atomic',
  depth: 0,
  text: "This is a test block 2",
  characterList: List()

})];

const cs = ContentState.createFromBlockArray(dummyBlocks);

const es = EditorState.createWithContent(cs);

Answer 1

当您手动创建 block 时，您需要将 List 传递到 characterList，这是您正在创建的 block 的文本的正确长度。

因此，您需要的不是 characterList: List()，而是如下所示:

const charData = CharacterMetadata.create();
const firstText = "This is a test block 1";
const secondText = "This is a test block 2";
const dummyBlocks = [ new ContentBlock({
  key: genKey(),
  type: 'atomic',
  depth: 0,
  text: firstText,
  characterList: List(Repeat(charData, firstText.length))

}), new ContentBlock({
  key: genKey(),
  type: 'atomic',
  depth: 0,
  text: secondText,
  characterList: List(Repeat(charData, secondText.length))

})];

您可以在此处阅读有关 CharacterMetadata 的更多信息:https://draftjs.org/docs/api-reference-character-metadata.html#content

这直接受到草稿的 AtomicBlockUtils 的启发，您可以在这里找到它:https://github.com/facebook/draft-js/blob/514490b1322e1c123524eae97d4aea25b4da16ce/src/model/modifier/AtomicBlockUtils.js#L66