Heinrich Schiller  15.04.2021 14:03

Form-Submit mit tinyMCE und Ajax

Schon seit Jahren verwende ich für meine Web-Projekte den JavaScript-Editor TinyMCE. Er ist einfach zu nutzen und lässt sich gut konfigurieren. Meist wird der erstellte Text an ein PHP-Script abgeschickt und damit ist gut. Neuerdings nutze ich aber auch Ajax und bin zunächst auf dieses kleine Problem gestoßen.

Das Textarea-HTML-Element ist leer....... Doof :(

Mit Ajax gibt es etwas zu beachten. 

How it works

Wird eine textarea durch TinyMCE ersetzt, wird die textarea versteckt und der Editor wird stattdessen geladen. Bei normalem abschicken eines Formulars, wird der Inhalt des Editors zurück in die textarea kopiert, noch bevor das Formular abschickt wird. Auf normalem Weg macht TinyMCE automatisch. Bei Ajax-Formularen eben nicht und muss separat gemacht werden. Nachdem man den Editor verlassen hat, muss ein tinymce.triggerSave() erfolgen.

Die Lösung

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
});

Ich wär selbst gar nicht drauf gekommen und habe im Internet suchen müssen. Damit du es nicht auch musst, hier paar links.

TinyMCE, jQuery and Ajax forms