我无法从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>
        );
      }
    }

Answer 1

我使用了一个方便的库,draft-js-export-html.导入库,你应该能够看到HTML一旦你调用该函数,stateToHTML:

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

我对React很新,所以希望这适合你.我看了很多,contentState并且有一点点在那里使用库来解析更具吸引力的实体.

作者sstur 回答了一个与我相关的问题,在那里我了解了他的图书馆.

Answer 2

有readonly属性只生成HTML:

<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格式),而无需使用外部库.它在数据转换会话下记录.

以下是使用"convertToRaw"功能打印用户输入的方法

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

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

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

这是由rajaraodv撰写的一篇很棒的博客,名为Draft.js如何表示富文本数据.它详细解释了数据转换.