Skip to content
.github-star { padding-left: 15px; margin-bottom: 15px; }

3rd Party Integration

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>

Demo Overview

This demo will show you how real-time editing works, first, you should be able to see "Demo will load shortly". message below which will be replaced with a Froala editor with at least one avatar above the top-right corner of the editor window representing a user (currently it 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

  • Open this page on two different browser windows.
  • Minimize the browser windows and make them aligned horizontally.
  • You should now have a Froala editor opened on each page.
  • Start typing on one editor and you should be able to see the changes are displayed in real-time on the other editor with the name of the editor.

  • JSfiddle Embed Demo script:

    <script async src="//jsfiddle.net/Froala_marketing/7y5hp0sm/156/embed/result/"></script>

    Iframe code: