knockout.js 用换行符在 textarea 中绑定 html 字符串的最佳方法答案

【问题标题】：knockout.js best way to bind html string in textarea with line breaksknockout.js 用换行符在 textarea 中绑定 html 字符串的最佳方法
【发布时间】：2017-01-04 02:37:02
【问题描述】：

我已经获得了我想与 knockout.js 绑定并在 textarea 中显示的 html 字符串，当然还允许在进行一些编辑后提交它。实现这一目标的正确方法是什么？

当我使用 HTML 绑定时，我可以绑定 one <br/> two 字符串，它在 textarea 中显示相同，但提交后，我得到编码字符串 one&lt;br/&gt;two，这还不错，我可以稍后处理，但仍然存在换行问题。

基本上我想保留：

原始换行符
原始html文本

现在，当我通过时：

<html>
<body>

同时使用value 和html 绑定，在淘汰赛中我得到脚本异常，因为没有处理新行。特殊字符也被编码：

Content: ko.observable("&lt;html&gt;
&lt;body&gt;

有什么想法吗？

【问题讨论】：

请展示你到目前为止所做的尝试。
正如我所说，我当然尝试了 html 绑定和值绑定。我认为没有必要粘贴代码，因为这没什么不寻常的。此外，我觉得解决方案不仅仅是绑定方法。

标签： javascript knockout.js escaping textarea

【解决方案1】：

您可能希望使用btoa 对实际值进行编码，以便在提交时不会继续进行修改。然后您将使用atob 在服务器上进行解码。这是一个小演示，可让您了解 html 的各种处理方式。

ko.applyBindings({stuff: ko.observable('&lt;h1&gt;Foo&lt;/h1&gt;hi\nthere')});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<textarea data-bind="value:stuff"></textarea>
<pre data-bind="text:stuff"></pre>
<hr />
<pre data-bind="html:stuff"></pre>
<hr />
<pre data-bind="text: btoa(stuff())"></pre>

【讨论】：