将HTML推送到React-Draft-Wysiwyg和Draft.js中,可以通过以下步骤实现:
下面是一个示例代码:
import React, { Component } from 'react';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
class HtmlToDraft extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
htmlContent: '',
};
}
onEditorStateChange = (editorState) => {
this.setState({
editorState,
});
const contentState = editorState.getCurrentContent();
const htmlContent = convertToHTML(contentState); // 将Draft.js内容转换为HTML
this.setState({
htmlContent,
});
};
render() {
const { editorState, htmlContent } = this.state;
return (
<div>
<Editor
editorState={editorState}
onEditorStateChange={this.onEditorStateChange}
/>
<div dangerouslySetInnerHTML={{ __html: htmlContent }} />
</div>
);
}
}
export default HtmlToDraft;
在上述示例中,我们使用了react-draft-wysiwyg库提供的Editor组件来创建富文本编辑器,并使用Draft.js的EditorState来管理编辑器的状态。在onEditorStateChange事件中,我们将Draft.js的内容转换为HTML格式,并将其保存到组件的state中。最后,我们使用dangerouslySetInnerHTML属性将HTML内容渲染到页面上。
这样,你就可以将HTML推送到React-Draft-Wysiwyg和Draft.js中了。
请注意,上述示例中的convertToHTML方法是一个自定义方法,用于将Draft.js的内容转换为HTML格式。你可以使用第三方库如draft-js-export-html来实现这个功能。
希望这个答案能够满足你的需求,如果有任何问题,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云