GrapesJS / ckeditor

This plugin replaces the default Rich Text Editor with the one from CKEditor
BSD 3-Clause "New" or "Revised" License
105 stars 103 forks source link

CkEditor doesn't show Angular 14 #65

Closed Kevin-Vu closed 1 year ago

Kevin-Vu commented 1 year ago

I have many issues when I try to include this library in a Angular Project. Has anyone tried to use this library with Angular ? 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-ckeditor/dist/grapesjs-plugin-ckeditor.min.js",
              "./node_modules/ckeditor/ckeditor.js"
]

package.json

    "ckeditor": "^4.12.1",
    "grapesjs": "^0.21.1",
    "grapesjs-plugin-ckeditor": "^0.0.10",
    "grapesjs-preset-newsletter": "^1.0.1",

component.ts

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

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

  constructor() { }

  ngOnInit(): void {
    this.editor = grapesjs.init({
      container: '#gjs',
      fromElement: true,
      height: '700px',
      width: 'auto',
      storageManager: false,
      panels: { defaults: [] },
      plugins: [preset, plugin]
    });
  }
}

Console output :

Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1 Refused to execute script from 'http://localhost:4200/config.js?t=J5S9' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:4200/skins/moono-lisa/editor.css?t=J5S9' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
fr.js:1    
Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1 Refused to execute script from 'http://localhost:4200/lang/fr.js?t=J5S9' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
core.mjs:9171 ERROR TypeError: Cannot set properties of undefined (setting 'dir')
    at Object.f (ckeditor.js:248:46)
    at e (ckeditor.js:249:99)
    at Array.n (ckeditor.js:249:189)
    at q (ckeditor.js:249:338)
    at CKEDITOR.env.ie.d.$.onerror (ckeditor.js:250:354)
    at HTMLScriptElement.wrapFn (zone.js:766:39)
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26261:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
handleError @ core.mjs:9171
localhost/:1 Refused to apply style from 'http://localhost:4200/skins/moono-lisa/editor.css?t=J5S9' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
artf commented 1 year ago

https://github.com/GrapesJS/ckeditor/issues/51