Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

A Real-time Collaboration guide for TinyMCE

Joe Robinson

November 2nd, 2021

Written by

Joe Robinson

Category

How-tos & Tutorials

Real time collaboration is indispensable for communication, and sharing information between teams – especially in remote-first working environments. As part of the TinyMCE 5.9 release, you’re now able to securely  collaborate in real time –  using the end-to-end encryption of our new Real-time Collaboration (RTC) plugin.

Our developers have spent a long time working on this plugin, and to help you implement and enjoy its benefits, we’ve created a how-to  video series. 

When viewed end-to-end, the videos provide the complete set of instructions you need to modify a content management system (CMS) using document locking into one using Real-time collaboration. We’re proud to share with you the video playlist, and a walkthrough of the content, and what to expect, in each episode.

Episode 1: Setting up the demo project

To complete this demo series you will need the following tools:

This video has been recorded on a Linux operating system however most steps should be identical on all operating systems.

This video covers the following:

  • Cloning the teach-rtc GitHub repository
  • Opening terminals in Visual Studio Code
  • Installing the node modules using yarn
  • Creating a TinyMCE account on tiny.cloud/auth/signup 
  • Configuring the project with the TinyMCE API key
  • Creating the database using Knex
  • Generating a public/private key-pair with ssh-keygen
  • Registering the public key on tiny.cloud/my-account/jwt/
  • Starting the server and client application
  • Using the API documentation
  • Using the demonstration CMS application

Episode 2: Understanding what’s in the demo project

Episode 2 describes each aspect of the client and server. The teach-rtc GitHub demo project contains a simple express application that replicates a simple CMS. The goal of the videos is to show how a developer can integrate RTC into a CMS by presenting the key integration points.  

The demo has document locking by default – only one writer can write at a time. It’s the exact opposite of what’s needed on a collaborative CMS system.

The demo is made of two parts:

1. A React app for the front end (called the client)
2. An express application for the server, making use of a database.

With this structure, it matches a basic implementation of a real world application.

Episode 3: Adding Real-time Collaboration to TinyMCE

Episode 3 shows the essential steps needed to set up TinyMCE with the Real-time Collaboration plugin. There are 3 key configuration items that are needed to enable the RTC plugin.

rtc_document_id

A unique text value that identifies a document.

rtc_encryption_provider

This provides the key used to hide the content of your document from the TinyMCE server and any third parties. It is the centre of the RTC end-to-end encryption built into the RTC plugin.

rtc_token_provider

Creates a JSON Web Token (JWT), which then identifies a user as having access to documents linked to your TinyMCE API key.

Please refer to the documentation to become familiar with these settings. Episode 6 focuses on improving the rtc_encryption_provider configuration. Episode 7 focuses on improving the rtc_token_provider configuration.

Episode 4: Removing CMS document locks

Even though the previous episodes shared on how to configure RTC, document locks are common on CMSs to prevent users overwriting content while the document is opened by another user. Episode 4 shares how to remove the locks, as RTC allows multiple users to simultaneously collaborate on the same document.

It also explains the value of the rtc_snapshot option to save documents from being overwritten, and how to configure the option. It’s important to protect your end users’ documents from being lost and overwritten. That’s why this episode also explains what JavaScript to change in the application to make sure documents automatically save only when new content is added – that is, the latest version of the document.


Episode 5: Clearing functions Real-time Collaboration doesn’t need

It’s important not to have any unnecessary JavaScript inside the demo. This practice makes a codebase clearer for new users to understand when sharing information. Shorter files are also easier to maintain.

The RTC plugin replaces or makes some functions from our original CMS demo obsolete. Here are the functions we should remove as they are no longer required:

  • Functions implementing the document locking
  • Functions implementing the timer-based autosave
  • Database fields used to lock the documents

Episode 6: Fortifying the end-to-end encryption for Real-time Collaboration

Episode 6  is very important, because it explains how to fortify the documents, going beyond a working demo and into something more suitable for a production ready application. The episode explains how to randomly generate strong per-document passwords. These passwords are used by RTC to derive secret keys for end-to-end encryption – enabling enterprise-grade security.

Episode 7: Restricting access with a document specific JWT

The JWT used in episode 3 is very general and allows access to all documents associated with the TinyMCE API key. But what if you want to restrict access to certain documents in your application? What if you only want people to only read a document? There’s a solution for that.

Episode 7 explains how to create a JWT that is specific to the document which allows fine-grained permissions.

Episode 8: Cosmetic improvements

Episode 8 shows how to configure some optional settings that will enable a better experience for your users. After this video you should understand the settings rtc_user_details_provider, rtc_client_connected and rtc_client_disconnected:

rtc_user_details_provider

When set, shows user information - their name - in a collaborative session.

rtc_client_info

You can configure any information about users within this option, and share it as needed. For example, the name of the browser a user is running.

rtc_client_connected and rtc_client_disconnected

You can use this interface to tell your users when a client has connected or disconnected. It can also receive extra information from rtc_user_details_provider and rtc_client_info

While a basic implementation can display the information on client status in the console, the video explains further how to display the client status above the text editor directly.

Where to go after setting up Real-time Collaboration

Thanks for watching the playlist, and you can find extensive information on the TinyMCE APIs and the Real-time Collaboration in the documentation.

What were the episodes where you got stuck, or were confused? Let us know at @jointiny, or contact us. We’ve also set up a GitHub discussion space. Your feedback helps make our documents and tutorials better.

CollaborationTinyMCE
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-tos & Tutorials

    How to get started with TinyMCE Mentions

    by Joe Robinson in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing