CODEWITHSUNDEEP
angularpluginsckeditor5
matt2mi
matt2mi

Reputation: 154

Create a custom plugin on ckeditor for angular application

I need to create a custom plugin for ckeditor to allow users to create a cutom html a element.

I managed to create this plugin on small project including my code in script element like in the ckeditor examples (following this : https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html). Everything ok.

But my problem is to include the plugin in my Angular application. I don't understand how to import it.

I tried many different ways to import the built ckeditor.js file generated by webpack, but never worked...

So my main issue is that i don't understand how to get from the simple project generating a build with my plugin inside to import it in my Angular application..

Thanks if someone have an idea to solve this ??

Upvotes: 4

Views: 6078

Answers (2)

Sam
Sam

Reputation: 14586

I found out how to do it.

  1. clone the ckeditor5-build-classic

    git clone -b stable https://github.com/ckeditor/ckeditor5.git
cd ckeditor5/packages/ckeditor5-build-classic/

  2. install dependencies and any other plugins you may want to add (alignment for instance)

    npm i npm install --save-dev @ckeditor/ckeditor5-alignment

  3. update src/ckeditor.js with added plugin(s)

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; 

    // Plugins to include in the build.
    ClassicEditor.builtinPlugins = [
        ...
        Alignment                                                            
    ];

  1. run npm run buildto package the new build

  2. copy the file build/ckeditor.js to the asset folder in you angular application

  3. This is how you import the file (path may vary depending on your setup) :

import * as CustomEditor from '@app/../assets/ckeditor.js';

Finally in your component just declare the editor like this :

public Editor = CustomEditor;

Upvotes: 13

Mohammad Quadri
Mohammad Quadri

Reputation: 395

You will need to provide the config option also.

Please check this link

Upvotes: 1

Related Questions