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小道具れる：WriteComponentに=「true」の属性contenteditableは何をしたい

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

Answer 1

設定を行うべきです。

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にあるものを除き、編集不可能なものとしてレンダリングする必要があります。