tinymce.Theme

TinyMCE theme pseudo class. Allows for a custom theme to be used with TinyMCE when registered using the ThemeManager.

This is a pseudo class that describes how to create a custom theme for TinyMCE.

See AddOnManager for more information about the methods available on the ThemeManager instance.

Warning: Much of TinyMCE’s functionality is provided by the default Silver theme. Creating a custom theme may require the re-implementation of this functionality. To change TinyMCE’s appearance, Tiny recommends changing the Skin instead.

Examples

tinymce.ThemeManager.add('MyTheme', (editor) => {
  // Setup up custom UI elements in the dom
  const div = document.createElement('div');
  const iframe = document.createElement('iframe');
  document.body.appendChild(div);
  document.body.appendChild(iframe);

  // Themes should fire the SkinLoaded event once the UI has been created and all StyleSheets have been loaded.
  editor.on('init', () => {
    editor.fire('SkinLoaded');
  });

  // Themes must return a renderUI function that returns the editorContainer. If the editor is not running in inline mode, an iframeContainer should also be returned.
  const renderUI = () => {
    return {
      editorContainer: div,
      iframeContainer: iframe
    };
  };

  // Return the renderUI function
  return {
    renderUI: renderUI
  };
});