Question

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

我希望下面的代码（或jsfiddle中的代码）有一些空的ContentBlocks，但没有。只有包含文本的元素才能获得ContentBlock。它在草案0.9.1中的行为与this jsfiddle中的相同，所以我一定做错了。 HTML可以有所不同，但如果需要操作，我可以访问它。

任何人都知道如何使用convertFromHTML显示空行/内容块？

＆＃13;

<div id="parent">
    <div id="child">body</div>
</div>

<style>
#parent {display: table;}
#child {
    display: table-cell;
    vertical-align: middle;
}
</style>

＆＃13;

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

＆＃13;

body {
  font-family: Helvetica, sans-serif;
}

.container-root {
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

＆＃13;

Answer 1

没办法。

convertFromHTMLToContentBlocks.js：

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

要保留空块，您需要使用自己的convertFromHTML()或fork draft-js实现并修改此文件。

Answer 2

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

取而代之：

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

简单地使用这个：

 const contentState = stateFromHTML(theHTML);

使用convertFromHTML（）时删除空元素

2 个答案: