在draftjs編輯器中顯示圖像

Question

我正在使用draftjs編輯器。我可以渲染內容，但無法顯示圖像。如何在使用draftjs時顯示圖像？此時只顯示url而不是圖片。服務器發送如下數據：

img src =「http：// image_url」style =「argin：30px auto; max-width：350px;」

對不起，我不能使用img標籤html方式，因此排除了標籤語法。裝飾的

function findImageEntities(contentBlock, callback, contentState) { 
    contentBlock.findEntityRanges(character => { 
    const entityKey = character.getEntity(); 
    return (
     entityKey !== null && 
     contentState.getEntity(entityKey).getType() === "IMAGE" 
    ); 
    }, callback); 
} 

const Image = props => { 
    const { height, src, width } = props.contentState 
    .getEntity(props.entityKey) 
    .getData(); 
    return <img src={src} height={height} width={width} />; 
}; 
class AdminEditor extends React.PureComponent { 
    constructor(props) { 
    super(props); 
    this.state = { 
     editorState: EditorState.createEmpty(), 
     editorContent: undefined, 
     contentState: "", 
     touched: false 
    }; 
    } 

    componentWillReceiveProps(nextProps) { 
    if (nextProps.htmlMarkup !== this.props.htmlMarkup) { 
     const content = nextProps.htmlMarkup; 
     const blocksFromHTML = convertFromHTML(content); 
     const plainState = ContentState.createFromBlockArray(
     blocksFromHTML.contentBlocks, 
     blocksFromHTML.entityMap 
    ); 
     this.setState(state => ({ 
     editorState: EditorState.createWithContent(plainState, decorator) 
     })); 
    } 
    } 

    onEditorStateChange = editorState => { 
    this.setState({ 
     editorState 
    }); 
    }; 

    onEditorChange = editorContent => { 
    this.setState({ 
     editorContent 
    }); 
    }; 

    handleChange = event => { 
    this.props.setEditorState(
     this.state.editorState.getCurrentContent().hasText() && this.state.touched 
    ); 
    }; 

    render() { 
    const { editorState } = this.state; 
    const { stateOfEditor } = this.props; 
    return (
     <div> 
     <Editor 
      tabIndex={0} 
      editorState={editorState} 
      initialContentState={this.props.htmlMarkup} 
      toolbarClassName="home-toolbar" 
      onEditorStateChange={this.onEditorStateChange} 
      toolbar={{ 
      history: { inDropdown: true }, 
      inline: { inDropdown: false }, 
      link: { showOpenOptionOnHover: true }, 
      image: { 
       uploadCallback: this.imageUploadCallBack, 
       defaultSize: { height: "auto", width: "50%" } 
      } 
      }} 
      onContentStateChange={this.onEditorChange} 
      onChange={this.handleChange} 
     /> 
     </div> 
    ); 
    } 
} 

export default AdminEditor; 

精確副本是在我所不粘貼只是減少代碼

Answer 1

行數的findImageEntities的頂部只見道具onEditorStateChange = {this.onEditorStateChange}。我懷疑你正在使用draft-js-wysiwyg而不是draft-js。 在draft-js-wysiwyg中，您可以訪問這裏： https://github.com/jpuri/react-draft-wysiwyg/issues/589