我可以't从draft js中获取html输出

I can't get the html output from draft-js?

本文关键字：js 获取 html 输出 draft 我可以      更新时间：2023-09-26

我一直在玩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回答了一个与我了解到他的图书馆时略有关联的问题。

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

这是我找到的两个图书馆。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写的一个很棒的博客，名为How Draft.js Representations Rich Text Data。它详细解释了数据转换。

只有只读属性可以生成HTML:

<Editor editorState={editorState} readOnly/>

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

<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>

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

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

最后在点击时将"编辑"的值更改为false

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

要扩展上面共享的库，这里有另一个好的库：draftjs到html

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

import draftToHtml from 'draftjs-to-html';
import {convertToRaw} from "draft-js";
const rawContentState = convertToRaw(editorState.getCurrentContent());
const markup = draftToHtml(rawContentState);

最适合转换为HTML和从HTML转换的包是草稿转换

但是，您应该注意使用高级用法来转换链接并自定义转换过程：

const htmlResult = convertToHTML({
  entityToHTML: (entity, originalText) => {
    if (entity.type === 'LINK') {
      return <a href={entity.data.url}>{originalText}</a>;
    }
    return originalText;
  }
})(editorState.getCurrentContent());

const contentState = convertFromHTML({
    htmlToEntity: (nodeName, node, createEntity): any | void => {
        if (nodeName === 'a') {
            return createEntity(
                'LINK',
                'MUTABLE',
                {url: node.href}
            )
        }
    }
})(htmlInput);
相关文章：