如何将文本框中的值作为 HTML 字符串提交?

Question

我正在使用库react-draft-wysiwyg，我希望文本框中输入的值采用HTML字符串的形式。

目前，我在控制台中记录的输入值以我无法提交到后端的格式显示，因为它需要一串 HTML。我尝试过使用 convertToRaw，但它似乎并没有将数据格式更改为我想要的格式。

我的状态：

editorState: EditorState.createEmpty

我的编辑器 JSX：

<Editor
editorState={this.state.editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onEditorStateChange={this.onEditorStateChange}
/>

我的更改处理程序：

onEditorStateChange = (editorState) => this.setState({editorState});

和我的句柄提交函数：

handleSubmit = async (event) => {
event.preventDefault();
const convertedData = 
convertToRaw(this.state.editorState.getCurrentContent())
//Followed by some code about posting to an API

目前，当我查看已发布的内容时，它看起来像：

convertedData: {...}
blocks: {...}
0: {key: "174mo", text: "example text" etc... }
1: {key: "5cdsn", text: "example text2" etc... }

包含输入的所有文本格式的数组。 是否可以将其转换为HTML字符串？

例如：

"
<h1>This is a header</h1>
<ul>List item</ul>
"

提前感谢任何帮助！

Answer 1

您应该导入 draftToHtml。

import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs'; 
handleSubmit = async (event) => {
event.preventDefault();
const convertedData = 
draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()));    

Answer 2

它工作 100%

import { convertToHTML } from 'draft-convert';
const submitHandler = useCallback((event) => {
event.preventDefault();
const convertedData = convertToHTML(data.editor1.getCurrentContent());
});