如何从Draft.js中检索文本

Question

我正试图编辑一段文本，然后在服务器端检索它并更新数据库。

这是我正在使用的代码：

constructor(props,context){
    super(props,context);
    this.handleOnClick = this.handleOnClick.bind(this);

    const processedHTML = DraftPasteProcessor.processHTML(this.props.rule.description.replace(/\n/g, "<br />"));
    const contentState = ContentState.createFromBlockArray(processedHTML); 
    var editorState = EditorState.createWithContent(contentState);
    var editorState = EditorState.moveFocusToEnd(editorState);
    this.state = {editorState: editorState};
    this.onChange = (editorState) => this.setState({editorState});
}



handleOnClick(event) {
   var text = this.state.editorState.getCurrentContent().getBlocksAsArray();
   var finalText;
   text.map((item) => {
   finalText = item.getText() + finalText});
   console.log(finalText)

  render(){

    return(
    <div>
    <Col smOffset={2} mdOffset={1}>
    <PageHeader>
        {this.props.rule.title}
    </PageHeader>
    <Editor
      editorState={this.state.editorState}
      onChange={this.onChange}
    />
    </Col>

     <Col smOffset={2} mdOffset={1}>
    <Button onClick = {this.handleOnClick()}>Update rule</Button>
    </Col>
    </div>
    );

}

但我有一个问题，draftJs返回的文本没有\n，所以我保存的文本格式不正确，有没有办法获得有换行符的文本？

- JoseCarlosPB

Answer 1

检索文本最佳方式是仅使用editorState.getCurrentContent().getPlainText('\u0001')

请注意，函数getPlainText始终会在块之间创建单个空格，因此您需要将\u0001作为参数发送。

- Breno Prata

---

你能解释一下为什么要使用“起始标题”字符吗？此外，文档中指出它将使用LF而不是“单个空格”(https://draftjs.org/docs/api-reference-content-state/#getplaintext)。 - mpen

我能否使用您建议的方法更新我正在读取文本的同一节点的纯文本值？ - Deepak Singh

已经有一段时间了，但我记得要更改值，您应该使用此链接：https://draftjs.org/docs/api-reference-editor-state#push - Breno Prata

如果您传入 '\u0001'，则仅使用 editorState.getCurrentContent().getPlainText() 即可正常工作，这样您将获得没有换行符的原始文本。至少在版本0.11.7中是这样运作的。 - Vano

Answer 2

你可以使用DraftJS的convertToRaw函数，类似下面这样的方法获取带有换行符的文本： DraftJS 的 convertToRaw 函数可以用来将内容转换为文本，并保留换行符。

import {
  convertToRaw,
} from 'draft-js';
const blocks = convertToRaw(editorState.getCurrentContent()).blocks;
const value = blocks.map(block => (!block.text.trim() && '\n') || block.text).join('\n');

- Piyush Zalani

Answer 3

Piyush Zalani的回答几乎是正确的，但如果有一个什么都没有的块，则最终连接会导致额外的换行符被追加。

这是一个稍微修改过的版本，可以正确处理只有换行符的块：

    const blocks = convertToRaw(editorState.getCurrentContent()).blocks;
    const mappedBlocks = blocks.map(
      block => (!block.text.trim() && "\n") || block.text
    );

    let newText = "";
    for (let i = 0; i < mappedBlocks.length; i++) {
      const block = mappedBlocks[i];

      // handle last block
      if (i === mappedBlocks.length - 1) {
        newText += block;
      } else {
        // otherwise we join with \n, except if the block is already a \n
        if (block === "\n") newText += block;
        else newText += block + "\n";
      }
    }

- justswim

Answer 4

  const { blocks } = convertToRaw(editorState.getCurrentContent());
  const mappedBlocks = blocks.map(
    block => (!block.text.trim() && "\n") || block.text,
  );

  return mappedBlocks.reduce((acc, block) => {
    let returned = acc;
    if (block === "\n") returned += block;
    else returned += `${block}\n`;
    return returned;
  }, "");
};```

- Павел Хавилов