Understanding editor loads

Understanding editor loads for TinyMCE

This information is only relevant to Tiny Cloud users. Users who self-host the open source version of TinyMCE are not subject to editor load restrictions, but must comply with the open source license.

An editor load is the event that occurs each time TinyMCE is initialized in your application. The editor dispatches the 'init' event to indicate a successful load. For example, if 100 users load TinyMCE 10 times each, the result would be 1,000 editor loads.

The process of initializing an editor involves several steps.

  1. The integrator initializes one or more editors on the webpage, commonly accomplished through the tinymce.init({ …​ }) method.

  2. The selector property of the init method determines which elements should be replaced with editor instances. For example: if the selector is textarea and there are 5 textarea elements on the page, 5 editor instances will be created.

    Each editor instance performs the same initialization sequence and then dispatches an init event. This event is dispatched even if the the editor is not visible.

  3. The 'init' event serves as the conclusive indicator that the editor has completed its loading process. At this point, the editor has been successfully initialized and is ready for user interaction.

How are editor loads counted?

An editor load is counted each time a new TinyMCE editor instance completes the initialization sequence and dispatches an init event.

What happens if I have multiple editors on a page?

Each individual editor instance on a page is counted as one editor load. For example, if a page has ten editors, a single refresh of that page results in ten editor loads.

How can I track editor loads?

To record editor loads in an external analytics or logging service, use the init_instance_callback option. The callback runs once for each editor instance, immediately after the editor dispatches the init event, so each call corresponds to one editor load.

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  init_instance_callback: (editor) => {
    // Replace myService with the analytics or logging service used by the application.
    // Add any other editor properties the application needs to track.
    myService.log({
      event: 'editor-load',
      editorId: editor.id,
      page: window.location.pathname
    });
  }
});

The callback receives the Editor instance, so the object sent to the service can include any of the editor’s properties. The example uses editor.id because it identifies which editor on the page loaded.

The editor.id value is the id attribute of the element the editor replaces. When that element has no id, the editor uses its name attribute if no other element on the page has that id, and otherwise generates an identifier such as mce_0. Generated identifiers can change between page loads, so assign a unique id to each target element to track loads for a specific editor.

The same result can be achieved by binding a listener to the init event in the setup option, for example editor.once('init', () => myService.log({ editorId: editor.id })). The init_instance_callback option is simpler when the only requirement is to record the load.

What can contribute to a high number of editor loads?

The most obvious scenario is using multiple editors on a single page (see above). For example:

  • An email building app that has a TinyMCE editor embedded in multiple sections

  • A publicly available page on a high traffic website with multiple editor instances

How can I get unlimited editor loads?

You can get unlimited editors loads one of three ways:

  • The open-source version of TinyMCE can be self hosted, and is not subject to editor load restrictions.

  • The open-source version of TinyMCE is also available via third party-hosted CDNs and is not subject to editor load restrictions.

  • For the Enterprise version of Tiny MCE with Premium features, get in touch with our Sales team for a custom quote.

For information about annual plan billing, overage pricing, and other billing-related questions, please visit How TinyMCE usage-based billing works.