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>
        );
      }
    }

Answer 1

我使用了一个方便的库，draft-js-export-html。导入库，一旦调用函数stateToHTML：

，您应该能够看到HTML

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

我对React很新，所以希望这对你有用。我在contentState的引擎盖下看了一下，在那里有一点点，它使用一个库来解析那些更具吸引力的实体。

作者，sstur，answers a tangentially-related question我在那里了解了他的图书馆。

Answer 2

只有生成HTML的readonly属性：

<Editor editorState={editorState} readOnly/>

Answer 3

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

这是我找到的两个库。 Victor提到的那个在GitHub上有更多的明星。

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

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

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

以下是使用＆＃34; convertToRaw＆＃34;打印用户输入的方法。功能

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

确保通过编写：

从Draft.js导入convertToRaw函数

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

这是由rajaraodv撰写的名为 How Draft.js Represents Rich Text Data 的精彩博客。它详细解释了数据转换。

Answer 4

如果不愿意在代码中添加其他库，@ farincz的方法可以很好地工作。

<Editor editorState={this.state.editorState} readOnly/>

编辑器状态可以直接存储在您的存储层中，当您将其呈现给DOM时，它很容易获得并可以帮助编辑。

通过单击文本可以使其可编辑，或者使用编辑按钮绑定该单击。您不能直接将click单击绑定到'Editor'组件，但是您可以在包含'Editor'的包装器上使用它。

<div className="editor" onClick={this.editContent.bind(this)}>
  <Editor
    editorState={this.state.editorState}
    onChange={this.onChange}
    handleKeyCommand={this.handleKeyCommand}
    readOnly={this.state.edit}
  />
</div>

只需将'edit'添加到您的状态为true，确保readOnly为true（如果令人困惑，您可以使状态的名称'edit'更明显）。

this.state = {
 editorState: EditorState.createEmpty(), 
 edit: true
};

最后，点击

将'edit'的值更改为false

editContent() {
  this.setState({
    edit: false
  })
}

Answer 5

我这样做的方式是：

将editorState存储为html字符串editorState.toString('html')，然后在显示输出时，使用<div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

这非常方便，如果您只想输出draft-js的内容而不添加太多的HTML标记，将其作为道具传递，就像使用无状态功能组件一样。

另请遵循React的指南，以防止对dangerouslySetInnerHTML进行XSS攻击

https://reactjs.org/docs/dom-elements.html

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

5 个答案: