在ckeditor5中集成自定义下拉列表不起作用答案

【问题标题】：Integrating custom dropdown list in ckeditor5 not working在ckeditor5中集成自定义下拉列表不起作用
【发布时间】：2019-04-10 11:02:52
【问题描述】：

我无法在 ckeditor5 中添加新的下拉列表菜单工具栏。

我完全使用了他们文档中提到的内容，不确定我缺少什么。

编辑器加载，但不是下拉插件。我已经尝试在编辑器中添加自定义按钮并且它有效，但集成下拉菜单不起作用。

这是我用作参考的链接， https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/ui-library.html#adding-a-list-to-a-dropdown

import InsertDropDown from "../libraries/dropDownButton";

export function loadEditor(){
    const promise = ClassicEditor.create(editor, {
      extraPlugins: [InsertDropDown],
      toolbar: [
        "bold",
        "italic",
        "heading",
        "bulletedList",
        "numberedList",
        "link",
        "undo",
        "redo"
      ]
    });
  return promise;
}

import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
import Model from "@ckeditor/ckeditor5-ui/src/model";
import Collection from "@ckeditor/ckeditor5-utils/src/collection";
import {
  addListToDropdown,
  createDropdown
} from "@ckeditor/ckeditor5-ui/src/dropdown/utils";
import SplitButtonView from "@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview";
import imageIcon from "../libraries/svg/user.svg";

export default class InsertDropDown extends Plugin {
  init() {
    const editor = this.editor;
    editor.ui.componentFactory.add("InsertDropDown", locale => {
      const dropdownView = createDropdown(locale, SplitButtonView);
      dropdownView.buttonView.actionView.set({
        withText: true,
        label: "choose variable",
        icon: imageIcon,
        tooltip: true
      });
      //
      const items = new Collection();

      items.add({
        type: "button",
        model: new Model({
          withText: true,
          label: "Foo"
        })
      });

      items.add({
        type: "button",
        model: new Model({
          withText: true,
          label: "Bar"
        })
      });      
      addListToDropdown(dropdownView, items);

      return dropdownView;
    });
  }
}

【问题讨论】：

标签： webpack ckeditor ckeditor5

【解决方案1】：

已解决：在 ckeditor 团队的帮助下解决了这个问题。非常感谢 @jodator 帮我解决这个问题。

ClassicEditor.create(editor, {
extraPlugins: [InsertDropDown],
toolbar: [
    "bold",
    "italic",
    "heading",
    "bulletedList",
    "numberedList",
    "link",
    "undo",
    "redo",
    "InsertDropDown"        // <--- add this
]
} );

更多细节可以在以下github链接中找到：https://github.com/ckeditor/ckeditor5/issues/1696

【讨论】：