Search code examples
angularckeditorckeditor5ckeditor4.x

How to add a custom plugin to ckeditor in Angular that adds a custom table, any exemple?


I have tried to add the following code to index.html like that

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>AngularCkeditor</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <app-root></app-root>
      <script src="assets/ckeditor/dist/bundle.js"></script>
    </body>
    </html>

But it does not work. I also tried to import it in the component like that

`import CKEDITOR from '../assets/ckeditor/dist/bundle.js';

` but it did not work because Angular uses virtual DOM using the classic way ( install ckeditor component for angular ). There appears to be no documentation or tutorials on this matter for custom table plugin - help please !


Solution

  • i add the following code in my angular component

     <h1>an angular component to test  Ckeditor</h1>
        <ckeditor [editor]="editor" data="<p>Bonjour Ckeditor</p>"></ckeditor>
    

    and i add my custom build to assets project architecture

    i compiled my ckeditor using webpack with this command :

    webpack --mode production
    

    and finally

    i imported my compiled ckeditor to my angular component using

    import * as ClassicEditor from '../assets/ckeditor5-build-classic/';