将 HTML 提交到服务器时如何维护换行符和缩进？答案

【问题标题】：How do I maintain linebreaks and indenting when submitting HTML to a server?将 HTML 提交到服务器时如何维护换行符和缩进？
【发布时间】：2019-11-27 09:44:33
【问题描述】：

我有一个 HTML <textarea> 用于将 HTML 粘贴到其中。然后将 textarea 的内容提交到 firestore 服务器。

然后我将 HTML 渲染为：
<p white-space: pre-line;>HERE<p>

这种方法将保持换行但不会缩进。

这个：

<div>
  <table>
    <tr>
      <td>Test code</td>
    </tr>
  </table>
</div>

变成这样：

<div>
<table>
<tr>
<td>Test code</td>
</tr>
</table>
</div>

我将如何保持缩进？

【问题讨论】：

标签： javascript html css reactjs google-cloud-firestore

【解决方案1】：

找到了我自己问题的答案。只需像这样包装从服务器输出的代码。

<pre>
  <code>OUTPUT</code>
</pre>

【讨论】：

优秀... :)

【解决方案2】：

您可以使用ReactHtmlParser。可以这样称呼ReactHtmlParser(yourHtmlString)

【讨论】：

你是在<textarea> 还是我要渲染的地方打电话？
@Neil 所以你想让textarea 在加载时有缩进吗？还是您在不同于 textarea 的其他地方显示您的 html？
啊，我明白了。这将明显呈现“测试代码”字符串。周围的 HTML 仍然可以运行，但这不是我需要的确切结果。我还想渲染周围的 HTML。（以便您可以复制和粘贴它）textarea 将 HTML 提交到服务器。然后我在其他地方显示 HTML，但想保持格式并显示 HTML。
@Neil 你试过<textare value={ReactHtmlParser(yourHtmlString)}></textarea> 吗？这将有助于在您的编辑器中缩进您的 html。
感谢您的帮助。我自己找到了答案，但 ReactHtmlParser 绝对是我以前从未遇到过的有用工具。感谢您指出。