无法在编辑器中显示图像

Question

我正在使用draft-js和react-draft-wysiwyg软件包来显示我的应用程序的电子邮件编辑器。我能够显示正确的内容，但面临图像问题。

当图像是输入HTML的一部分时，它不显示在编辑器中。请找到我下面的示例代码。

import { Editor } from "react-draft-wysiwyg";

import {
  EditorState,
  ContentState,
  convertFromHTML
} from "draft-js";

const htmlContentFromServer =
            '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
            '<a href="https://www.facebook.com">Example link</a><br /><br/ >' +
            '<img src="https://raw.githubusercontent.com/facebook/draft-js/master/examples/draft-0-10-0/convertFromHTML/image.png" height="112" width="200" />';

this.state = {
      editorState: EditorState.createWithContent(
        ContentState.createFromBlockArray(
          convertFromHTML(
            htmlContentFromServer
          )
        )
      )
    };

<Editor
              editorState={this.state.editorState}
              wrapperClassName="c-react-draft"
              editorClassName="demo-editor"
              onEditorStateChange={this.onEditorStateChange}
              spellCheck={true}
              wrapperId={this.props.wrapperId}
            />

我能够使用此解决方案https://codepen.io/Kiwka/pen/YNYgWa显示图像。

但是上述解决方案仅在我使用'draft-js'软件包中的编辑器但我想使用'react-draft-wysiwyg'中的Editor时才有效，因为我获得了丰富的工具栏选项。

当图像是'react-draft-wysiwyg'编辑器中HTML内容的一部分时，需要显示图像的帮助。

Answer 1

使用过的CKEditor，它可以很好地与图像和hr标签一起使用。