MForm8 Repeater textarea mit anderen WYSIWYG Editoren

[anveno]

Description / Beschreibung

wenn ich dem addTextAreaField die Klasse "redactor-editor--..." hinzufügen, damit der Redactor Editor gerendert wird, werden die Werte nicht gespeichert und bestehende Einträge nicht angezeigt. Lasse ich die Klasse weg und nutze nur die "pure" Textarea, klappt alles wie gewohnt.

<?php
use FriendsOfRedaxo\MForm;
// init mform
$mform = MForm::factory()
    // text input element
    ->addTextField(1, ['label' => 'test rex value 1'])

    // repeater wrapper element level 1
    ->addRepeaterElement(2, MForm::factory()
        // set fieldset
        ->addFieldsetArea('fieldset1', MForm::factory()
            // text input element
            ->addTextField('text1', ['label' => 'Text 1'])
            ->addTextAreaField('textarea', array('label' => 'Text', 'class' => 'redactor-editor--small'))
            // add second fieldset area
            ->addFieldsetArea('fieldset2', MForm::factory()
                // radio element
                ->addRadioField('radio1', [1 => 'test-1', 2 => 'test-2'], ['label' => 'Radio 1'])
            )
        ) , true, true, ['default_count' => 3]
    );

echo $mform->show();
?>

Affected versions / Verwendete Versionen

MForm 8.0.0 redactor 2.4.2

[skerbis]

Wirst wahrscheinlich auf den cke5 wechseln müssen. Redactor müsste wohl angepasst werden. Ob der Tiny geht, kann ich auch noch nicht sagen.

[joachimdoerr]

Aktuell wird CKE5 direkt im JS vom Repeater supported. Das war von mir ja so eigentlich nur ein Workaround, ich möchte das dahingehend ändern, dass der Repeater ein Event wirft auf das die Editoren zu reagieren haben auch der CKE5. Es ist einfach zu aufwändig alle Editoren zu Supporten, besser ist es wenn die Editoren den Repeater Supporten.

[alxndr-w]

Für redactor würde ich das Event integrieren, sobald möglich. Einfach Bescheid geben, wenn es implementiert ist.

[eaCe]

Mit Redactor in diesem Zusammenhang habe ich auch schon Erfahrung gesammelt. Das Problem das ich damals hatte war, das das Model nicht aktualisiert wurde, das wird an der Stelle allerdings benötigt. Ein Event muss von Redactor kommen, eher nicht vom Repeater. Beispiel:

$(document).on('rex:ready',function(event, container) {
    console.log('READY');
    $(container).find('[class*="redactor-editor--"]').each(function() {
        let classNames = $(this).attr('class').split(' ');
        for (let i = 0; i < classNames.length; i++) {
            let $profile = classNames[i].substring('redactor-editor--'.length);
            if ($profile !== '' && redactor_profiles[$profile]) {
                let options = redactor_profiles[$profile];
                options.lang = redactorLang;

                options['callbacks'] = {
                    'blur': (e) => {
                        console.log('BLUR');
                        $(document).trigger('redactor:change', [event]);
                    },
                };

                if (!('pasteImages' in options)) {
                    options.pasteImages = false;
                }
                $R('.redactor-editor--' + $profile, options);
            }
        }
    })
});

So könnte man z.B. auf den Blur hören und dann im Repeater updateValues triggern. Das wäre dann natürlich gebunden an Redactor. Vielleicht kann man das Event einfach mform:update oder so nennen.

EDIT: Hier mein Code zum beschriebenen: https://github.com/FriendsOfREDAXO/yform_flexible_content/blob/master/resources/js/textarea.js#L33-L46

[ynamite]

Tiny funzt übrigens auch nicht, gleiches Resultat wie bei Redactor, die Werte werden nicht gespeichert.

Die Idee mit dem Event finde ich gut, dann können die anderen Editoren reagieren wie sie möchten/können.

[shauste]

Nutzt jemand zwischenzeitlich einen funktionierenden (temporären) Workaround für den Redactor 2 Editor?

[alxndr-w]

Ich nicht. redactor2 oder redactor (Version 3, aktuelle Version)?

[skerbis]

Das redactor2 Addon wird nicht mehr supported oder weiterentwickelt und ist archiviert. Hier wird nichts passieren.

[alxndr-w]

Und mit redactor (3)?

[eaCe]

Wie ich oben beschrieben habe, glaube ich das wir ein Event vom Editor brauchen. Ich werde mir das spätestens nächste Woche noch einmal ansehen

[eaCe]

Vielleicht habe ich eine, wenn auch eher unschöne, Möglichkeit gefunden. Werde es heute Abend mal genauer testen

[eaCe]

Leider funktioniert meine Idee nicht zuverlässig. Ich befürchte es muss in den Editoren angepasst werden.

[alxndr-w]

Aber was und wie? @eaCe

[joachimdoerr]

Der Repeater müsste 3 Events werfen können mform:repeater:init, mform:repeater:prechange und mform:repeater:change

[shauste]

fyi: Nutze derzeit einen Workaround mit setTimeout, um Redactor im Repeater funktional zu haben. Unschön, aber klappt.

$(document).on('rex:ready',function(event, container) {
    setTimeout(function() {
    $(container).find('[class*="redactor-editor--"]').each(function() {
        let classNames = $(this).attr('class').split(' ');
        for (let i = 0; i < classNames.length; i++) {
            let $profile = classNames[i].substring('redactor-editor--'.length);
            if ($profile !== '' && redactor_profiles[$profile]) {
                let options = redactor_profiles[$profile];
                options.lang = redactorLang;
                if (!('pasteImages' in options)) {
                    options.pasteImages = false;
                }
                $R('.redactor-editor--' + $profile, options);
            }
        }
    })
    }, 25);
});

[shauste]

fyi: Nutze derzeit einen Workaround mit setTimeout, um Redactor im Repeater funktional zu haben. Unschön, aber klappt.

$(document).on('rex:ready',function(event, container) {
    setTimeout(function() {
    $(container).find('[class*="redactor-editor--"]').each(function() {
        let classNames = $(this).attr('class').split(' ');
        for (let i = 0; i < classNames.length; i++) {
            let $profile = classNames[i].substring('redactor-editor--'.length);
            if ($profile !== '' && redactor_profiles[$profile]) {
                let options = redactor_profiles[$profile];
                options.lang = redactorLang;
                if (!('pasteImages' in options)) {
                    options.pasteImages = false;
                }
                $R('.redactor-editor--' + $profile, options);
            }
        }
    })
    }, 25);
});

Das greift leider doch nicht, Werte werden am Ende nicht gespeichert.

[eaCe]

Ich habe das nicht vergessen und probiere immer wieder neue Methoden aus. Bisher noch ohne Erfolg. Das Problem ist meist beidseitig. Es braucht etwas vom Editor und vom repeater. Am Wochenende werde ich mich wieder intensiver damit auseinandersetzen.

[alxndr-w]

@eaCe aber das wäre doch kein Problem, man kann doch sowohl in mform als auch in den Editor-Addons dafür die Voraussetzungen schaffen, oder nicht?

Wenn's um ein konzeptionelles Problem geht: m.E. müsste man vor dem verschieben den Editor destroyen und danach wieder initialisieren. D.h. mit 2 Events in mform wäre es dort getan - die jeweiligen Addons könnten dann darauf mit einem Event-Listener reagieren.

[shauste]

Ich habe das nicht vergessen und probiere immer wieder neue Methoden aus. Bisher noch ohne Erfolg. Das Problem ist meist beidseitig. Es braucht etwas vom Editor und vom repeater. Am Wochenende werde ich mich wieder intensiver damit auseinandersetzen.

Gibt es hierzu ein Update?

[eaCe]

Leider noch nicht. Die Woche komme ich auch nicht dazu. Es gibt weitere Ansätze

[skerbis]

Wäre es eine einfachere Lösung, wenn die Texteditoren als Web-Component ausgeliefert würden? Dann müsste doch eigentlich nur der Tag des Editors repeatet werden und nicht destroyed oder so?

[caesarvoelkin]

Ich habe dasselbe Problem (mit TINY). Zudem sind auch Textfelder ohne Rich-Text-Editor sobald ein Apostroph (') im Text vorkommt fehleranfällig. 👉 Ganze Inhalte sind beim erneuten bearbeiten vom Block verschwunden.

[eaCe]

Danke für den Hinweis. Jeder Editor macht Probleme. Außer CKE. Das normale Zeichen Probleme bereiten sollte nicht sein. Eventuell komme ich am Sonntag dazu.

[godsdog]

Push... Nutze oft den TinyMCE, deswegen kann ich den Repeater mit der 8er nicht nutzen :(

[eaCe]

Ich glaube für den Tiny habe ich ein etwas unschönen, aber scheinbar funktionierenden workaround gefunden. Werde das noch mal überarbeiten und am Donnerstag zum Testen posten. Vorher komme ich nicht dazu.

[eaCe]

Ich habe leider mal wieder keine gute Nachricht. Meine neue Idee funktioniert auch nicht. Aber ich habe mich weiter mit tiny beschäftigt und herausgefunden das es einen inline Modus gibt. Für diesen braucht es aber eine div und keine textarea. Darauf kann man, glaube ich, aber nicht mit alpine horchen. Wyiwyg und dynamische Felder sind die Pest. Ich befürchte aktuell das wir eigene Felder für die Editoren benötigen. Redactor habe ich nicht weiter getestet, aber der scheitert schon beim initialisieren. Ich probiere weiter rum, werde anfangen den repeater umzubauen und bitte um Geduld

[joachimdoerr]

@eaCe es stellt sich ernsthaft die Frage ob der aufwand lohnt, mit CKE5 haben wir ein Editor der im Repeater funktioniert, es wäre durch aus sinnvoll lieber alle bestehenden CKE5 Probleme anzugehen statt weiter Zeit an Redactor und Tiny zu verlieren.