draftjs - 使用带有 DraftJS 的 blockRendererFn 自定义块

Question

是否可以渲染一个自定义块，其中某些部分是可编辑的，而有些则不是？

这是我要实现的目标的示例。ReadOnlyComponent组件应该是只读的，而WriteComponent包含可编辑的数据。

class CustomBlock extends React.Component {
  props: Props;
  render() {
    return (
      <Layout>
        <LeftColumn>
          <ReadOnlyComponent>
            {this.props.block.getData().get('speaker')}
          </ReadOnlyComponent>
        </LeftColumn>
        <RightColumn>
          <WriteComponent>
            <EditorBlock {...this.props} />
          </WriteComponent>
        </RightColumn>
      </Layout>
    );
  }
}

这是我们传递给编辑器以创建自定义块组件的blockRendererFn 属性：

<Editor
  editorState={this.state.editorState}
  blockRendererFn={() => ({
    component: CustomBlock,
  })}
/>

Answer 1

在 WriteComponent 上设置属性 contenteditable="true" 应该做你想做的事。

class CustomBlock extends React.Component {
  ...
        <RightColumn>
          <WriteComponent contenteditable="true">
            <EditorBlock {...this.props} />
          </WriteComponent>
        </RightColumn>
      </Layout>
    );
  }
}

此外，您应该将剩余元素设置为 contenteditable="false"。您可以通过在渲染器中为自定义块设置属性“可编辑”来做到这一点。

<Editor
  editorState={this.state.editorState}
  blockRendererFn={() => ({
    component: CustomBlock,
    editable: false,
  })}
/>

现在，您的自定义块应该呈现为不可编辑，除了 WriteComponent 中的任何内容。