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

[boban100janovski]

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 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

    }
  });

}