使用带有 DraftJS 的 blockRendererFn 自定义块答案

【问题标题】：Custom block using blockRendererFn with DraftJS使用带有 DraftJS 的 blockRendererFn 自定义块
【发布时间】：2017-04-18 15:38:18
【问题描述】：

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

这是我想要实现的一个示例。 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>
    );
  }
}

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

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

【问题讨论】：

标签： draftjs draft-js-plugins

【解决方案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 中的任何内容。

【讨论】：