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

【问题标题】：How do I submit values from the text box as an HTML string?如何将文本框中的值作为 HTML 字符串提交？
【发布时间】：2019-12-20 21:30:38
【问题描述】：

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

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

我的状态：

editorState: EditorState.createEmpty

我的编辑器 JSX：

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

我的 onChange 处理程序：

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

还有我的 handleSubmit 函数：

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>
"

提前感谢您的帮助！

【问题讨论】：

他们在他们的库中提到您可以再次使用 json 来显示真实的 html，并且还提供了库 github.com/jpuri/draftjs-to-html 可用于将 RawDraftContentState 转换为 html。 github.com/jpuri/html-to-draftjs 提供了将 react-draft-wysiwyg 生成的 HTML 转换回 DraftJS ContentState 的选项，该选项可用于初始化编辑器。有关更多信息，请查看此网址 jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp 并滚动到底部。

标签： reactjs richtextbox wysiwyg draftjs react-draft-wysiwyg

【解决方案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()));

【讨论】：

【解决方案2】：

100% 有效

import { convertToHTML } from 'draft-convert';

const submitHandler = useCallback((event) => {
        event.preventDefault();
        const convertedData = convertToHTML(data.editor1.getCurrentContent());
});

【讨论】：