Интеграция пользовательского выпадающего списка в ckeditor5 не работает - PullRequest
Новая
       15

Интеграция пользовательского выпадающего списка в ckeditor5 не работает

0 голосов
/ 10 апреля 2019

Я не могу добавить новую панель инструментов выпадающего списка в 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;
    });
  }
}

1 Ответ

1 голос
/ 10 апреля 2019

Решено: разобрался с помощью команды 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

...