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

Question

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

原文由 MFB 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 rob 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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”更好用。

原文由 Alberto T. 发布，翻译遵循 CC BY-SA 4.0 许可协议