0

我正在使用库 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>
"

提前感谢您的帮助！

4

2 回答 2

0

您应该导入 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()));
于 2019-08-14T10:30:16.057 回答
0

它工作 100%

import { convertToHTML } from 'draft-convert';

const submitHandler = useCallback((event) => {
        event.preventDefault();
        const convertedData = convertToHTML(data.editor1.getCurrentContent());
});
于 2021-12-12T17:09:15.947 回答