使用 HTML5，如何在表单提交中使用 contenteditable 字段？答案

【问题标题】：Using HTML5, how do I use contenteditable fields in a form submission?使用 HTML5，如何在表单提交中使用 contenteditable 字段？
【发布时间】：2011-09-09 00:21:28
【问题描述】：

所以我有一堆从数据库动态填充的段落元素。我已经使元素内容可编辑。我现在想通过标准表单提交将编辑提交回数据库。有没有办法将 contenteditable 元素发布回来？

【问题讨论】：

标签： html contenteditable

【解决方案1】：

您必须以一种或另一种方式使用 javascript，它不会像使用 textarea 等那样作为“标准”表单元素工作。如果您愿意，您可以在表单中创建一个隐藏的 textarea，并在表单的 onsubmit 函数中将 contenteditable 的 innerHTML 复制到 textarea 的值。或者，您可以使用 ajax/xmlHttpRqeuest 手动提交内容。

function copyContent () {
    document.getElementById("hiddenTextarea").value =  
        document.getElementById("myContentEditable").innerHTML;
    return true;
}


<form action='whatever' onsubmit='return copyContent()'>...

【讨论】：

似乎最好使用innerText，否则你会将所有不可见的标记放入textarea。
这就是重点。您需要所有这些标记，为什么还要使用 contentEditable？请记住 textarea 是隐藏的，它只是用于在将内容发送到服务器之前保存内容。

【解决方案2】：

如果有人感兴趣，我用 VueJS 修补了一个类似问题的解决方案。就我而言，我有：

<h2 @focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>

在“数据”中，您可以为 mainMessage 设置默认值，在我的方法中：

methods: {
  updateMainMessage: function(e) {
    this.mainMessage = e.target.innerText;
  }
}

"d-none" 是一个 Boostrap 4 类，用于显示无。就这么简单，然后您可以在普通表单提交期间获取“gift[main_message]”内的 contenteditable 字段的值，例如，不需要 AJAX。我对格式不感兴趣，因此“innerText”对我来说比“innerHTML”效果更好。

【讨论】：

【解决方案3】：

是否需要标准表单提交？如果您不能或不想使用带有输入的表单，您可以尝试 AJAX (XMLHttpRequest + FormData)，通过它您可以执行异步请求并更好地控制响应的显示方式。

如果您希望它更简单，请尝试使用 jQuery 的 $.ajax 函数（还有 $.get 和 $.post）。它使用简单的 JS 对象发送数据。

【讨论】：

XHR 使用 FormData 的示例：developer.mozilla.org/en-US/docs/Web/API/FormData/…