How to Emit Event from Custom Button in CKeditor, with identifying value, multiple CKEditors on screen.

[jakeweberequus]

I understand we can add a plugin like such in the raw .js file:

class Attachments extends Plugin {
    init() {
        const editor = this.editor;
        // The button must be registered among the UI components of the editor
        // to be displayed in the toolbar.
        editor.ui.componentFactory.add( 'attachments', () => {
            // The button will be an instance of ButtonView.
            const button = new ButtonView();

            button.set( {
                withText: false,
				command: 'uploadattachment',
				icon: paperclip
            } );

		button.on('execute', () =>{
			window.dispatchEvent(new Event('upload-attachment'));
		})

            return button;
        } );
    }

and I can then in my angular component, listen for that event:

 @HostListener('window: upload-attachment', ['$event'])
  openCustomPopup() {
    console.log("clicked!!!");
  }

The issue i am facing, is that we may have multiple editors for multiple things. I need to know WHICH editor triggered the event. If i could pass in some sort of GUID, or maybe some different approach entirely.

This relates to this issue: #197 but is not totally solving my problem.

[Witoso]

In the latest release, there's a method to get the ID of the editor. I think this might solve your issue in distinguishing the editors.

[jakeweberequus]

Well, I tried to use that version of the ID, and it was not what I wanted. But you got me on the right track and as I was digging through the source I had an epiphany and a kind of "well, duh!" moment:

Here is the answer:

in the ckeditor js file:

button.on('execute', () =>{
	window.dispatchEvent(new Event('upload-attachment' + editor.id));
})

And then in the angular file, inside the onReady() method, called from the the (ready) output operator:

onReady(e: any) {
    this.currentEditor = e;
    if(this.currentEditor){
      this.renderer.listen("window", 'upload-attachment' + this.currentEditor.id, (evt) => {
        console.log('Clicking the button', evt);
      });
    }
}

[Witoso]

Glad you found a solution :)