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

标签 javascript reactjs draftjs

我一直在玩 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>
        );
      }
    }

最佳答案

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

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

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

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

关于javascript - 我无法从 draft-js 获得 html 输出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36689504/

相关文章:

javascript - 从wms图层保存要素的特定属性

javascript - 在 Crypto 中重现 SubtleCrypto 时遇到问题

javascript - 组件挂载时 onClick 的函数触发

reactjs - 防止 setState 重新渲染整个功能组件

draftjs - Draft.js - 添加没有选择文本的链接

javascript - DraftJs:使用实体键替换实体

javascript - 在回调中访问 'this' 应该引用我的数组

JavaScript-如何在 AngularJS 中动态显示只读星级?

javascript - 服务器在静态网站上渲染 React js

reactjs - 如何在我的react组件中渲染draft js的LINK类型的实体图?