Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

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

  • 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.

  • Try Froala Free
    [class^="wpforms-"]
    [class^="wpforms-"]
    [bws_google_captcha]
    <div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1223856999" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
    [class^="wpforms-"]
    [class^="wpforms-"]
    [bws_google_captcha]
    <div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_752735203" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
    [class^="wpforms-"]
    [class^="wpforms-"]
    [bws_google_captcha]
    <div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1728289552" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>