使用 convertFromHTML() 时删除空元素

Question

我正在尝试在初始化时用一些 HTML 内容填充 Draft.js 0.10.0 编辑器。问题是任何没有文本的 HTML 块元素都不会转换为 ContentBlocks。因此，所有换行符的额外间距都被删除了。

我希望下面的代码（或在 jsfiddle 中）有一些空的 ContentBlocks 但没有。只有其中包含文本的元素才会获得 ContentBlock。它在 Draft 0.9.1 中的作用与 this jsfiddle 中所见相同，所以我一定是做错了什么。 HTML 可能会有所不同，但如果需要对其进行操作，我确实可以访问它。

有人知道如何使用 convertFromHTML 让空行/内容块出现吗？

const theHTML =
  '<div>first line</div>' +
  '<div></div>' +
  '<p></p>' +
  '<br />' +
  '<div>&nbsp;</div>' +
  '<p>sixth line</p>' +
  '<div>seventh line</div>';

const {
  Editor,
  EditorState,
  ContentState,
  convertFromHTML
} = Draft;

class Container extends React.Component {
  constructor(props) {
    super(props);
    const blocksFromHTML = convertFromHTML(theHTML);
    const contentState = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    );
    this.state = {
      editorState: EditorState.createWithContent(contentState)
    };
  }
  render() {
    return (
      <div className = "container-root" >
      <Editor
        editorState = { this.state.editorState }
        onChange = { this._handleChange } />
      </div>
    );
  }
  _handleChange = (editorState) => {
    this.setState({
      editorState
    });
  }
}

ReactDOM.render( <Container /> , document.getElementById('react-root'))

body {
  font-family: Helvetica, sans-serif;
}

.container-root {
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.10.0/Draft.js"></script>

<div id="react-root"></div>

Answer 1

对我来说draft-js-import-html解决了这个问题。 stateFromHTML 函数将 html 转换为 contentState 并保留空标签。

取而代之：

const blocksFromHTML = convertFromHTML(theHTML);
const contentState = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap
);

只需使用这个：

 const contentState = stateFromHTML(theHTML);

Answer 2

不行。

convertFromHTMLToContentBlocks.js:

  // Kill whitespace after blocks
  if (
    lastInA === '\r'
  ) {
    if (B.text === SPACE || B.text === '\n') {
      return A;
    }

要保留空块，您需要使用自己的

convertFromHTML()

实现或 fork draft-js 并修改此文件。

Answer 3

我能够通过在将内容保存到后端之前附加一个换行符来解决这个问题。然后当它被解析回编辑器时，空块将包含换行符。

const handleSave = (data: string) => {
    const rawContent: RawDraftContentState = JSON.parse(data);
    // If we have an empty paragraph block, append a newline character so it parses properly
    const newContent = {
      ...rawContent,
      blocks: rawContent.blocks.map(block => {
        if (block.text === "") {
          return {
            ...block,
            text: "\n"
          };
        }
        return block;
      })
    };

    const contentState = convertFromRaw(newContent);
    onSave(contentState)
  };

Answer 4

要保留空的

<p><br></p>

标签，您可以做两件事

1. import {stateFromHTML} from 'draft-js-import-html';

   let contentState = stateFromHTML(html);

   这肯定会解决你的问题

2. 出于某种原因，如果您无法导入（peerDependency 冲突） 您只需将所有

   <p><br></p>

   转换为

   <div>&shy;</div>

   例如：

   const updatedContent = content.replace(/<p><br><\/p>/g, '<div>&shy;</div>');

然后您可以在 convertFromHTML 函数中使用 updatedContent

第二种方法的缺点是它不会让你的编辑器状态为空，所以编辑器中的任何占位符都不起作用。