使用带有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

设置属性CONTENTEDITABLE =“真”上WriteComponent应该做你想要什么。

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

此外，您应该设置其余元素contenteditable =“false”。您可以通过在渲染器中为您的自定义块设置属性'editable'来完成此操作。

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

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