使用convertFromHTML時刪除空元素（）

我試圖在初始化時用一些HTML內容填充Draft.js 0.10.0編輯器。問題是任何沒有文本的HTML塊元素都不會轉換爲ContentBlocks。所以從換行符開始的所有額外空格都被刪除。使用convertFromHTML時刪除空元素（）

我期望下面的代碼（或jsfiddle）有一些空的ContentBlocks，但沒有。只有包含文本的元素才能獲得ContentBlock。它在草案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>

來源

2017-03-15 Paul

沒辦法。

convertFromHTMLToContentBlocks.js：

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

爲了讓您將需要使用自己實現convertFromHTML()或叉草案-js和修改該文件空塊。

來源

2017-03-18 19:10:31

這只是殺WS中的文本，但是爲什麼'

'不會產生空塊 –

'產生一個空的塊，然後它就會被刪除。 –

感謝提示@Mikhail。我一直在嘗試修改你鏈接到的'joinChunks（）'方法。我可以評論它的一部分，但是然後我最終得到一堆不在HTML中的額外塊。如果您對如何修改該文件有任何指導，我們都會很感激。 – Paul

使用convertFromHTML時刪除空元素（）

回答

相關問題