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



我无法在 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;
    });
  }
}

已解决:在 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

最新更新