CkEditor: Wie öffne ich meinen eigenen Plugin-Dialog

Question

Ich bin neu in CkEditor Plugin-Entwicklung und habe eine einfache Frage.

Folgendes Problem: Ich habe einen sehr "speziellen", nicht verbraucherorientierten Media Asset-Speicher (gespeichert als Baumhierarchie im Dateisystem). Der CkEditor-Benutzer sollte diese Medien-Assets finden und so habe ich ein Plugin dafür mit einem Find implementiert, der den Baum auf der linken Seite lädt und die Medien-Assets auf der linken Seite anzeigt. Der Benutzer kann nun den Baumeintrag auswählen und auf der linken Seite das Medienobjekt auswählen. Das Plugin funktioniert, der Code wird mit einem img-Tag generiert. Wenn ich auf den neu generierten Code doppelklicke, wird der 'image'-plugin-dialog geladen und nicht mein benutzerdefinierter Dialog.

Frage: Was kann ich tun, damit CkEditor meinen Dialog öffnet? Ich nehme an, es gibt ein internes Mapping vom Tag -> Dialog und das img-Tag lädt den img-Dialog. Welche Möglichkeiten habe ich? Muss ich dafür benutzerdefinierte Tags verwenden?

Answer 1

Das Problem kann gelöst werden, indem der Doppelklick-Haken, z.

initDoubleClickHandler: function(editor) { 
    editor.on('doubleclick', function(e) { 
    var selection = editor.getSelection(); 
    var start = selection.getStartElement(); 
    var attribute = start.getAttribute('data-type'); 
    if (attribute != undefined && attribute != null && attribute == 'myplugin') { 
     e.data.dialog = 'myPluginDialog'; 
    } 
    }); 
} 

Answer 2

Der unterstützte und einfache Weg besteht darin, Ihr Plugin als Widget mit einem Dialog zu erstellen. Sie können steuern, wie CKEditor Ihr spezielles Objekt kennt und Ihren Dialog starten. Sie können entweder ein IMG mit einem speziellen CSS-Stil verwenden oder ein eigenes benutzerdefiniertes HTML-Tag erstellen (z. B.).

Lesen Sie das Widget Tutorial here (Dialoge werden in Teil 2 dieses Tutorials erklärt).