Search code examples
angularckeditorsingletonckeditor4.x

CKEditor 4 for Angular. CKEDITOR singleton and external configuration

I wish to integrate CKEDITOR 4 in my angular application but I have some difficulties to understand how to make some configurations which are better explained when used with other frameworks (i.e. jQuery). I followed this guide but it's very basic and it doesn't clarify many aspects:

  1. The most important: how to access the CKEDITOR singleton which provides many functionalities (like for example programatically override the configuration).
  2. Concerning the configuration, the only way described in the guide is to add the configuration directive to the component but this case doesn't fit my needs because I wish to use an external config file with many other options.
  3. It's not described how to add custom plugins.

Is there anybody who had my same needs and can help?

EDIT: I could find a way to load a local bundle version by adding the script section in angular.json file. This guarantees that the ckeditor.js file is loaded from local instead of CDN but it doesn't work. I opened a ticket in ckeditor github but they closed without giving a full explanation on why it doesn't work. Help is very welcome because I'm stuck on this!

Solution

  • Finally I figured out how to reach my goal. First of all, apparently there's a bug by using the script approach in the angular.json file then it can't be used. What I did was to deploy the ckeditor package as static resource of my web project (different than angular). Then, in the ckeditor tag I used the editorUrl attribute to access this local resource:

    <ckeditor #ckeditortextarea editorUrl="http://localhost:7001/myapp/ckeditor4/ckeditor.js" id="myeditor" name="myeditor" tagName="textarea" (dataChange)="change($event)" (blur)="touched($event)" (ready)="ready($event)"></ckeditor>

    and it worked! By this approach is possible to customize everything in the local deployed package. Regarding the access to the CKEDITOR singleton, it was easier than expected. In your component declare a variable (i.e. CKEDITOR) and in the ready event assign it as

    this.CKEDITOR=window['CKEDITOR'];

    That's all!