How to integrate CKEditor5 collaboration plugin and Angular?

[ma2ciek]

It's more tricky as docs for collaborative editing (https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/collaborative-editing.html#prepare-a-custom-build) can't be used, as they contain instructions about how to create an instance of the editor on the existing HTML element, while Angular integration needs to be feed with an editor that extends the Editor class and implements the DataApi interface, e.g. the ClassicEditor class.

Here's a guide for Angular + CKEditor5 collaboration:

First of all, you need to start with https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html instead of https://ckeditor.com/docs/ckeditor5/latest/features/collaboration/collaborative-editing.html#prepare-a-custom-build, because of the mentioned issue above.

So, first of all, you need to clone or create a fork of the stable ckeditor5-build-classic

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

Then install dependencies, collaboration package and easy-image:

npm i
npm i --save-dev @ckeditor/ckeditor5-collaboration @ckeditor/ckeditor5-easy-image

Update src/ckeditor.js

...

import CollaborativeEditing from '@ckeditor/ckeditor5-collaboration/src/collaborativeediting';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';

ClassicEditor.builtinPlugins = [
   ...

   CollaborativeEditing,
   EasyImage
];

Run npm run build.

After that step, you should have the build/ckeditor.js file with the bundled ckeditor5 library that includes
collaboration package.

Now you can copy that file to your angular project.

You should update the path that point the CKEditor5 build:

import * as Editor from './path/to/the/ckeditor';

@Component( {
  ...
} )
export class SimpleUsageComponent {
   public Editor = Editor;

   public editorConfig = {
      cloudServices: {
         // PROVIDE CORRECT VALUES HERE:
         // See the explanation at https://docs.ckeditor.com/ckeditor5/latest/features/collaboration/collaborative-editing.html#data-initialization.
         tokenUrl: 'https://example.com/cs-token-endpoint',
         uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/',
         webSocketUrl: 'your-organization-id.cke-cs.com/ws/',
         documentId: 'collabEditing'
      }
   }
}

And make sure that in the template you use:

<ckeditor
    [editor]="Editor"
    [config]="editorConfig"
    ...
></ckeditor>

That's it. You should be able now to use the CKEditor5 with collaborative editing inside an Angular project.

(Not sure if that should land in docs for the angular integration / docs for the collaborative editing or in that issue only).

[ngardner]

I cannot get this to work. I am getting this error.

zone.js:665 Unhandled Promise rejection: Cannot read property 'stack' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'stack' of undefined
at ckeditor.component.ts:214
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
at zone.js:872
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595) TypeError: Cannot read property 'stack' of undefined
at http://127.0.0.1:4200/modules-diy-diy-module.js:177:31
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://127.0.0.1:4200/polyfills.js:2710:26)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://127.0.0.1:4200/polyfills.js:2460:43)
at http://127.0.0.1:4200/polyfills.js:3194:34
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://127.0.0.1:4200/polyfills.js:2743:31)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://127.0.0.1:4200/polyfills.js:2510:47)
at drainMicroTaskQueue (http://127.0.0.1:4200/polyfills.js:2917:35)

UPDATE
I was able to fix by providing a [config] setting to , and the config MUST HAVE a cloudServices.documentId set

<ckeditor [build]="EditorBuild" [config]="customConfig"></ckeditor>

customConfig = { cloudServices: { tokenUrl: 'https://removed', uploadUrl: 'https://removed', webSocketUrl: 'removed', documentId: 'ThisIsRequired' } }

[ma2ciek]

Hi @ngardner,

Thanks for reporting it 👍. The error stack looks really weird. I'll see how it looks outside of the angular env. Config isn't deeply merged, so for the feature, that config you need to overwrite, you need to provide all config's options.

Anyway, providing cloudServices options via the config is more reasonable as it allows you to set dynamically the documentId, I'll update above docs :)

[ma2ciek]

All properties are required, and every is important. See https://docs.ckeditor.com/ckeditor5/latest/features/collaboration/collaborative-editing.html#data-initialization.

[ma2ciek]

Update: The ckeditor5-angular package has just been published - https://www.npmjs.com/package/@ckeditor/ckeditor5-angular 🎉

I've updated the readme to match the latest API.

[ma2ciek]

I've checked and because of some minified and uglified parts of code from the ckeditor5-real-time-collaboration the editor now doesn't build at all while targeting es5 and es6. Here's the error from targeting the es6:

ERROR in ./src/ckeditor.js 9164:24
Module parse failed: 'super' keyword outside a method (9164:24)
You may need an appropriate loader to handle this file type.
|                 constructor(t, e, n) { super({ idProperty: "id" }), this[gw] = t, this[bw] = e, this[ww] = n, this[vw] = [], this[yw] = new Map, this.listenTo(t, "change:state", (i, r, o) => __awaiter(this, void 0, void 0, function* () { if (o === hw.STATE_DISCONNECTED) {
|                     for (this._started = !1, this[vw] = []; this.length;)
>                         super.remove(0);
|                     this.fire("disconnected");
|                 } o === hw.STATE_CONNECTED && (yield this._init(t, e, n)); }), { priority: hw._CHANGE_STATE_EVENT_PRIORITY }); }
ℹ ｢wdm｣: Failed to compile.

I had to set the target to es2017 to make it work.

Then the compilation succeeds but there's still an error when the second client connects to the same document id - the changed content of the first connected user is replaced with the initial content. I'll try to fix it and improve docs for this section on the https://ckeditor.com/docs/.

[ma2ciek]

Yesterday we released an Angular sample for the integration with real-time collaboration features. If you want to bootstrap your own Angular + CKEditor 5 RTE (or with custom CKEditor5 plugins ) project, then you should definitely check it.

[omotayo89]

@ma2ciek, please i can't find src/ckeditor.js

[ma2ciek]

Hi @omotayo89,

This guide might be a little bit outdated, please follow the instruction from https://github.com/ckeditor/ckeditor5-collaboration-samples/tree/master/real-time-collaboration-for-angular.

[Reinmar]

Closed with ckeditor/ckeditor5#5641.