javascript - 将 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-index 和 CKEditor 选择的宽度:

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

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