CKEditor 5 real-time collaborative editing sample for Angular
The integration supports Angular from version 5.0.0. The
package.json file stores the higher version just to ensure that all dependencies are in compatible versions.
Clone the repository:
git clone email@example.com:ckeditor/ckeditor5-collaboration-samples.git cd ckeditor5-collaboration-samples/real-time-collaboration-for-angular
npm run startand open
http://localhost:8080in your browser.
Fill the dialog with correct token, websocket and upload URL endpoints. If you do not have these yet or do not know their meaning, contact us.
Copy the URL and share it or paste in another tab to enjoy real-time collaborative editing.
The sample consist of an Angular application using CKEditor 5 with real-time collaborative editing. The application includes the editor with the users presence list together with real-time collaborative comments and track changes using a sidebar and a responsive display mode integration which reacts to the screen width.
It does not require the build step. However, if you want to modify the build, for instance to add more plugins, refer to the creating own build section below.
The application consist of two parts - the Angular app (the
/ directory) and CKEditor 5 source code (inside the
vendor/ckeditor5/ directory). These separation of environments is required because we do not support building CKEditor 5 sources inside the Angular environment yet.
- dist/ # Built Angular application. - src/ - app/ # The core of the Angular application. - vendor/ - ckeditor5/ - src/ # Classic Editor with Real-time collaboration source. - build # Classic Editor with Real-time collaboration build. - webpack.config.js # Webpack configuration file to build CKEditor 5 sources.
The Angular part was supposed to be really simple, thus we removed test files and other files that are not necessary to run the application (for overall file structure including missing files see Angular file structure guide).
EditorComponent inside the
src/app/editor/editor-component.ts uses the
<ckeditor> Angular component, which is a wrapper for the Angular interface provided by the @ckeditor/ckeditor5-angular package.
To learn more about the integration and the
@ckeditor/ckeditor5-angular package check out the Angular integration guide.
Creating your own build
If you want to customize the app, first, install all necessary dependencies in both parts of the project. To do it run the following commands from the main directory (
npm install cd vendor/ckeditor5 npm install cd ../..
Modifying CKEditor 5 editor
The CKEditor 5 build created for the purpose of this example is based on classic editor, but you can use any other available CKEditor 5 editor as a base. To change the editor base go to the
vendor/ckeditor5/src/classic-editor-with-real-time-collaboration.js and change the
BaseEditor class. Note that this step will require changing dependencies inside the
vendor/ckeditor5/package.json and installing them.
If you want to add plugin, then see the CKEditor 5 Installing plugins guide to learn more.
The webpack configuration for the building process is taken from
vendor/ckeditor5/webpack.config.js. If you are familiar with webpack, you can play with this file to achieve a custom build that would fit your needs. You can check the CKEditor 5 Advanced setup guide for some ready-to-use advanced configurations.
To build the angular application make sure that
real-time-collaboration-for-angular/ is your current directory and run:
npm run build
This will build the editor to the
vendor/ckeditor5/build/ directory and then it will build the whole Angular application to the
dist/ directory. Then start a local HTTP server using
npm run start and test it.
Note that without touching the
vendor/ckeditor5 files once you'll make the first build you can use the
npm run serve command that will run Angular dev server which will provide much faster rebuild times.