Getting started with Real-Time Collaboration (RTC)

Note: This feature is only available for TinyMCE 5.9 and later.

This procedure will assist with setting up TinyMCE with real-time collaboration.

Important: A secure context is required for Real-Time Collaboration. Browsers restrict some features to secure contexts, including features required for Real-Time Collaboration. Ensure that your web server is set up for HTTPS and your development server is accessable using HTTPS or localhost.

The steps required for setting up Real-Time Collaboration for TinyMCE are:

1. Register for a Tiny Cloud API key.
2. Add a public key to the Tiny Cloud API key.
3. Set up an Encryption Provider endpoint (or server).
4. Set up a JSON Web Token (JWT) Provider endpoint (or server).
5. Configure the required TinyMCE options.

1. Register for a Tiny Cloud API key

If you do not have a Tiny Cloud API key, you can sign up for a trial or purchase a subscription on the Tiny pricing page.

2. Add a public key to the Tiny Cloud API key

The Real-Time Collaboration (RTC) Server requires a public key generated from the same private key that will be used on your JSON Web Token (JWT) provider endpoint. The public key(s) stored on the Real-Time Collaboration (RTC) Server are used to ensure that content is sent by authorized users.

There are two methods for generating and adding a public key to your API key:

1. The secure key pair generator at Tiny Account - JWT Keys (recommended).
2. Generate a key pair locally and add the public key to Tiny Account - JWT Keys.

Generate a key pair using the Tiny Account JWT Keys page

The Tiny Account - JWT Keys page provides a private/public key generator, providing a quick and secure way of generating the required keys. This generator will store a copy of the public key, and provide a downloadable file for both the public and private keys. Tiny does not store the private key and the key pair cannot be retrieved later.

Generate a key pair locally

When generating a key pair locally, use one of the supported algorithms. Real-Time Collaboration (RTC) does not support symmetrical encryption algorithms, such as HS256. Tiny recommends using the RS256 algorithm. The following algorithms are supported:

• RS256
• RS384
• RS512
• PS256
• PS384
• PS512

For details on each of these algorithms, visit: RFC 7518, JSON Web Algorithms (JWA) Section 3 - Cryptographic Algorithms for Digital Signatures and MACs.

For instructions on generating a key pair locally, see: Creating a private/public key pair for Tiny Cloud.

Once a public key has been generated, add the public key to the Tiny Cloud API key at: Tiny Account - JWT Keys.

3. Set up an Encryption endpoint

TinyMCE Real-Time Collaboration (RTC) uses encryption keys to encrypt content before sending it to collaborators through the RTC server to provide end-to-end encryption.

For information on setting up an Encryption Provider endpoint, see: Real-Time Collaboration (RTC) Encryption Setup.

4. Set up a JSON Web Token (JWT) Provider endpoint

Real-Time Collaboration (RTC) requires setting up JSON Web Token (JWT) authentication. This is to ensure that only authenticated users will be able to access and collaborate on documents.

For information on setting up a JSON Web Token Provider endpoint, see: Real-Time Collaboration (RTC) JWT Authentication Setup.

5. Configure the required TinyMCE RTC options

Basic static Real-Time Collaboration (RTC) setup

This example shows how to add the Real-Time Collaboration (RTC) plugin and configure the required options using static values. This configuration may be useful for setting up an RTC-enabled editor for initial testing, but not for production environments as it exposes your sensitive and private data.

tinymce.init({
  selector: 'textarea#static-rtc-example',
  plugins: 'rtc',
  rtc_document_id: 'unique-document-id',
  rtc_encryption_provider: () => Promise.resolve({ key: 'a secret key' }),
  rtc_token_provider: () => Promise.resolve({ token: 'signed-JWT-token' })
});

Basic Dynamic configuration that fetches encryption keys and tokens from a server

This example is a minimal production setup, where the document ID, encryption secret, and JSON Web Token are dynamically retrieved from a server.

tinymce.init({
  selector: 'textarea#rtc-example',
  plugins: 'rtc',
  /* Set the document ID as a string. */
  rtc_document_id: 'unique-document-id',
  /*
   * Provide a promise that retrieves an encryption key for the document
   * from a remote endpoint or server.
   */
  rtc_encryption_provider: ({documentId, keyHint}) =>
    fetch('/getKey', {
      method: 'POST',
      credentials: 'include',
      body: JSON.stringify({ documentId, keyId: keyHint })
    })
    .then((response) => response.json())
    .then(({ keyId, secret }) => ({ key: secret, keyHint: keyId }))
    .catch((error) => console.log('Failed to return encryption key\n' + error)),
  /*
   * Provide a promise that retrieves a JSON Web Token for the user
   * from a remote endpoint or server.
   */
  rtc_token_provider: ({ documentId }) =>
    fetch('/getJwtToken', {
      method: 'POST',
      credentials: 'include',
      body: JSON.stringify({ documentId }),
    })
    .then((response) => response.json())
    .then(({ jwt }) => ({ token: jwt }))
    .catch((error) => console.log('Failed to return a JWT\n' + error))
});

For details on the available configuration options, see: Configuration Options.

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.