Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Real-time Collaboration (RTC) events

List of all available RTC specific events.

Contribute to this page

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

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.