TinyMCE
MoxieManager
Drive
From January 2023, TinyMCE no longer offers Real-Time Collaboration (RTC) for new customers. For Existing customers, we'll be in contact to discuss options. Please reach out to your Account Manager if you are a customer using RTC, and you have any questions about the plugin.
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:
- git https://git-scm.com/
- yarn https://yarnpkg.com/
- ssh-keygen https://www.tiny.cloud/docs/advanced/generate-rsa-key-pairs/
- Visual Studio Code https://code.visualstudio.com/
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.
