Real-time Collaboration (RTC) events

TinyMCE’s Real-time Collaboration (RTC) plugin will be retired and deactivated on December 31, 2023, and is no longer available for purchase.

RtcClientConnected

When a user joins a real-time collaboration session, the RtcClientConnected event is fired on existing TinyMCE instances in the session and provides the user information of the newly joined user to other editors in the session.

Event fields: RtcClientConnected

Field Type Description

userId

string

This is the user’s unique ID (the sub field from their JWT, which is also used for rtc_user_details_provider). Multiple connection events will be received with the same user ID if a user opens multiple sessions (for example on desktop and mobile).

userDetails

object

This is a copy of the object returned by rtc_user_details_provider. RTC only uses the fullName field, but the entire object will be cloned and passed to rtc_client_connected.

If a user details provider is not configured, this will be an empty object.

clientId

string

This is a unique identifier, generated by the RTC protocol, that can be used to differentiate between the same user connecting multiple times.

caretNumber

integer

This will be a number between 1 and 8, corresponding to one of the 8 colors defined in TinyMCE CSS. TinyMCE supports 8 distinct caret colors. If more than 8 clients connect to a session, the numbers will be reused.

A custom skin is required to change these colors, and no more than 8 are supported. For information on creating a custom skin, see: Customizing the Editor UI.

clientInfo

object

This is a copy of the rtc_client_info data from the remote user’s editor configuration.

If none was configured, this will be an empty object.

Example of using the RtcClientConnected event

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

RtcClientDisconnected

This event is fired when a user leaves the session, and can be used to trigger user interface changes to let other users know that the user has disconnected.

Event fields: RtcClientDisconnected

Field Type Description

userId

string

This is the user’s unique ID (the sub field from their JWT, which is also used for rtc_user_details_provider). Multiple connection events will be received with the same user ID if a user opens multiple sessions (for example on desktop and mobile).

userDetails

object

This is a copy of the object returned by rtc_user_details_provider. RTC only uses the fullName field, but the entire object will be cloned and passed to rtc_client_connected.

If a user details provider is not configured, this will be an empty object.

clientId

string

This is a unique identifier, generated by the RTC protocol, that can be used to differentiate between the same user connecting multiple times.

caretNumber

integer

This will be a number between 1 and 8, corresponding to one of the 8 colors defined in TinyMCE CSS. TinyMCE supports 8 distinct caret colors. If more than 8 clients connect to a session, the numbers will be reused.

A custom skin is required to change these colors, and no more than 8 are supported. For information on creating a custom skin, see: Customizing the Editor UI.

clientInfo

object

This is a copy of the rtc_client_info data from the remote user’s editor configuration.

If none was configured, this will be an empty object.

Example of using the RtcClientDisconnected event

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