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

设置属性contenteditable =＆＃34; true＆＃34;在WriteComponent上应该做你想要的。

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

此外，您应该将剩余元素设置为contenteditable =＆＃34; false＆＃34;。您可以通过设置属性＆＃39; editable＆＃39;来实现此目的。用于渲染器中的自定义块。

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

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

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

1 个答案: