Apply select2 auf ein Dialogfeld Element in ckeditor

Question

kann ich ein Javascript-Plugin in einem Dialogfeld Element in ckeditor?

Ich möchte select2 Plugin auf ein Dialogfeld Element in einem Widget, das ich gerade baue, zu implementieren.

i verwendet

/* plugin.js */ 

    editor.on('instanceReady',function() { 
    CKEDITOR.document.appendStyleSheet(plugin.path + select2/select2.css"); 
    }); 

    CKEDITOR.scriptLoader.load(js.select2); 

/* element definition in dialog.js */ 
{ 
    id: 'objectId', 
    type: 'select', 
    label: 'Object Name', 
    items: [['Select', '-1']....], 
    onLoad: function (widget) { 
      var selectbx = $('#' + selectList.getInputElement().id); 
      selectbx.select2(); 

        }, 

wenn ja, wie?

Answer 1

Aufruf von select2() on onLoad() funktioniert gut. Das einzige Problem ist, dass das Dropdown-Menü gequetscht ist und die Liste sich irgendwo hinter dem Dialogfeld öffnet. Ich habe um diesen mit einem wenig CSS gearbeitet, um den z-Index der Dropdown-Liste und die Breite des CKEditor zu beheben wählen:

div.cke_dialog_ui_input_select, 
.cke_dialog_ui_input_select{ 
    width: 100%; 
} 

.select2-drop{ 
    z-index: 100000;  
} 

Answer 2

Mit select2 4.x diese CSS arbeitete für mich“

div. cke_dialog_ui_input_select,

.cke_dialog_ui_input_select { 
    width: 100%; 
} 

.select2-container { 
    z-index: 10010; 
} 

.select2-container .select2-selection--single { 
    position: relative; 
}