Collaboration integration example for CKEditor 5 — PHP
Clone the repository:
git clone email@example.com:ckeditor/ckeditor5-collaboration-samples.git cd ckeditor5-collaboration-samples/php
Set the license key in
Comments and track changes are commercial CKEditor 5 plugins and require a valid license key to work. Keep in mind that you need a license which enables both comments and track changes. If you do not have a key yet, please contact us.
Enter the directory and run the built-in PHP web server:
php -S localhost:8888
Open http://localhost:8888/ in your browser.
The code of this example is split into two directories:
frontend– Contains a customized CKEditor 5 build.
backend– Contains a sample PHP application which exposes API endpoints used by the
frontend directory you can find the comments and track changes integrations as well as a special CKEditor 5 build.
The CKEditor 5 build is the classic editor with additional comments and track changes plugins. It is already compiled, so you can use it as it is. However, if you want to modify the build, for instance to add more plugins, refer to the CKEditor 5 build section below.
Note: Collaboration is a complex topic and despite having over ten thousand tests, we cannot guarantee that no error will show up. Hence why the integration comes with the watchdog, which is a helpful utility that ensures an editor instance is running and in case of an error, tries to restore it to the working state. See the usage guide in the watchdog documentation
The comments plugin integration presented in this example uses a
custom adapter that you can find in
frontend/src/customCommentsAdapter.js. The adapter implements all the required methods which are executed at an appropriate moment, e.g. when it is required to load a comment thread or modify a given comment. All the adapter methods use the Fetch API to communicate with API endpoints exposed by the PHP backend part of the example.
To read more about creating a custom CKEditor 5 build with comments, refer to the Integrating comments with your application article in the CKEditor 5 documentation.
Track changes integration
The track changes plugin integration presented in this example uses a custom adapter that you can find in
frontend/src/customTrackChangesAdapter.js. Similarly to the comments adapter, the track changes adapter implements the required methods which are executed at an appropriate moment. In this case just two methods are needed:
All the adapter methods use the Fetch API to communicate with API endpoints exposed by the PHP backend part of the example.
To read more about creating a custom CKEditor 5 build with track changes, refer to the Integrating track changes with your application article in the CKEditor 5 documentation.
CKEditor 5 build
The CKEditor build created for the purpose of this example is based on classic editor, but you can use any other available CKEditor 5 build as a base. Your build needs to contain comments and track changes as this build does.
The example includes a built version of the editor in
frontend/build/ckeditor.js. It is ready to run and does not require the building step.
If you want to do the build step yourself, you can do this with the following commands:
cd frontend npm install npm run build
See the CKEditor 5 Installing plugins guide to learn more.
The backend part of the example is a simple PHP application that exposes a few API endpoints used by adapters. For simplicity, it uses a one-file SQLite database located in the
backend/database.sqlite file as a storage. For clarity, all the operations on the database are performed using only the PDO abstraction layer.