tinymce.Editor

This class contains the core logic for a TinyMCE editor.

Examples

// Add a class to all paragraphs in the editor.
tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('p'), 'someclass');

// Gets the current editors selection as text
tinymce.activeEditor.selection.getContent({ format: 'text' });

// Creates a new editor instance
const ed = new tinymce.Editor('textareaid', {
  some_setting: 1
}, tinymce.EditorManager);

ed.render();

Summary

Properties

Name Type Summary Defined by

baseURI

URI

URI object to current document that holds the TinyMCE editor instance.

Editor

contentCSS

Array

Array with CSS files to load into the iframe.

Editor

contentStyles

Array

Array of CSS styles to add to head of document when the editor loads.

Editor

documentBaseURI

URI

URI object to document configured for the TinyMCE instance.

Editor

dom

DOMUtils

DOM instance for the editor.

Editor

editorUpload

EditorUpload

Editor upload API

Editor

formatter

Formatter

Formatter instance.

Editor

id

String

Editor instance id, normally the same as the div/textarea that was replaced.

Editor

initialized

Boolean

Is set to true after the editor instance has been initialized

Editor

mode

EditorMode

Editor mode API

Editor

notificationManager

NotificationManager

Notification manager reference, use this to open new windows and dialogs.

Editor

options

EditorOptions

Editor options API

Editor

parser

DomParser

HTML parser will be used when contents is inserted into the editor.

Editor

plugins

Object

Name/Value object containing plugin instances.

Editor

schema

Schema

Schema instance, enables you to validate elements and its children.

Editor

selection

Selection

Selection instance for the editor.

Editor

serializer

Serializer

DOM serializer for the editor. Will be used when contents is extracted from the editor.

Editor

theme

Theme

Reference to the theme instance that was used to generate the UI.

Editor

ui

Ui

Editor ui components

Editor

undoManager

UndoManager

Undo manager instance, responsible for handling undo levels.

Editor

windowManager

WindowManager

Window manager reference, use this to open new windows and dialogs.

Editor

Constructors

Name Summary Defined by

Editor()

Constructs a editor instance by id.

Editor

Methods

Name Summary Defined by

addCommand()

Adds a custom command to the editor. This function can also be used to override existing commands. The command that you add can be executed with execCommand.

Editor

addQueryStateHandler()

Adds a custom query state command to the editor. This function can also be used to override existing commands. The command that you add can be executed with queryCommandState function.

Editor

addQueryValueHandler()

Adds a custom query value command to the editor. This function can also be used to override existing commands. The command that you add can be executed with queryCommandValue function.

Editor

addShortcut()

Adds a keyboard shortcut for some command or function.

Editor

addVisual()

Adds visual aids for tables, anchors, etc so they can be more easily edited inside the editor.

Editor

convertURL()

URL converter function this gets executed each time a user adds an img, a or any other element that has a URL in it. This will be called both by the DOM and HTML manipulation functions.

Editor

destroy()

Destroys the editor instance by removing all events, element references or other resources that could leak memory. This method will be called automatically when the page is unloaded but you can also call it directly if you know what you are doing.

Editor

dispatch()

Dispatches the specified event by name. Consult the

event reference for more details on each event.

Observable

execCommand()

Executes a registered command on the current instance. A list of available commands can be found in the tinymce command identifiers documentation.

Editor

fire()

Fires the specified event by name. Consult the event reference for more details on each event. Deprecated in TinyMCE 6.0 and has been marked for removal in TinyMCE 7.0. Use dispatch instead.

Observable

focus()

Focuses/activates the editor. This will set this editor as the activeEditor in the tinymce collection it will also place DOM focus inside the editor.

Editor

getBody()

Returns the root element of the editable area. For a non-inline iframe-based editor, returns the iframe’s body element.

Editor

getContainer()

Returns the container element of the editor. The container element includes all the elements added to the page for the editor. Such as UI, iframe, etc.

Editor

getContent()

Gets the content from the editor instance, this will cleanup the content before it gets returned using the different cleanup rules options.

Editor

getContentAreaContainer()

Returns the content area container element of the editor. This element holds the iframe or the editable element.

Editor

getDoc()

Returns the iframes document object.

Editor

getElement()

Returns the target element/textarea that got replaced with a TinyMCE editor instance.

Editor

getParam()

Returns a configuration parameter by name. Deprecated in TinyMCE 6.0 and has been marked for removal in TinyMCE 7.0. Use the editor.options.get API instead.

Editor

getWin()

Returns the iframes window object.

Editor

hasEditableRoot()

Returns the current editable state of the editor’s root element.

Editor

hasEventListeners()

Returns true/false if the object has a event of the specified name.

Observable

hasFocus()

Returns true/false if the editor has real keyboard focus.

Editor

hasPlugin()

Checks that the plugin is in the editor configuration and can optionally check if the plugin has been loaded.

Editor

hide()

Hides the editor and shows any textarea/div that the editor is supposed to replace.

Editor

insertContent()

Inserts content at caret position.

Editor

isDirty()

Returns true/false if the editor is dirty or not. It will get dirty if the user has made modifications to the contents.

The dirty state is automatically set to true when the user modifies editor content after initialization or the last editor.save() call. This includes changes made using undo or redo.

Editor

isHidden()

Returns true/false if the editor is hidden or not.

Editor

load()

Loads contents from the textarea, input or other element that got converted into an editor instance. This method will move the contents from that textarea, input or other element into the editor by using setContent so all events etc that method has will get dispatched as well.

Editor

nodeChanged()

Dispatches out a onNodeChange event to all observers. This method should be called when you need to update the UI states or element path etc.

Editor

off()

Unbinds an event listener to a specific event by name. Consult the event reference for more details on each event.

Observable

on()

Binds an event listener to a specific event by name. Consult the event reference for more details on each event.

Observable

once()

Bind the event callback and once it fires the callback is removed. Consult the event reference for more details on each event.

Observable

queryCommandState()

Returns a command specific state, for example if bold is enabled or not.

Editor

queryCommandSupported()

Returns true/false if the command is supported or not.

Editor

queryCommandValue()

Returns a command specific value, for example the current font size.

Editor

remove()

Removes the editor from the dom and tinymce collection.

Editor

render()

Renders the editor/adds it to the page.

Editor

resetContent()

Resets the editors content, undo/redo history and dirty state. If initialContent isn’t specified, then the editor is reset back to the initial start content.

Editor

save()

Saves the contents from an editor out to the textarea or div element that got converted into an editor instance. This method will move the HTML contents from the editor into that textarea or div by getContent so all events etc that method has will get dispatched as well.

Editor

setContent()

Sets the specified content to the editor instance, this will cleanup the content before it gets set using the different cleanup rules options. Note: The content return value was deprecated in TinyMCE 6.0 and has been marked for removal in TinyMCE 7.0.

Editor

setDirty()

Explicitly sets the dirty state. This will fire the dirty event if the editor dirty state is changed from false to true by invoking this method.

Editor

setEditableRoot()

Changes the editable state of the editor’s root element.

Editor

setProgressState()

Sets the progress state, this will display a throbber/progess for the editor. This is ideal for asynchronous operations like an AJAX save call.

Editor

show()

Shows the editor and hides any textarea/div that the editor is supposed to replace.

Editor

translate()

Translates the specified string by replacing variables with language pack items it will also check if there is a key matching the input.

Editor

uploadImages()

Uploads all data uri/blob uri images in the editor contents to server.

Editor

Constructors

Editor

public constructor function Editor(id: String, options: Object, editorManager: tinymce.EditorManager)

Constructs a editor instance by id.

Parameters

  • id (String) - Unique id for the editor.

  • options (Object) - Options for the editor.

  • editorManager (EditorManager) - EditorManager instance.

Methods

addCommand()

addCommand(name: String, callback: Function, scope: Object)

Adds a custom command to the editor. This function can also be used to override existing commands. The command that you add can be executed with execCommand.

Examples

// Adds a custom command that later can be executed using execCommand
tinymce.init({
 ...

  setup: (ed) => {
    // Register example command
    ed.addCommand('mycommand', (ui, v) => {
      ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({ format: 'text' }));
    });
  }
});

Parameters

  • name (String) - Command name to add/override.

  • callback (Function) - Function to execute when the command occurs.

  • scope (Object) - Optional scope to execute the function in.

addQueryStateHandler()

addQueryStateHandler(name: String, callback: Function, scope: Object)

Adds a custom query state command to the editor. This function can also be used to override existing commands. The command that you add can be executed with queryCommandState function.

Parameters

  • name (String) - Command name to add/override.

  • callback (Function) - Function to execute when the command state retrieval occurs.

  • scope (Object) - Optional scope to execute the function in.

addQueryValueHandler()

addQueryValueHandler(name: String, callback: Function, scope: Object)

Adds a custom query value command to the editor. This function can also be used to override existing commands. The command that you add can be executed with queryCommandValue function.

Parameters

  • name (String) - Command name to add/override.

  • callback (Function) - Function to execute when the command value retrieval occurs.

  • scope (Object) - Optional scope to execute the function in.

addShortcut()

addShortcut(pattern: String, desc: String, cmdFunc: String | Function, scope: Object): Boolean

Adds a keyboard shortcut for some command or function.

Examples

editor.addShortcut('ctrl+a', 'description of the shortcut', () => {});
editor.addShortcut('ctrl+alt+a', 'description of the shortcut', () => {});
// "meta" maps to Command on Mac and Ctrl on PC
editor.addShortcut('meta+a', 'description of the shortcut', () => {});
// "access" maps to Control+Option on Mac and shift+alt on PC
editor.addShortcut('access+a', 'description of the shortcut', () => {});

editor.addShortcut('meta+access+c', 'Opens the code editor dialog.', () => {
  editor.execCommand('mceCodeEditor');
});

editor.addShortcut('meta+shift+32', 'Inserts "Hello, World!" for meta+shift+space', () => {
  editor.execCommand('mceInsertContent', false, 'Hello, World!');
});

Parameters

  • pattern (String) - Shortcut pattern. Like for example: ctrl+alt+o.

  • desc (String) - Text description for the command.

  • cmdFunc (String | Function) - Command name string or function to execute when the key is pressed.

  • scope (Object) - Optional scope to execute the function in.

Return value

  • Boolean - true/false state if the shortcut was added or not.

addVisual()

addVisual(elm: Element)

Adds visual aids for tables, anchors, etc so they can be more easily edited inside the editor.

Parameters

  • elm (Element) - Optional root element to loop though to find tables, etc that needs the visual aid.

convertURL()

convertURL(url: String, name: String, elm: String | HTMLElement): String

URL converter function this gets executed each time a user adds an img, a or any other element that has a URL in it. This will be called both by the DOM and HTML manipulation functions.

Parameters

  • url (String) - URL to convert.

  • name (String) - Attribute name src, href etc.

  • elm (String | HTMLElement) - Tag name or HTML DOM element depending on HTML or DOM insert.

Return value

  • String - Converted URL string.

destroy()

destroy(automatic: Boolean)

Destroys the editor instance by removing all events, element references or other resources that could leak memory. This method will be called automatically when the page is unloaded but you can also call it directly if you know what you are doing.

Parameters

  • automatic (Boolean) - Optional state if the destroy is an automatic destroy or user called one.

dispatch()

dispatch(name: String, args: Object?, bubble: Boolean?): Object

Dispatches the specified event by name. Consult the event reference for more details on each event.

Examples

instance.dispatch('event', {...});

Parameters

  • name (String) - Name of the event to dispatch.

  • args (Object?) - Event arguments.

  • bubble (Boolean?) - True/false if the event is to be bubbled.

Return value

  • Object - Event args instance passed in.

execCommand()

execCommand(cmd: String, ui: Boolean, value: Object | Array | String | Number | Boolean, args: Object): Boolean

Executes a registered command on the current instance. A list of available commands can be found in the tinymce command identifiers documentation.

Parameters

  • cmd (String) - Command name to execute, for example mceLink or Bold.

  • ui (Boolean) - Specifies if a UI (dialog) should be presented or not.

  • value (Object | Array | String | Number | Boolean) - Optional command value, this can be anything.

  • args (Object) - Optional arguments object.

Return value

  • Boolean - true or false if the command was supported or not.

fire()

fire(name: String, args: Object?, bubble: Boolean?): Object

Fires the specified event by name. Consult the event reference for more details on each event. Deprecated in TinyMCE 6.0 and has been marked for removal in TinyMCE 7.0. Use dispatch instead.

Examples

instance.fire('event', {...});

Parameters

  • name (String) - Name of the event to fire.

  • args (Object?) - Event arguments.

  • bubble (Boolean?) - True/false if the event is to be bubbled.

Return value

  • Object - Event args instance passed in.

focus()

focus(skipFocus: Boolean)

Focuses/activates the editor. This will set this editor as the activeEditor in the tinymce collection it will also place DOM focus inside the editor.

Parameters

  • skipFocus (Boolean) - Skip DOM focus. Just set is as the active editor.

getBody()

getBody(): Element

Returns the root element of the editable area. For a non-inline iframe-based editor, returns the iframe’s body element.

Return value

  • Element - The root element of the editable area.

getContainer()

getContainer(): Element

Returns the container element of the editor. The container element includes all the elements added to the page for the editor. Such as UI, iframe, etc.

Return value

  • Element - HTML DOM element for the editor container.

getContent()

getContent(args: Object): String

Gets the content from the editor instance, this will cleanup the content before it gets returned using the different cleanup rules options.

Examples

// Get the HTML contents of the currently active editor
console.debug(tinymce.activeEditor.getContent());

// Get the contents of the currently active editor as plain text
tinymce.activeEditor.getContent({ format: 'text' });

// Get content of a specific editor:
tinymce.get('content id').getContent()

Parameters

  • args (Object) - Optional content object, this gets passed around through the whole get process.

Return value

  • String - Cleaned content string, normally HTML contents.

getContentAreaContainer()

getContentAreaContainer(): Element

Returns the content area container element of the editor. This element holds the iframe or the editable element.

Return value

  • Element - HTML DOM element for the editor area container.

getDoc()

getDoc(): Document

Returns the iframes document object.

Return value

  • Document - Iframe DOM document object.

getElement()

getElement(): Element

Returns the target element/textarea that got replaced with a TinyMCE editor instance.

Return value

  • Element - HTML DOM element for the replaced element.

getParam()

getParam(name: String, defaultVal: String, type: String): String

Returns a configuration parameter by name. Deprecated in TinyMCE 6.0 and has been marked for removal in TinyMCE 7.0. Use the editor.options.get API instead.

Examples

// Returns a specific config value from the currently active editor
const someval = tinymce.activeEditor.getParam('myvalue');

// Returns a specific config value from a specific editor instance by id
const someval2 = tinymce.get('my_editor').getParam('myvalue');

Parameters

  • name (String) - Configuration parameter to retrieve.

  • defaultVal (String) - Optional default value to return.

  • type (String) - Optional type parameter.

Return value

  • String - Configuration parameter value or default value.

getWin()

getWin(): Window

Returns the iframes window object.

Return value

  • Window - Iframe DOM window object.

hasEditableRoot()

hasEditableRoot(): Boolean

Returns the current editable state of the editor’s root element.

Return value

  • Boolean - True if the root element is editable, false if it is not editable.

hasEventListeners()

hasEventListeners(name: String): Boolean

Returns true/false if the object has a event of the specified name.

Parameters

  • name (String) - Name of the event to check for.

Return value

  • Boolean - true/false if the event exists or not.

hasFocus()

hasFocus(): Boolean

Returns true/false if the editor has real keyboard focus.

Return value

  • Boolean - Current focus state of the editor.

hasPlugin()

hasPlugin(name: String, loaded: Boolean): Boolean

Checks that the plugin is in the editor configuration and can optionally check if the plugin has been loaded.

Examples

// Returns `true` if the Comments plugin is in the editor configuration and has loaded successfully:
tinymce.activeEditor.hasPlugin('tinycomments', true);
// Returns `true` if the Table plugin is in the editor configuration, regardless of whether or not it loads:
tinymce.activeEditor.hasPlugin('table');

Parameters

  • name (String) - The name of the plugin, as specified for the TinyMCE plugins option.

  • loaded (Boolean) - If true, will also check that the plugin has been loaded.

Return value

  • Boolean - If loaded is true, returns true if the plugin is in the configuration and has been loaded. If loaded is false, returns true if the plugin is in the configuration, regardless of plugin load status.

hide()

hide()

Hides the editor and shows any textarea/div that the editor is supposed to replace.

insertContent()

insertContent(content: String, args: Object)

Inserts content at caret position.

Parameters

  • content (String) - Content to insert.

  • args (Object) - Optional args to pass to insert call.

isDirty()

isDirty(): Boolean

Returns true/false if the editor is dirty or not. It will get dirty if the user has made modifications to the contents.

The dirty state is automatically set to true when the user modifies editor content after initialization or the last editor.save() call. This includes changes made using undo or redo.

Examples

if (tinymce.activeEditor.isDirty()) {
  alert("You must save your contents.");
}

Return value

  • Boolean - True/false if the editor is dirty or not. It will get dirty if the user has made modifications to the contents.

isHidden()

isHidden(): Boolean

Returns true/false if the editor is hidden or not.

Return value

  • Boolean - True/false if the editor is hidden or not.

load()

load(args: Object): String

Loads contents from the textarea, input or other element that got converted into an editor instance. This method will move the contents from that textarea, input or other element into the editor by using setContent so all events etc that method has will get dispatched as well.

Parameters

  • args (Object) - Optional content object, this gets passed around through the whole load process.

Return value

  • String - HTML string that got set into the editor.

nodeChanged()

nodeChanged(args: Object)

Dispatches out a onNodeChange event to all observers. This method should be called when you need to update the UI states or element path etc.

Parameters

  • args (Object) - Optional args to pass to NodeChange event handlers.

off()

off(name: String?, callback: Function?): Object

Unbinds an event listener to a specific event by name. Consult the event reference for more details on each event.

Examples

// Unbind specific callback
instance.off('event', handler);

// Unbind all listeners by name
instance.off('event');

// Unbind all events
instance.off();

Parameters

  • name (String?) - Name of the event to unbind.

  • callback (Function?) - Callback to unbind.

Return value

  • Object - Current class instance.

on()

on(name: String, callback: Function, prepend: Boolean): Object

Binds an event listener to a specific event by name. Consult the event reference for more details on each event.

Examples

instance.on('event', (e) => {
  // Callback logic
});

Parameters

  • name (String) - Event name or space separated list of events to bind.

  • callback (Function) - Callback to be executed when the event occurs.

  • prepend (Boolean) - Optional flag if the event should be prepended. Use this with care.

Return value

  • Object - Current class instance.

once()

once(name: String, callback: Function): Object

Bind the event callback and once it fires the callback is removed. Consult the event reference for more details on each event.

Parameters

  • name (String) - Name of the event to bind.

  • callback (Function) - Callback to bind only once.

Return value

  • Object - Current class instance.

queryCommandState()

queryCommandState(cmd: String): Boolean

Returns a command specific state, for example if bold is enabled or not.

Parameters

  • cmd (String) - Command to query state from.

Return value

  • Boolean - Command specific state, for example if bold is enabled or not.

queryCommandSupported()

queryCommandSupported(cmd: String): Boolean

Returns true/false if the command is supported or not.

Parameters

  • cmd (String) - Command that we check support for.

Return value

  • Boolean - true/false if the command is supported or not.

queryCommandValue()

queryCommandValue(cmd: String): String

Returns a command specific value, for example the current font size.

Parameters

  • cmd (String) - Command to query value from.

Return value

  • String - Command value, for example the current font size or an empty string ("") if the query command is not found.

remove()

remove()

Removes the editor from the dom and tinymce collection.

render()

render()

Renders the editor/adds it to the page.

resetContent()

resetContent(initialContent: String)

Resets the editors content, undo/redo history and dirty state. If initialContent isn’t specified, then the editor is reset back to the initial start content.

Parameters

  • initialContent (String) - An optional string to use as the initial content of the editor.

save()

save(args: Object): String

Saves the contents from an editor out to the textarea or div element that got converted into an editor instance. This method will move the HTML contents from the editor into that textarea or div by getContent so all events etc that method has will get dispatched as well.

Parameters

  • args (Object) - Optional content object, this gets passed around through the whole save process.

Return value

  • String - HTML string that got set into the textarea/div.

setContent()

setContent(content: String, args: Object): String

Sets the specified content to the editor instance, this will cleanup the content before it gets set using the different cleanup rules options. Note: The content return value was deprecated in TinyMCE 6.0 and has been marked for removal in TinyMCE 7.0.

Examples

// Sets the HTML contents of the activeEditor editor
tinymce.activeEditor.setContent('<span>some</span> html');

// Sets the content of a specific editor (my_editor in this example)
tinymce.get('my_editor').setContent(data);

// Sets the content of the activeEditor editor using the specified format
tinymce.activeEditor.setContent('<p>Some html</p>', { format: 'html' });

Parameters

  • content (String) - Content to set to editor, normally HTML contents but can be other formats as well.

  • args (Object) - Optional content object, this gets passed around through the whole set process.

Return value

  • String - HTML string that got set into the editor.

setDirty()

setDirty(state: Boolean)

Explicitly sets the dirty state. This will fire the dirty event if the editor dirty state is changed from false to true by invoking this method.

Examples

const ajaxSave = () => {
  const editor = tinymce.get('elm1');

  // Save contents using some XHR call
  alert(editor.getContent());

  editor.setDirty(false); // Force not dirty state
}

Parameters

  • state (Boolean) - True/false if the editor is considered dirty.

setEditableRoot()

setEditableRoot(state: Boolean)

Changes the editable state of the editor’s root element.

Parameters

  • state (Boolean) - State to set true for editable and false for non-editable.

setProgressState()

setProgressState(state: Boolean, time: Number): Boolean

Sets the progress state, this will display a throbber/progess for the editor. This is ideal for asynchronous operations like an AJAX save call.

Examples

// Show progress for the active editor
tinymce.activeEditor.setProgressState(true);

// Hide progress for the active editor
tinymce.activeEditor.setProgressState(false);

// Show progress after 3 seconds
tinymce.activeEditor.setProgressState(true, 3000);

Parameters

  • state (Boolean) - Boolean state if the progress should be shown or hidden.

  • time (Number) - Optional time to wait before the progress gets shown.

Return value

  • Boolean - Same as the input state.

show()

show()

Shows the editor and hides any textarea/div that the editor is supposed to replace.

translate()

translate(text: String): String

Translates the specified string by replacing variables with language pack items it will also check if there is a key matching the input.

Parameters

  • text (String) - String to translate by the language pack data.

Return value

  • String - Translated string.

uploadImages()

uploadImages(): Promise

Uploads all data uri/blob uri images in the editor contents to server.

Return value

  • Promise - Promise instance with images and status for each image.