How to use with CKEditor Framework

[felipegiotto]

Hi! I'm trying to use the ckeditor5-angular component with a custom build made with the CKEditor Framework, since we need some specific plugins. Is there any explanation about how to do this?

Thanks in advance!

Regards,

Felipe.

[ma2ciek]

Hi, @felipegiotto!

These docs are on our roadmap. For now, you can use these post, which explains how to integrate ckeditor5-angular with the CKEditor 5 and the collaboration plugin.

Actually, all you want to do is to copy the built editor to the Angular repository and import it from the Angular component that provides the editor, similarly to how it's presented in our docs for the classic build.

Eventually, you can try to build the whole editor with its features from source in the angular repository, but it's highly experimental yet and I can't promise that the installation will be smooth that way.

Good luck :)

[felipegiotto]

I'm using a custom DecoupledEditor build as a reference. If I can make it work, I'll add the other needed features later. I'm making an Angular 7 application and following these steps, based on https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html.

1. (custom build) Cloned the https://github.com/ckeditor/ckeditor5-build-decoupled-document.git repository.
2. (custom build) Ran npm run build. At this point, I can open the sample/index.html and the editor works perfectly.
3. Copied the files from the build folder to my-angular-app/src/app/shared/componentes/ckeditor/build.
4. (angular app) Installed the ckangular component with npm install --save-dev @ckeditor/ckeditor5-angular.
5. (angular app) Configured the allowJs option in tsconfig.json file.
6. (angular app) Added CKEditorModule to the imports section of the app.module.ts file.
7. (angular app) Added the component code:
   import * as DecoupledEditor from './shared/componentes/ckeditor/build/ckeditor'; (...) public Editor = DecoupledEditor;
8. (angular app) Added the view code to my component: <ckeditor [editor]="Editor" data="<p>Hello world!</p>"></ckeditor>
9. (angular app) Started the app and opened the browser. The editor cannot be loaded and the Console tab shows this:
   fa/<@http://localhost:4200/main.js:32828:1 using/<@http://localhost:4200/main.js:29992:233 n@http://localhost:4200/main.js:29999:32 ./src/app/shared/componentes/ckeditor/build/ckeditor.js/</</ti</ti.prototype._setUpBindToBinding@http://localhost:4200/main.js:30017:21 using@http://localhost:4200/main.js:29992:185 fa@http://localhost:4200/main.js:32828:175 qc@http://localhost:4200/main.js:34838:553 Il@http://localhost:4200/main.js:35369:25 Eb@http://localhost:4200/main.js:39354:43 ./src/app/shared/componentes/ckeditor/build/ckeditor.js/</</Il</Il.create/<@http://localhost:4200/main.js:35384:59 ZoneAwarePromise@http://localhost:4200/polyfills.js:3215:29 ./src/app/shared/componentes/ckeditor/build/ckeditor.js/</</Il</Il.create@http://localhost:4200/main.js:35384:24 ./node_modules/@ckeditor/ckeditor5-angular/fesm5/ckeditor-ckeditor5-angular.js/CKEditorComponent.prototype.createEditor@http://localhost:4200/vendor.js:132983:35 ./node_modules/@ckeditor/ckeditor5-angular/fesm5/ckeditor-ckeditor5-angular.js/CKEditorComponent.prototype.ngAfterViewInit/<@http://localhost:4200/vendor.js:132887:13 ./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:2728:17 ./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:4200/polyfills.js:2478:24 ./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.runOutsideAngular@http://localhost:4200/vendor.js:72265:16 ./node_modules/@ckeditor/ckeditor5-angular/fesm5/ckeditor-ckeditor5-angular.js/CKEditorComponent.prototype.ngAfterViewInit@http://localhost:4200/vendor.js:132886:9 callProviderLifecycles@http://localhost:4200/vendor.js:77100:9 callElementProvidersLifecycles@http://localhost:4200/vendor.js:77074:13 callLifecycleHooksChildrenFirst@http://localhost:4200/vendor.js:77064:29 checkAndUpdateView@http://localhost:4200/vendor.js:78000:5 callViewAction@http://localhost:4200/vendor.js:78232:21 execComponentViewsAction@http://localhost:4200/vendor.js:78174:13 checkAndUpdateView@http://localhost:4200/vendor.js:77997:5 callWithDebugContext@http://localhost:4200/vendor.js:78885:22 debugCheckAndUpdateView@http://localhost:4200/vendor.js:78563:12 ./node_modules/@angular/core/fesm5/core.js/ViewRef_.prototype.detectChanges@http://localhost:4200/vendor.js:76372:13 ./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick/<@http://localhost:4200/vendor.js:73034:58 ./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick@http://localhost:4200/vendor.js:73034:13 ./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype._loadComponent@http://localhost:4200/vendor.js:73068:9 ./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.bootstrap@http://localhost:4200/vendor.js:73010:9 ./node_modules/@angular/core/fesm5/core.js/PlatformRef.prototype._moduleDoBootstrap/<@http://localhost:4200/vendor.js:72811:74 ./node_modules/@angular/core/fesm5/core.js/PlatformRef.prototype._moduleDoBootstrap@http://localhost:4200/vendor.js:72811:13 ./node_modules/@angular/core/fesm5/core.js/PlatformRef.prototype.bootstrapModuleFactory/</</<@http://localhost:4200/vendor.js:72779:21 ./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:2728:17 onInvoke@http://localhost:4200/vendor.js:72306:24 ./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:2727:17 ./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:4200/polyfills.js:2478:24 scheduleResolveOrReject/<@http://localhost:4200/polyfills.js:3198:52 ./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2761:17 onInvokeTask@http://localhost:4200/vendor.js:72297:24 ./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2760:17 ./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:4200/polyfills.js:2528:28 drainMicroTaskQueue@http://localhost:4200/polyfills.js:2935:25

Another weird thing is: if I install a custom build (e.g. with npm install --save-dev @ckeditor/ckeditor5-build-decoupled-document) and import it from the "node_modules" folder, the editor works correctly. If I copy my custom build to the node_modules/@ckeditor/ckeditor5-build-decoupled-document/build, it also works correctly!! But, when I try to import the custom build from my "src" folder, nothing works anymore (error above)!

Am I doing anything wrong? Thanks for the fast reply!!!

[ma2ciek]

Another weird thing is: if I install a custom build (e.g. with npm install --save-dev @ckeditor/ckeditor5-build-decoupled-document) and import it from the "node_modules" folder, the editor works correctly. If I copy my custom build to the node_modules/@ckeditor/ckeditor5-build-decoupled-document/build, it also works correctly!! But, when I try to import the custom build from my "src" folder, nothing works anymore (error above)!

That suggests me that the typescript transpiler has a problem with our minified code. We've experienced that issue in the past. Could you check if targeting the ES6 in the tsconfig fixes this issue? We'll have to look anyway at this issue.

[felipegiotto]

Sorry, but I'm still beginning with Angular/TS! There's no tsconfig.json file in the "https://github.com/ckeditor/ckeditor5-build-decoupled-document.git" repository. Should I create one? If this is the case, I tried creating with this content:

{
    "compilerOptions": {
        "target": "es6"
    }
}

After, I ran "npm run build" and replaced the files from the "build" folder, but the error is the same.

[felipegiotto]

Just in case: in the angular app, this is the "tsconfig.json" file (maybe it could mean something):

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "allowJs": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "module": "es2015",
    "baseUrl": "./"
  }
}

[felipegiotto]

There's also a "tsconfig.app.json" file in the "src" folder:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": [],
    "allowJs": true,
    "experimentalDecorators": true
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

[ma2ciek]

Yes, I meant the tsconfig.json in the angular project. It contains TS rules for it. And here you have the target: "es5", which you can replace with target: "es6". It should fix the mentioned error.

[felipegiotto]

Sorry, @ma2ciek, but now the angular app doesn't even start! It's a considerably big application, I think that I'll not be able to change this at the moment, this will impact on many other features... Is there any other thing I can try?

It's really weird that the code works inside de "node_modules" folder but not inside de "src" folder...

This is the error I receive when I try to open my application with "es6" enabled:

TypeError: ctorParameters.map is not a function[Learn More]

core.js:1394
_ownParameters
core.js:1394
parameters
core.js:1426
parameters
platform-browser-dynamic.js:48
_getDependenciesMetadata
compiler.js:10202
_getTypeMetadata
compiler.js:10155
getNonNormalizedDirectiveMetadata
compiler.js:9784
loadDirectiveMetadata
compiler.js:9647:38
_loadModules/</<
compiler.js:23148
forEach self-hosted:261:13 _loadModules/<
compiler.js:23147
forEach self-hosted:261:13 _loadModules
compiler.js:23144
_compileModuleAndComponents
compiler.js:23124
compileModuleAsync
compiler.js:23086
compileModuleAsync
platform-browser-dynamic.js:213:28
compileNgModuleFactory__PRE_NGCC__
core.js:17826
bootstrapModule
core.js:18046
./src/main.ts
main.ts:12
__webpack_require__
bootstrap:83
[0]
http://localhost:4200/main.js:46785:18
__webpack_require__
bootstrap:83
checkDeferredModules
bootstrap:45
webpackJsonpCallback
bootstrap:32
<anonymous>

[ma2ciek]

Hi, @felipegiotto.

I tried to reproduce it locally, but I didn't hit this error. I tried with the stable branch and with the master branch of ckeditor5-build-decoupled-document.

It's really weird that the code works inside de "node_modules" folder but not inside de "src" folder

As I've told you before, the webpack configuration for angular treats differently code in the src/ and in the node_modules to optimize the speed of the build process (it doesn't transpile code that exists in the node_modules).

Could you tell me what browser do you use? And perhaps make a screenshot of the error as it's extremely unreadable?

Thanks.

[ma2ciek]

Could you also tell me which ng command you invoke (+ params) to run the application?

[felipegiotto]

I'm using ng serve to run the application. This is my browser window. I tried to put an editor on the login screen, for easier testing... The DecoupledEditor should be loaded inside the two <div>s at the top of the screen.

[felipegiotto]

@ma2ciek, based on your recommendations, I tried adding the "ckeditor.js" files to the "scripts" section in the "angular.json" file, and it seems to have worked (still need some tweaks). This way, webpack doesn't mess with the CKEditor...

We are checking if this is the best approach, but at least it worked! ;-)

[ma2ciek]

Good that it works somehow...

I'll check whether this could be a bug that happens only on the Edge browser. Maybe that's a clue. But Edge console and its errors are super weird. This error stack doesn't help at all.

[ma2ciek]

ng serve

Ok, so this won't be a problem with the UglifyJS minifier. So either webpack or Edge.

[ma2ciek]

Did you check maybe it that error happens also on other browsers? Note that open console on Edge changes the code behavior and it's a known issue for us.

[ma2ciek]

I'm closing due to the lack of activity.