-
Notifications
You must be signed in to change notification settings - Fork 111
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to integrate CKEditor5 collaboration plugin and Angular? #6
Comments
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 UPDATE
|
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 |
All properties are required, and every is important. See https://docs.ckeditor.com/ckeditor5/latest/features/collaboration/collaborative-editing.html#data-initialization. |
Update: The I've updated the readme to match the latest API. |
I've checked and because of some minified and uglified parts of code from the
I had to set the 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 |
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. |
@ma2ciek, please i can't find src/ckeditor.js |
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. |
Closed with ckeditor/ckeditor5#5641. |
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:
Update
src/ckeditor.js
Run
npm run build
.After that step, you should have the
build/ckeditor.js
file with the bundled ckeditor5 library that includescollaboration package.
Now you can copy that file to your angular project.
You should update the path that point the CKEditor5 build:
And make sure that in the template you use:
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).
The text was updated successfully, but these errors were encountered: