Ckeditor5-angular: How to add custom button/plugin and subscribing to event it emits

[codertushar]

Intention: want to have my version of Hyperlink button that will open my custom Angular dialog which allows putting title and link. After confirmation from my dialog, I want that text to be highlighted blue and underline inside CKEditor.

Is it possible to add a custom button like this? Also, I am overriding existing behaviour, is it possible?
Any fiddle will help.
As far as I got to know from different sources across web, I got to know that I need to first make a custom build which will help me to customize what plugins I need but still I am headless. It seems like a long path in achieving this kind of behavior.
If possible, please make it simple. @ma2ciek

[boban984]

It is possible, i've done exactly what you are talking about to display a custom file explorer.
First you need to create a custom build of the editor and use that in your angular app, then create a plugin for it which will show your button.
The plugin aka the button will just fire an event to which you should respond in the angular app.

example:
Plugin
```import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import uploadIcon from './icons/upload.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

export default class CustomFileExporerPlugin extends Plugin {
init() {
const editor = this.editor;

editor.ui.componentFactory.add('fileExplorer', locale => {
  const view = new ButtonView(locale);

  view.set({
    label: 'Choose a file',
    icon: uploadIcon,
    tooltip: true
  });

  // Callback executed once the icon is clicked
  view.on('execute', () => {
     // fire a JS event
     window.dispatchEvent(new Event('your-event-name'));
  });

  return view;
});

}
}

**Angular component**

@HostListener('window: your-event-name', ['$event'])
openCustomPopup(event) {
// code to execute on event
// example open a popup or somethin
}
```

[Mgsy]

Thanks for sharing the code @boban984 :) I'll close this issue, as it seems to cover the question from the first post.

[akhilcatone]

@ma2ciek how to add command to enable disable custom plugin for example CustomFileExporerPlugin using forcedisabled

[ma2ciek]

Hi @akhilcatone,

Just use:

editor.plugins.get( pluginName ).forceDisabled( 'lockName' );

Then you'll be able to unlock it using:

editor.plugins.get( pluginName ).clearForceDisabled( 'lockName' );

You can get the editor instance e.g. by subscribing to the component ready event emitter.

[akhilcatone]

Yes @ma2ciek but how to register command in custom plugin

[ma2ciek]

Here's a guide about commands - https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/core-editor-architecture.html#commands.

[ma2ciek]

And please, ask it on ckeditor5 issue tracker or on Stack overflow, as this is not related with the Angular integration.

[pankajcharpe]

I have an angular app. I am opening a image gallery on clicking the custom button and selecting an image.
But I don't know how to insert that image to editor. Can anyone please guide me on this?
Here is my sample code:
// Gallary modal
@HostListener('window: onClickGallaryButton', ['$event'])
openGalleryPopup(event) {
.........................
this.modalRef = this.modalService.show(ImageBrowserComponent, modalOptions);
this.modalRef.content.galleryResp.subscribe(name => {
if (name) {
var img = document.createElement('img'); // Use DOM HTMLImageElement
img.src = name;

     // TODO: Insert to ckeditor

    }
  });

}