Как вызвать виджет без добавления editor.ui.addButton - PullRequest
0 голосов
/ 30 марта 2019

Я пытаюсь использовать расширенный плагин изображения для вставки изображения в редакторе.Поскольку мне нужно повторно использовать функцию поиска углового приложения, я не могу использовать диалог по умолчанию, который используется плагином.

Я пытался использовать событие, чтобы открыть диалоговое окно вне ckeditor, а затем при выборе я снова отправил пользовательское событие с данными.Теперь я застрял, так как я не могу вызвать виджет, который будет вставлять изображение в редактор.

CKEDITOR.plugins.add('image2', {
  requires: 'widget',
  icons: 'image',

  init: function (editor) {
    editor.addCommand('insertImage', {
      exec: function (editor) {
        var elm = document.getElementById('editor');
        // sent an event to tell angular to load the component
        // we also need to know where in text we are?
        var event = new Event('openSearchDialog');
        document.dispatchEvent(event);
      }
    });

    // Subscribing to event emitted on selection of image
    document.addEventListener("imgSelected", function (event) {
      console.log(event.detail.data)

      editor.execCommand('image') // this is not working
    });

    // Add toolbar button for this plugin.
    editor.ui.addButton('image', {
      label: editor.lang.common.image,
      command: 'insertImage',
      //command: 'image',
      toolbar: 'insert,10'
    });



    editor.widgets.add('image', {
      template:
        '<figure>' +
        '<img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_960_720.jpg" />' +
        '<figcaption>Caption</figcaption>' +
        '</figure>',

      editables: {
        content: {
          selector: 'figcaption',
          allowedContent: 'strong em link'
        }
      },

      allowedContent:
        'figure; img; figcaption',

      requiredContent: 'figure',

      upcast: function (element) {
        return element.name == 'figure';
      }
    });
  }
});

И в угловых я сделал

@HostListener('document:openSearchDialog', ['$event']) onMouseEnter(event: any) {
    this.openSearchDialog();
  }

Как только изображениевыбрано создание пользовательского события

let event = new CustomEvent("imgSelected", {
    bubbles: true,
    detail: {
      data: img
    }
  });
    this.el.nativeElement.dispatchEvent(event);
  }

В редакторе кнопка добавления, если я использую команду «insertImage», то открывается диалоговое окно, но не удается вызвать виджет, а при использовании «изображения» затемизображение добавляется в редактор, как и ожидалось.Я не могу соединить эти две функции.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...