Iframe-Inhalt editierbar, der in einem sortierbaren jqueryUI-Listenelement ist

Question

Ich habe ein Problem, wo, wenn ich ein Rich-Text-Feld, das Design-Modus hat, innerhalb einer sortierbaren LI ist. Das Problem ist, dass designMode auf 'Off' wechselt, wenn die LI an eine neue Position gezogen wird. Und obwohl ich in der Lage bin, den richtigen iframe zu tarnen, scheint es zu ignorieren, wenn ich sage, dass designMode wieder eingeschaltet werden soll, weiß jemand, warum das passiert? Danke fürs Lesen.

edit: jfiddle Beispiel: https://jsfiddle.net/LcLfaa8j/2/

function getRichTextField(itemId) { 
    console.log('get rich text field'); 
    return document.getElementById('rtf-iframe-' + itemId); 

}

$ (document) .ready (function() {

getRichTextField("sort-textItem-1").contentWindow.document.designMode = "On"; 

getRichTextField("sort-textItem-2").contentWindow.document.designMode = "On"; 

$("#text-areas").sortable({ 
    axis: 'y', 
    opacity: 0.8, 
    tollerence: 'pointer', 
    update: function(event, ui) { 
     var order = $(this).sortable("serialize", { key: "order" }); 
     console.log("New Order = " + order); 

     console.log('the iframe that was moved designMode is now Off...'); 

     var richText = getRichTextField($(this).data().uiSortable.currentItem.attr('id')); 

     console.log('TEST: the current is ' + $(this).data().uiSortable.currentItem.attr('id') + ' and designMode = ' + richText.contentWindow.document.designMode + ' doubleCheckOfRTFid = ' + $(richText).attr('id') + ' class = ' + $(richText).attr('class')); 

     richText.contentWindow.document.designMode = "On"; 

     console.log('just attempted to turn designMode back on... but it gets ignored'); 
    } 
    }); 

});

Answer 1

Es scheint, als würde eine kleine Verzögerung mit einem setTimeout hinzugefügt werden, bevor designMode wieder auf Fixes gesetzt wird. Ist das die einzige Lösung? Nur neugierig.

Answer 2

Dies ist nur eine Teilantwort.
Der designMode wird nicht ausgeschaltet; Es ist standardmäßig deaktiviert und das Dokument, in dem Sie .designMode="on" festgelegt haben, wird gelöscht (und dann von Grund auf neu erstellt), wenn Sie es ziehen. Sie können sehen, dass der Inhalt verschwindet, wenn Sie Inhalt in eines der Dokumente einfügen und dann ziehen. Sieht so aus, als würde der iframe ein neues .contentWindow bekommen, was bedeutet, dass es auch ein anderes untergeordnetes Dokument hat.
Sie können dies im Inspektor sehen, indem Sie

var before = getRichTextField("sort-textItem-2"); 
var beforecontentWindow=before.contentWindow; 

(jetzt die zweite iframe ziehen)
Jetzt laufen:

var after = getRichTextField("sort-textItem-2"); 
var aftercontentWindow=after.contentWindow; 

vergleichen nun die Referenzen mit ===:

before === after ;//returns true because iframe is the same 
beforecontentWindow === aftercontentWindow ;//returns false because .contentWindow changed 

Siehe auch diesen Beitrag Jquery Sortable and Draggable between parent and child frame, wo er Probleme mit der Implementierung von Drag hatte Giebel und sortierbar, aber hat es schließlich funktioniert. Ich weiß nicht, warum das Ziehen Ihres iframe ein neues contentWindow ergeben würde, aber vielleicht kann jemand anderes darauf aufbauen.