reactjs - 如何在 draftjs 中获取整个 contentState

Question

如何在draftjs中获取整个contentState？

比如我想通过点击一个按钮来修改内容的字体大小。默认是所有 contentState。用户无需在 mac 中单击 CMD+A。

请原谅我糟糕的英语。谢谢你。

Answer 1

当您单击 cmd+A 时，您将选择整个内容。您可以使用 draft.js 以编程方式完成 SelectionState单击按钮后。看看这个实际的工作示例 - https://jsfiddle.net/k7wghwuj/1/

一些解释。在您指定要应用的样式之前。例如，创建两种样式:第一种 - 红色背景，第二种 - 大字体 (26px)。定义 customStyleMap 对象。该对象的键应该是您的自定义样式和值的唯一名称 - 具有适当样式的对象。

const customStyleMap = {
  redBackground: {
    backgroundColor: 'red'
  },
  largeText: {
    fontSize: 26
  },
};

将此对象传递给 Editor 组件的 customStyleMap 属性:

<Editor
  placeholder="Type away :)"
  editorState={this.state.editorState}
  onChange={this._handleChange}
  customStyleMap={customStyleMap}
/>

添加 onClick 处理函数。将适当样式的名称作为第一个参数传递。

<button onClick={() => this.applyStyleOnWholeContent('redBackground')}>
  set red background for whole content
</button>
<button onClick={() => this.applyStyleOnWholeContent('largeText')}>
  set large font size for whole content
</button>

在 applyStyleOnWholeContent 中，您应该获取第一个和最后一个 ContentBlock 并使用 new SelectionState 构造函数以编程方式设置选择。

applyStyleOnWholeContent = (styleName) => {
  const editorState = this.state.editorState;
  let currentContent = this.state.editorState.getCurrentContent();
  const firstBlock = currentContent.getBlockMap().first();
  const lastBlock = currentContent.getBlockMap().last();
  const firstBlockKey = firstBlock.getKey();
  const lastBlockKey = lastBlock.getKey();
  const lengthOfLastBlock = lastBlock.getLength();

  let newSelection = new SelectionState({
    anchorKey: firstBlockKey,
    anchorOffset: 0,
    focusKey: lastBlockKey,
    focusOffset: lengthOfLastBlock
  });
  ...

之后，用Modifier.applyInlineStyle你应该生成新的内容状态，更新 EditorState，重置选择并应用您的更改。

  ...
  currentContent = Modifier.applyInlineStyle(
    currentContent,
    newSelection,
    styleName,
  )

  let newEditorState = EditorState.push(
    editorState,
    currentContent,
  )

  newSelection = new SelectionState({
    anchorKey: 0,
    anchorOffset: 0,
    focusKey: 0,
    focusOffset: 0
  });

  newEditorState = EditorState.forceSelection(newEditorState, newSelection);

  this._handleChange(newEditorState);
}