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