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:

Try it yourself:

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>