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

The future of collaboration; public beta now available

Elise Bentley

March 25th, 2021

Written by

Elise Bentley

Category

How-tos & Tutorials

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.

Live RTC Demo

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 30-day free trial of all our premium features hereAll 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; 

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}`);
    });
  },
});

To help ensure the editor knows when a user leaves the session, the below code is an example of what to use. This, again, should be placed within the editor.

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}`);
      }
    );
  },
});

Need help? 

Setting up a Real-time Collaboration solution is complex regardless of which company’s solution you select. That is why all users of TinyMCE’s Real-time Collaboration Plugin can access our support team if they are having trouble. Please reach out to our support team here

What’s next? 

We kept our customer’s use cases top of mind in the development of the solution and the release of the Closed Beta. Over the next month, we will continue to actively work with our beta users to improve the solution and release new features that enable a world-class content creation experience. 

Keep an eye out as we continue to publish new information about Real-time Collaboration, including our self-hosted solution. You can keep up to date by registering your interest here

We’ve been posting loads of content about our journey to building Real-time Collaboration here at Tiny. Check out our previous blogs about our Real-Time Collaboration feature here:

Collaboration
byElise Bentley

Senior Director of Marketing at Tiny. Elise has marketing experience across a range of industries and organisation sizes, and loves to blend the creative aspect of marketing together with data to develop engaging and effective marketing strategies and campaigns.

Related Articles

  • How-tos & Tutorials

    How to get customer feedback (and what to do with it)

    by Qiran Gabrielle-Grace 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