30

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

5 回答 5

48

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

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

我对 React 很陌生，所以希望这对你有用。我查看了引擎盖，contentState那里发生了很多事情，这使得使用库来解析出更具吸引力的实体。

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

于 2016-04-28T03:52:16.497 回答
13

伊万。我也在玩 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 如何表示富文本数据”。它详细解释了数据转换。

于 2016-10-05T19:06:06.177 回答
11

有 readonly 属性可以只生成 HTML：

<Editor editorState={editorState} readOnly/>
于 2016-09-29T08:59:07.147 回答
2

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

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

编辑器状态可以直接存储在您的存储层中，当您将其渲染到 DOM 时，它很容易获得并有助于编辑。

通过单击文本，您可以使其可编辑，或将单击与编辑按钮绑定。您不能直接将单击绑定到“编辑器”组件，但可以将其放在包含“编辑器”的包装器上。

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

只需将“编辑”添加到您的状态为真，确保 readOnly 为真（您可以使状态的名称“编辑”更明显，如果它令人困惑）。

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

最后在单击时将“编辑”的值更改为 false

editContent() {
  this.setState({
    edit: false
  })
}
于 2017-03-04T03:27:08.227 回答
0

为了扩展上面共享的库，这里有另一个很好的库：draftjs-to-html

它将原始编辑器状态（JSON 对象）转换为纯 HTML。

import draftToHtml from 'draftjs-to-html';
import {convertToRaw} from "draft-js";

const rawContentState = convertToRaw(editorState.getCurrentContent());
const markup = draftToHtml(rawContentState);
于 2021-11-05T13:45:08.113 回答