TinyMCE - Addon - Kompatibilität mit Mblock

[skerbis]

Wenn mit Mblock ein Tiny-Feld dupliziert (bzw. durch den Nutzer angelegt) wird, ist dieses nicht mehr editierter. Das erste Feld bleibt editierbar. https://github.com/akuehnis/redaxo5_addon_tinymce4/issues/1

[akuehnis]

tinymce reagiert auf diese events: $(document).on('ready pjax:success',function() { } Kennst du Mblock, bei welchem Event müsste es sich einhängen?

[skerbis]

Schau mal: https://github.com/FriendsOfREDAXO/mblock/blob/master/assets/mblock.js#L296 @joachimdoerr kann da sicher helfen.

[joachimdoerr]

@akuehnis das ist nicht ganz so easy, denn nach dem javascript part muss MBlock auch den DOM anpassen um beim editieren eines Modul Blocks entsprechend korrektes HTML zu liefern und entsprechend die Formular-Block-Inputs entsprechend korrekt mit den Var-Formular-Inhatlen zu befüllen, ähnlich wie bei Markitup oder auch Redactor müsste das in MBlock eingezogen werden.

Ich werde mir das anschauen.

[IngoWinter]

Ich sehe das ja nach wie vor nicht als Aufgabe von MBlock, diesen ganzen JS Kram zu duplizieren.

$(document).on('mblock:add', function (event, container) {
    // hier den Editor für die neue Textarea initialisieren
});

[akuehnis]

Ich kann das Problem nicht reproduzieren. Beim kopieren werden bei mir die Tinymce-Editors problemlos angelegt. Habt Ihr was geändert?

[skerbis]

Man sieht zwar duplizierte Tinies, aber man kann nichts anklicken.

[akuehnis]

Seltsam, bei mir funktioniert es, sogar mit 2 Tinys in einem Block. Was sagt die Javascript-Konsole?

[skerbis]

Safari und google chrome melden in der Konsole keinen Fehler. Video, wie es bei mir ist: http://data.klxm.de/index.php/s/pBl1x1PeGedRQfV

[georgkaser]

Bei mir funktionierts leider auch nicht (Chromium 56.0.2896.0). Wär cool, wenn man da auch Richtext benutzen könnte.

Saugeiles Addon übrigens, löst viele Probleme, danke dafür! Und auch dafür, dass man es auch ohne mform nutzen kann. Echt lässig...

[georgkaser]

Mit dem MarkItUp Editor funktionierts übrigens.

[akuehnis]

Ich glaube euch, mein Problem ist, dass ich es hier bei mir nicht nachvollziehen kann. Es scheint, tinymce.init wird aufgerufen (sonst wär' der Editor nicht da).

Nicht klickbar tönt für mich, als wäre da noch ein div darüber, der den Zugriff versperrt. Könnt ihr - die ihr das Problem habt - mal schauen ob das der Fall ist?

Ansonsten: tritt es immer auf oder nur in Kombination mit bestimmten anderen Feldern?

[georgkaser]

Denke es ist ein JavaScript Problem. In Chromium wird folgender Fehler angezeigt: Uncaught TypeError: Cannot read property 'replace' of undefined

[akuehnis]

Das ist die Zeile 256: label.attr('for', label.attr('for').replace(/\d+/, '' + index + ''));

Es scheint, es gibt kein Attribut 'for' im Label, darum stirbt das Script.

Das müsste abgesichert werden, ich sehe aber nicht, wie weit der Tinymce damit in Verbindung steht. Kannst du die Zeile 256 bei dir mal auskommentieren und schauen, ob das das Problem löst?

[georgkaser]

Ich habs jetzt mal auskommentiert. Die Fehlermeldung verschwindet zwar, es funktioniert aber trotzdem nicht. Der Tinymce ist zwar da, aber ohne eine einzige Funktion - das wars also nicht. Kann es sein, dass jede textarea seine eigene ID braucht damit es funktioniert?

[skerbis]

Siehe auch: http://www.redaxo.org/de/forum/addons-packages-f43/mblock-flexible-datenblocke-innerhalb-eines-moduls-t21374.html#p120233

[akuehnis]

Danke Mr. Skerbis. Also ruft mblock die globale Funktion tinymce4_init() auf soll ich tinymce4_init() auf einen bestimmten Event hören lassen?

tinymce4_init() verwirft erst alle Instanzen und baut dann neue. Eventuell müsste ich da noch ein save() einfügen, damit die Daten erst in die Textarea zurück geschrieben werden.

[skerbis]

Ich weiß nicht, ich denke es macht Sinn sich mit @joachimdoerr zu beraten. Er hat mblock entwickelt und kann da sicher mehr helfen. Ich habe halt nur diesen Forumeintrag gefunden und einen Verweis gesetzt. Ich schätze aber, dass dieses Event der helfende Auslöser sein könnte element.trigger('mblock:add', [element]); (https://github.com/FriendsOfREDAXO/mblock/blob/master/assets/mblock.js#L296)

[akuehnis]

Es funktioniert nun bei mir. Wichtig ist, dass beim Klonen des Editors vorher alle Tinymce zerstört werden. Dies benötigt folgenden Hack in mblock.js (und die Version 0.9.3 des Addons Tinymce4):

function mblock_reindex(){
....
   if (typeof tinymce4_init === 'function') {
        tinymce4_init();
    }
}

function mblock_add_item(element, item) {
    if (typeof tinymce4_remove === 'function') {
        tinymce4_remove();
    }
    .... 
}

@joachimdoerr: Da mblock verschiedene externe Addons bedienen können muss (da werden sicher noch weitere hinzukommen) schlage ich vor Mblock ein Callback-System zu verpassen. Dort könnten sich Addons dann einhängen.

Etwas in der Art:

var mblock_module = (function(){
    var callbacks = {
    };
    var mod = {}
    mod.registerCallback = function(evnt, f) {
        callbacks[evnt].push(f);
    }
    mod.getRegisteredCallbacks = function(evnt) {
        return callbacks[evnt];
    }
    mod.executeRegisteredCallbacks = function(evnt) {
        var list = mod.getRegisteredCallbacks(evnt);
        for (var i=0;i<list.length;i++) {
            list[i]();
        }
    }
    return mod;
})();

[darwin26]

@akuehnis ... ich denke das init und remove des tinymce allein ... in mblock leider nicht reicht. Der editor wird zwar dupliziert, der focus für das Textfeld ist jedoch immernoch nicht vorhanden. Hab bereits versucht den tinymce in mblock zu integrieren (da gibts mehrere stellen/ siehe redactor in mbock), jedoch noch erfolglos .. :(

[akuehnis]

@darwin26 verstehe ich jetzt nicht. Mit der Ergänzung der Funktionen wie oben beschrieben (mblock_reindex, mblock_add_item), kannst du damit nicht einen Block kopieren und diesen bearbeiten? Den Hinweis bezüglich "Focus für das Textfeld" kann ich nicht einordnen.

[darwin26]

hi... ja einen hinzufügen funktioniert... aber weitere gleichzeitig nicht... (FireFox 49.0.2) da müsste man (wahrscheinlich) schon auch die IDs ändern (siehe redactor in mblock) um auch die Sortierfunktion beizubehalten ...

alles ungetestet

$(this).find('.mce-tinymce').each(function(key){ inittinymce = true; eindex = key + 1; sindex = index + 1; $(this).find('textarea').each(function(){ // textarea befindet sich beim tinymce im parent() ? if($(this).attr('id')) { $(this).attr('id', $(this).attr('id').replace(/\d+/, sindex + '00' + eindex)); } }); }); und ggf nochmal remove/init aufrufen

`if (inittinymce) {

    $('.mce-tinymce').each(function(){
        var area;
        var content = '';
        $(this).find('div.mce-container-body').each(function () {
            if ($(this).attr('role')) {
                content = $(this).html();
            }
        });
        $(this).find('textarea').each(function(){ // parent?
            if($(this).attr('id')) {
                // copy content
                area = $(this).clone().css('display','block');
            }
        });
        if (area.length) { // wirft fehler, weil leer ...
            $(this).parent().append(area);
            $(this).parent().find('textarea').val(content);
            $(this).remove();
        }
    });

    if(typeof tinymce4_init === 'function') {
        tinymce4_remove();
        tinymce4_init();
        console.log("initTinyMCE intialisiert!");
    }

}`

ACHTUNG: ungetestet ...

wenn man die suche in mblock anwirft, und z.B. das redactor gedöns ansieht, findet man auch folgendes: public static function replaceEditorArea(MBlockItem $item, $count) { ...

            // process by type
            if (strpos($class, 'redactorEditor') !== false) {
                // change for id
                self::processRedactor($match, $item);
            }
            if (strpos($class, 'markitupEditor') !== false) {
                // change for id
                self::processMarkitup($match, $item);

... } hier könnte es ja auch mit den tinyMCEEditor-profilen Probleme geben ... bzw.: if (strpos($domId, 'REX_MEDIA') !== false or strpos($dom->getAttribute('class'), 'redactorEditor') !== false or strpos($domId, 'REX_LINK') !== false) { return false; }

oder bin ich aufm Holzweg.. bzw denk da zu kompliziert? Danke. Chris

[akuehnis]

Gleicher FF, Win 10, keine Probleme hier, auch im IE Edge und Chrome funktioniert es bei mir, getestet mit einem und zwei Tinymce pro Mblock.

Ich glaube wirklich, es geht einfacher: Wenn die Tinymce zerstört werden (gleich zu Beginn von der Funktion mblock_add_item), dann bleiben nur die Textarea im Dom, und die kann Mblock problemlos klonen.

Wenn der neue Mblock fertig aufgebaut ist (Ende von mblock_reindex), dann werden aus den bestehenden Textareas wieder Tinymce gemacht. IDs braucht es dafür nicht, ein Tinymce-Selektor ist ja normalerweise ein Klassenselektor.

[darwin26]

mach mal 3 bis XXX gleichzeitig ... ohne Zwischenspeichern des Modul Blockes ... da wird bei mir der TinyMCE (ab Nr. 3) einfach ohne textarea angezeigt ... (FF/ OS X)

[akuehnis]

Kein Problem bei mir. Ich hänge meine aktuelle mblock.js und mein Testmodul an, damit die Voraussetzungen gleich sind.

mblock.zip modul_input.zip

[joachimdoerr]

@akuehnis richtiger Ansatz. Erst müssen alle Instanzen zerstört werden, danach nochmals all neu initiiert werden. Wichtig ist dabei, dass die ID's vom MBlock.js korrekt gesetzt werden, sollte das standard "ID" Replacement Prozedere welches auf die default Form-Felder läuft genügen wars das schon. Willst du da ein Pull-Request fertigen? Ggf. wäre es auch cool, wenn du deine Callable-Callback Idee einfließen lassen tätest.

[akuehnis]

Ich schreibe gerne die Funktion um... und versuche mich mal mit einem Pull-Request. Sonst kommt das File dann hier als Attachment daher.

[darwin26]

@akuehnis Danke. läuft. k.A. wo ich da noch was drin hatte, das diesen fehler produzierte.

[darwin26]

@akuehnis ... allerdings wirft er nun nen fehler: TypeError: callbacks[evnt] is undefined callbacks[evnt].push(f); (mblock.js // zeile 20) ... scheint das ich ne pre-version zum callback erhalten habe ;) ...

[akuehnis]

@darwin26 Ja sorry, das stimmt. Lösch den Code var mblock_module = (function...)().

[ghost]

In der mblock.js würde ich in der Funktion mblock_replace_for() noch folgendes anpassen. Ansonsten hat es zumindest mit redactor2 bei mir auch gebugged.

if (typeof(label) !== 'undefined' && label.length) {
    label.attr('for', label.attr('for').replace(/_\d_+/, '_' + index + '_'));
}

[joachimdoerr]

das "mblock_replace_for" wird erstmal nicht mehr verwendet. das for Handling muss generell überarbeitet werden.

[darwin26]

Hi Joachim... in der 1.6 ist das Problem wieder vorhanden. Ich habe von @akuehnis die mblock.js in die 1.5 eingebaut... Damit funzt es...(mit 1.6 noch nicht getestet!!!) Danke. Gruß Chris

mblock.js.zip

[joachimdoerr]

@darwin26 wir müssen mal generell den tinymce in MBlock integrieren

[joachimdoerr]

@darwin26 ist das jetzt gelöst? Es gibt entsprechende Anfragen zu CKEditor - ggf. könnte die Lösung dort verwendet werden.

[darwin26]

HI, ich habe aktuell mit mBlock 1.7.1 / mform 5.1.0 - keine Probleme mehr damit. Es macht was es soll. Danke. gerne close