Wie verwende ich mit HTML5 inhaltsbearbeitbare Felder in einer Formularübermittlung?

Ich habe also eine Reihe von Absatzelementen, die dynamisch aus einer Datenbank gefüllt werden. Ich habe die Elemente contenteditable gemacht. Ich möchte jetzt Änderungen an der Datenbank über eine Standardformularübermittlung zurücksenden. Gibt es eine Möglichkeit, die Contenteditable-Elemente zurück zu posten?

Sie müssen Javascript auf die eine oder andere Weise verwenden, es funktioniert nicht als “Standard” -Formularelement wie bei einem Textfeld oder ähnlichem. Wenn Sie möchten, können Sie ein verstecktes Textfeld in Ihrem Formular erstellen und in der Funktion onsubmit des Formulars das innereHTML von contenteditable in den Wert des Textfelds kopieren. Alternativ könnten Sie ajax/xmlHttpRqeuest verwenden, um das Zeug etwas manueller zu übermitteln.

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


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

Falls es jemanden interessiert, ich habe mit VueJS eine Lösung für ein ähnliches Problem gepatcht. In meinem Fall habe ich:

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

In “data” können Sie einen Standardwert für mainMessage festlegen, und in Methoden habe ich:

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

“d-none” ist eine Boostrap 4-Klasse zur Anzeige von none. Ganz einfach, und dann können Sie den Wert des contenteditable-Feldes in “gift[main_message]” während einer normalen Formularabsendung zum Beispiel kein AJAX erforderlich. Ich interessiere mich nicht für die Formatierung, daher funktioniert “innerText” für mich besser als “innerHTML”.

Muss es sich um eine Standardformularübermittlung handeln? Wenn Sie kein Formular mit Eingaben verwenden können oder wollen, können Sie AJAX (XMLHttpRequest + FormData) ausprobieren, wodurch Sie asynchrone Anfragen ausführen und besser steuern können, wie die Antwort angezeigt wird.

Wenn Sie es noch einfacher haben möchten, versuchen Sie es mit jQuery $.ajax Funktion (auch $.get und $.post). Es sendet Daten mit einfachen JS-Objekten.