Froala real-time collaboration with Codox.io

by Froala_marketing

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@3.0.0-beta.2/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://cdn1.stage.codox.io/lib/css/wave.client.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn1.stage.codox.io/dsm/lib/api/wave.client.js"></script>
<script src="https://cdn.jsdelivr.net/npm/froala-editor@3.0.0-beta.2/js/froala_editor.pkgd.min.js"></script>

<div class="editors" >
<div class="editor" id="editor1"><h1>
This is a demo for real-time collaboration with Codox.io
</h1></div>
</div>
<div class="co-editor-demo-message">
Demo will load shortly.
</div>

CSS

.editors {
  display: flex;
  justify-content: space-evenly;

}
.editor {
  flex: 1 1 auto;
  max-width: 90%;
    display: none;
}
.co-editor-demo-message{
  background-color: #eee;
  padding: 10px;
  margin: 10px auto 10px;
  max-width: 90%;
}

JavaScript

const username = userName();

let error, during_error;

function initEditor(){
  error = false;
  const  codox1 = new Codox();
  window.codox1 = codox1;
  let editor = new FroalaEditor('#editor1', {
    key: "mPD4tE1F2D1E1I2B4ssD-13vvdpxB3qvfA4A3G3I3F2B6B3C4C3A2==",
    height: 300,
    documentReady: true,
    //add events configuration
    events: {
      //setting up on initialization event
      'initialized': function() {
        //Adding Wave configuration
        var config = {
          "docId"    : "3e6bd2d0990423c9c16a35985140775f",
          "username" : username,
          "editor"   : editor,
          "apiKey"   : "58e429b0-be4a-4cd8-8c8d-9a37fb0adec0",
          "app"      : "froala",
        };
        //start!
        codox1.init(config);
      }
    }
  });

  codox1.on('users_update', function(users){
    console.log('site1 users', users)
  });

  codox1.on("error", function(data){
    if (data.message === 'max_sessions_exceeded'){
      //emitted whenever it is over the montly quota
      console.log('max_sessions_exceeded');
            $('.co-editor-demo-message').html('We are sorry, The real-time collaboration demo will not work because number of sessions is over the monthly quota in our codox.io plan.').show();

    }else if (data.message === 'session_full'){
      //emitted whenever remote changes have updated the document
      $('.co-editor-demo-message').html('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.').show();

      if (editor) {
        editor.destroy();
        codox1.stop();
        error = 'session_is_full';
      }      
    }
  });
  
}


function displayEditor(){

    $('#editor1').fadeIn();
  	clearInterval(during_error);
    $('.co-editor-demo-message').hide();

}

   
function userName() {
  const names = ['Andy','David','Kegan','Yann', 'Robert'];
  const...