Integrate CkEditor with Angular

[Kevin-Vu]

When I use this lib for Angular (14) I still have the default text editor. angular.json

            "styles": [
              "src/styles.scss",
              "./node_modules/grapesjs/dist/css/grapes.min.css",
            ],
            "scripts": [
              "./node_modules/grapesjs/dist/grapes.min.js",
              "./node_modules/grapesjs-preset-newsletter/dist/index.js",
              "./node_modules/grapesjs-plugin-ckeditor5/ckeditor5/build/ckeditor.js",
              "./node_modules/grapesjs-plugin-ckeditor5/dist/grapesjs-plugin-ckeditor5.min.js"
            ]

web-builder.component.ts (I cannot perform import pluginCkEditor from 'grapesjs-plugin-ckeditor5';)

import { Component, OnInit } from '@angular/core';
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-newsletter';

@Component({
  selector: 'app-web-builder',
  templateUrl: './web-builder.component.html',
  styleUrls: ['./web-builder.component.scss']
})
export class WebBuilderComponent implements OnInit {
  public editor:any = null

  constructor() { }

  ngOnInit(): void {
    this.editor = grapesjs.init({
      container: '#gjs',
      fromElement: true,
      height: '700px',
      width: 'auto',
      storageManager: false,
      panels: { defaults: [] },
      plugins: [plugin, 'gjs-plugin-ckeditor5'],
      pluginsOpts: {
        'gjs-plugin-ckeditor5': {
          position: 'left',
          options: {
            trackChanges: {},
            toolbar: {
              items: [
                'heading',
                '|',
                'fontColor',
                'fontSize',
                'fontFamily',
                'fontBackgroundColor',
                'alignment',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'link',
                'bulletedList',
                'numberedList',
                'horizontalLine',
                '|',
                'outdent',
                'indent',
                '|',
                'blockQuote',
                'insertTable',
                '|',
                'undo',
                'redo'
              ]
            },
            language: 'en',
            table: {
              contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells',
                'tableCellProperties',
                'tableProperties'
              ]
            },
            licenseKey: ''
          }
        }
      }
    });

  }

}

[GoodPHP]

Do you have ckeditor and default rte?

[Kevin-Vu]

I just have the default rte.

[GoodPHP]

Do you have any issues in console?

[Kevin-Vu]

I added import pluginCkEditor from 'grapesjs-plugin-ckeditor5'; in my .ts by creating a grapesjs-plugin-ckeditor5.d.ts file in my root project with this inside declare module 'grapesjs-plugin-ckeditor5'; But there is still no editor shown. The console is error free.

[GoodPHP]

Do you replace 'gjs-plugin-ckeditor5' on pluginCkEditor? in plugins and options?

Maybe, you have live example?

[Kevin-Vu]

I have a sample here : https://github.com/Kevin-Vu/grapesjs-ckeditor

[GoodPHP]

I can’t run your repo. Issue with private angular.

[GoodPHP]

Did you see our paid plugin?

[Kevin-Vu]

No I haven't, I'll find a solution on my own, thanks for the help.