The future of collaboration: public beta now available

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.

Collaboration is a hot topic, not just within the rich text editor space, but within the wider community. As companies embrace remote working, and teams go global, collaborating within a single document or app has become a highly sought out feature.

It has been no secret here at Tiny, that we have been working hard on developing Real-time Collaboration for TinyMCE. 

Today, we’re pleased to announce that Real-time Collaboration has advanced from Closed Beta to the Cloud Public Beta release stage. With this release, developers can access Real-time Collaboration on any of our cloud subscription plans including Cloud Essential and Cloud Professional.

If you are not a current paid user, every plan comes with a 14-day free trial to get you started, plus access to our popular premium features such as PowerPaste, Advanced Code Editor, and more. Check out the plans here.

What is Real-time Collaboration?

Real-time Collaboration provides you with the capability to add a cost-effective, real-time collaborative editing feature into your application. Adding collaborative experiences to your product can take development teams months and even years to build. With our Real-time Collaboration solution, developers can conveniently deploy collaborative features within their product or application.

Getting started

If you are an existing TinyMCE user on a subscription plan, your subscription comes with a 14-day free trial. To get started, simply follow the steps outlined below. 

If you are not on a subscription plan, you can still access the beta through our 14-day free trial of all our premium features here. All you need to do is sign-up for a Tiny Cloud account and access your free-forever API key. 

Step 1: Setup TinyMCE & Configure the editor

For this article, we are assuming you already have an instance of TinyMCE up and running via our cloud. 

If you haven’t had a chance to do this, we have the perfect tutorial to get you up and running in roughly 5 minutes with a simple configuration and our most popular premium features; How to get your Tiny Cloud API key setup. 

Step 2: Set-up the Real-time Collaboration plugin

Before you go ahead and configure the Real-time Collaboration, please note you need to have the following set-up;

1. A Tiny Cloud API key from your Tiny Account, which you set-up in the last step or have previously configured 
2. A JSON Web Token (JWT) key, which can be generated directly in your Tiny account

As part of setting up Real-time Collaboration, you will need to temporarily store the generated JWT keys for use in the following procedure. Next, place the following code into your editor. 

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "rtc",
  rtc_document_id: "unique-document-id",
  rtc_encryption_provider: () => Promise.resolve({ key: "a secret key" }),
  rtc_token_provider: () =>
    fetch("/jwt", {
      method: "POST",
    }).then((response) => response.json()),
  rtc_snapshot: ({ version, html }) => console.log(version, html),
});

Important note: The above example shows how to get the RTC plugin up and running using hardcoded values. For a production setup, the document ID and secret key would be retrieved from your server. The above example also assumes that a JWT provider endpoint exists at ‘/jwt’. For information on setting up a JWT endpoint, see JWT authentication in our documentation.

Step 3: Setup Real-time Collaboration JWT Authentication 

As part of the Tiny Cloud Services, our tokens use a public/private RSA key API. As part of our commitment to security, we only store the public key, allowing complete control on the developer’s side of authentication. Developers need to store the private key in their backend. 

To create your key pair, you can do so via your Tiny Account. The public key is stored in your Tiny Account, and the private key should be downloaded and stored in your backend. 

In order to set-up the JWT, including the endpoint providers, please read our in-depth documentation. 

Considering the complexity surrounding JWT, we encourage you to reach out to our support team if you are struggling with setting this up.

Step 4: Configuring your Real-time Collaboration instance 

For more in-depth documentation on how to configure Real-time Collaboration within your TinyMCE instance, we encourage you to check out the in-depth technical documentation. 

When configuring your Real-time Collaboration instance, the following configuration options are required for this plugin to work correctly; 

• rtc_document_id
• rtc_encryption_provider
• rtc_token_provider

In addition to the above options, there are other ways to configure your TinyMCE instance which our documentation takes you through. A core differentiator of TinyMCE’s Real-time Collaboration plugin is end-to-end encryption, built on the belief that you own your data, not us. This particular configuration ensures our services cannot read any content placed into the editor and is vital when working with sensitive information you do not want a third-party to access or read. 

Step 5: Setup Real-time Collaboration events

Real-time Collaboration events are fired when a user enters into a new session, or leaves a session, within the TinyMCE editor. It is what allows your instance of our editor to differentiate between who is editing what on the document in real-time. Setting these events is key to stitching the entire collaborative experience together. 

We encourage you to check out the full documentation for further explanation on how these events work and how to set them up in your instance. 

To let TinyMCE know to fire an event when a user enters the session you can use the below code in your editor as an example.

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "rtc",
  setup: (editor) => {
    editor.on("RtcClientConnected", ({ userId, caretNumber, userDetails }) => {
      console.log(`User connected userId:${userId}`);
    });
  },
});

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  plugins: "rtc",
  setup: (editor) => {
    editor.on(
      "RtcClientDisconnected",
      ({ userId, caretNumber, userDetails }) => {
        console.log(`User disconnected userId:${userId}`);
      }
    );
  },
});