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

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

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.