将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; 
}