- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
Codox Real-time Editing
Codox Real-time Editing
Froala WYSIWYG HTML Editor has an official plugin and integration for real-time collaboration with Codox.io
The value of apiKeyin
the query string should be set to the one created for your Froala integration on the dashboard:
How it works:
Add the following JavaScript block to your application to enable real-time co-editing for Froala. Replace the apiKey field with your own, which you can get here.
The co-editing session will start inside the Froala editor instance specified in the editor
attribute.
Before invoking codox.init()
the Froala editor should be fully initialized. In the example code, we ensure that Froala is initialized first by adding an initialized
event hook to Froala's constructor.
The values for docId
and username
should come from your document management service. Wave expects docId
to be globally unique across your service.
CSS
<!-- Include the following css file. -->
<link href="https://cdn1.codox.io/lib/css/wave.client.css" rel="stylesheet">
JAVASCRIPT
<!-- Include the following js file. -->
<script src="https://app.codox.io/plugins/wave.client.js?apiKey=your-api-key&app=froala" type="text/javascript"></script>
<script>
const codox = new Codox();
const editor = new FroalaEditor('#editor', {
events: {
//setting up on initialization event
'initialized': function() {
//Adding Wave configuration
var config = {
"app" : "froala",
"docId" : "mydoc",
"username" : "Chris",
"editor" : editor,
"apiKey" : "d5bb1f48-356b-4032-8d0c-ba1a79396f79", //replace this
};
codox.init(config);
}
}
</script>
Demo #1
How to test
Start editing in one editor and the edits will appear on both editors. This represents you are editing content and your edits appear to your co-worker on his own editor.
Demo #2
Overview
This demo starting by displaying "Demo will load shortly" message which will be replaced with a Froala editor with at least one avatar above the top-right corner of the editor window. Each avatar is representing a user (on of them is You) who joins a co-editing session. Avatars will have a random name just for testing purposes.
If there are more than one avatars, it means there are other users opening this page at the same time.
The max number of avatars is three which is determined based on our subscription plan with codox.io.If the "Demo will load shortly". message is replaced with 'The real-time collaboration demo will not work because the number of users exceeds the allowed number of users/session in the codox.io plan we subscribed to, Wait a little until one of the users leaves the page.' message, this means there are three or more users currently testing this demo, you could wait on the page and once a user leaves, the demo will start automatically.
How to test
Try Froala Free