將select2應用於ckeditor中的對話框元素

Question

我可以在ckeditor中的對話框元素中使用javascript插件嗎？

我想實現select2插件在我正在構建的窗口小部件中的對話框中選擇元素。

我用

/* 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(); 

        }, 

如果是這樣，怎麼樣？

Answer 1

在onLoad（）上調用select2（）會正常工作。唯一的問題是下拉列表被壓扁，並且列表在對話框後面的某個地方打開。 我圍繞着這一曾與CSS的一點點修復下拉的z指數和CKEditor的寬度選擇：

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

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

Answer 2

隨着select2 4.x這個CSS爲我工作」

格。 cke_dialog_ui_input_select，

.cke_dialog_ui_input_select { 
    width: 100%; 
} 

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

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