我无法从 draft-js 获得 html 输出？

Question

我一直在玩 Facebook 的 draft-js，但我实际上无法弄清楚如何获取编辑器的 html 输出。下面例子中的console.log输出了一些 _map 属性，但是好像没有我的实际内容？

 class ContentContainer extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: '',
          editorState: EditorState.createEmpty()
        };
        this.onChange = (editorState) => this.setState({editorState});
        this.createContent = this.createContent.bind(this);
      }

      createContent() {
        console.log(this.state.editorState.getCurrentContent());
      }

      render() {
        const {editorState} = this.state;
        const { content } = this.props;
        return (
          <Template>
            <br /><br /><br />
            <ContentList content={content} />
            <div className="content__editor">
              <Editor editorState={editorState} onChange={this.onChange} ref="content"/>
            </div>
            <FormButton text="Create" onClick={this.createContent.bind(this)} />
          </Template>
        );
      }
    }

原文由 Ewan Valentine 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用了一个方便的库 draft-js-export-html 。导入库，一旦调用该函数，您就应该能够看到 HTML， stateToHTML ：

console.log(stateToHTML(this.state.editorState.getCurrentContent()));

我是 React 的新手，所以希望这对你有用。我查看了 contentState 的内幕，那里发生了一些事情，这使得使用库来解析实体变得更加诱人。

作者 sstur 在我了解到他的图书馆时 回答了一个与切线相关的问题。

原文由 Victor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

伊万。我也在玩 Draft.js 并遇到了同样的问题。实际上，Victor 提供了一个很好的解决方案。

这是我找到的两个库。 Victor 提到的那个在 GitHub 上的 star 比较多。

https://github.com/sstur/draft-js-export-html

https://github.com/rkpasia/draft-js-exporter

我只想补充一点，有一种方法可以在不使用外部库的情况下打印出内容（JSON 格式）。它记录在数据转换会话下。

下面是我如何使用“convertToRaw”函数打印出用户输入

console.log(convertToRaw(yourEditorContentState.getCurrentContent()));

确保通过编写从 Draft.js 导入了 convertToRaw 函数：

 import { convertFromRaw, convertToRaw } from 'draft-js';

这是 rajaraodv 写的一篇很棒的博客，名为 How Draft.js Represents Rich Text Data 。它详细解释了数据转换。

原文由 Jun Yin 发布，翻译遵循 CC BY-SA 3.0 许可协议