Question

我正在尝试使用增强的图像插件在编辑器中插入图像。由于需要重用角度应用程序的搜索功能，因此无法使用插件使用的默认对话框。

我尝试使用一个事件在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”，则对话框将打开，但无法调用该小部件，使用“图像”时，图像将按预期方式添加到编辑器中。我无法将这2个功能放在一起。

如何在不添加editor.ui.addButton

0 个答案: