将数据从内容可编辑 div 复制到隐藏输入以进行表单提交

Question

我想从我的可内容编辑的div中正确复制我的数据，以便我可以将其提交到我的数据库。 这将适用于类似于Facebook的帖子。我的代码如下所示：

<div id="urlinput" class="isPlaceholder" role="textbox" spellcheck="true"   aria-multiline="true"  data-placeholder-default="This is the Status text" contenteditable="true">
</div>

输入

一些数据后，HTML 如下所示：

<div id="urlinput" class="isPlaceholder" role="textbox" spellcheck="true" aria-multiline="true" data-placeholder-default="This is the Status text" contenteditable="true">This is line one<div>This is line two</div><div>This is line 3</div><div><br></div></div>

由于使用内容可编辑的divs 时，每一行都与另一个div 分开，因此安全执行此操作并仍然保持结构的最佳方法是什么，因此当我稍后从数据库中提取数据时，当我将其放入视图时，它仍然保持相同的格式。

Answer 1

你可以试试这个：

var contentEditableContent = $('#urlinput').html();

您的内容可编辑div看起来很熟悉，这是中型编辑器吗？如果是这样，您可以通过其 API 通过以下方式获取内容：

editor.serialize()['element-0'].value;

Answer 2

您可以在发送到服务器之前对可编辑div 的内容进行编码，并在从服务器检索回来后进行解码。

编码：

var urlinputVal = $("#urlinput").html();
var toSend = $('<span/>').text(urlinputVal).html();

解码：

var toRender = $('<span/>').text(serverVal).text();
$("#urlinput").html(toRender);

Answer 3

我相信

这个答案对我有用：https://stackoverflow.com/a/30329143/5988187

那是不久前的事了...我简化了它

  <script>
    function GetDivToHidden() {
      var divVal = document.getElementById('EditDiv').innerHTML;
      document.getElementById('EditDivHidden').value = divVal;
    }
  </script>
html ...
 <asp:HiddenField ID="EditDivHidden" runat="server" ValidateRequestMode="Disabled"></asp:HiddenField>
<div class="div-edit" id="EditDiv" contenteditable="true" ></div>
<asp:Button ID="Button1" OnClick="Button1_Click" OnClientClick="return GetDivToHidden();" runat="server" Text="Button" />