如何在草稿编辑器实例上呈现html？
如何在草稿编辑器实例上呈现html？
提问于 2018-06-17 03:30:57
我有一个必须将HTML模板呈现到编辑器上的用例。我也在探索同样的draftjs。我已经完成了基本的设置，并有简单的文本的draftjs编辑器渲染。
但是如果我将一个HTML字符串传递给相同的Editor组件，我会得到下面的异常。
DraftEditorContents-core.react.js:80 Uncaught TypeError: nextEditorState.getDirectionMap is not a function
at DraftEditorContents.shouldComponentUpdate (DraftEditorContents-core.react.js:80)
at checkShouldComponentUpdate (react-dom.development.js:11345)
at updateClassInstance (react-dom.development.js:11754)
at updateClassComponent (react-dom.development.js:13153)
at beginWork (react-dom.development.js:13824)
at performUnitOfWork (react-dom.development.js:15863)
at workLoop (react-dom.development.js:15902)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)你知道我需要做什么才能让它在草稿上工作吗？如果draftjs不适用于此，那么您建议使用其他库作为替代吗？
回答 1
Stack Overflow用户
发布于 2018-06-17 03:50:53
要将HTML字符串传递给编辑器，可以使用Draftjs编辑器提供的convertFromHTML函数：
componentWillMount() {
const compositeDecorator = new CompositeDecorator([
{
strategy: this.handleStrategy,
component: HandleSpan,
readOnly: true,
},
]);
const { value } = this.props;
if (value) {
const blocksFromHTML = convertFromHTML(value.replace(/(?:\r\n|\r|\n)/g, '<br /><br />'));
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap,
);
this.state = {
editorState: EditorState.createWithContent(
state,
compositeDecorator,
),
};
} else {
this.state = {
editorState: EditorState.createEmpty(),
};
}
}然后你可以在渲染函数中使用this.state.editorState作为道具：
<Editor
editorState={this.state.editorState}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50891076
复制相关文章
相似问题