CODEWITHSUNDEEP
javascriptangularjsangularckeditor
Kerim Emurla
Kerim Emurla

Reputation: 1151

How to add plugins to ng2-ckeditor using TypeScript and Angular 2 ?

I'm trying to add the Justify plugin to my ckeditor, but unfortunately I can't find any information about how I should add plugins to ng2-ckeditor.

Also I'm not able to find any directory or config file where I should add plugins.

I'm using ng2-ckeditor 1.0.6 with TypeScript.

Upvotes: 4

Views: 6366

Answers (1)

nakulthebuilder
nakulthebuilder

Reputation: 793

ng-ckeditor uses the CKEditor CDN. This page shows you how to add external plugins either from the cdn or downloading the plugin and using a local version. 

declare var CKEDITOR: any;

CKEDITOR.plugins.addExternal(
  'uploadimage',
  '../full-all/plugins/divarea/',
  'plugin.js');

This is accessing the full-all path on the cdn. alternatively if you want to access it from a local folder you would make the path something like /users/app/assets/...etc depending on where your downloaded folder is located.

In your html you'd add the following: [config]="{extraPlugins: 'divarea'}" to your ckeditor tag.

Since most Angular2 use cases need the divarea plugin by default due to crash issues, any other plugins you add need to be inserted as a comma-separated string:

[config]="{extraPlugins: 'divarea,uploadimage'}"

If binding to a local component variable, for example, it would be like this:

this.ckConfig = {
  height: '250',
  extraPlugins: 'divarea,uploadimage',
  enterMode: '2',
  toolbar: [
    {name: 'document', items: ['Source', '-']},
    {name: 'clipboard', items: ['Undo', 'Redo']},
    {name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight']},
    {name: 'insert', items: ['Image']},
    {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', '-']},
    {name: 'styles', items: ['Font', 'FontSize']},
    {name: 'colors', items: [ 'TextColor' ]},
  ]
};

NOTE - do not leave a space after the comma. In fact NO spaces in that string, it has to be 'pluginname,pluginname,pluginname' ...etc...

Upvotes: 5

Related Questions