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
var ed = new tinymce.Editor('textareaid', {
    some_setting: 1
}, tinymce.EditorManager);

// Select each item the user clicks on
ed.on('click', function(e) {
    ed.selection.select(e.target);
});

ed.render();

Properties

name type summary defined by
$ tinymce.dom.DomQuery Dom query instance with default scope to the editor document and default element is the body of the editor. tinymce.Editor
baseURI tinymce.util.URI URI object to current document that holds the TinyMCE editor instance. tinymce.Editor
contentCSS Array Array with CSS files to load into the iframe. tinymce.Editor
contentStyles Array Array of CSS styles to add to head of document when the editor loads. tinymce.Editor
documentBaseURI tinymce.util.URI URI object to document configured for the TinyMCE instance. tinymce.Editor
dom tinymce.dom.DOMUtils DOM instance for the editor. tinymce.Editor
formatter tinymce.Formatter Formatter instance. tinymce.Editor
id String Editor instance id, normally the same as the div/textarea that was replaced. tinymce.Editor
initialized Boolean Is set to true after the editor instance has been initialized tinymce.Editor
isNotDirty Boolean State to force the editor to return false on a isDirty call. tinymce.Editor
notificationManager tinymce.NotificationManager Notification manager reference, use this to open new windows and dialogs. tinymce.Editor
parser tinymce.html.DomParser HTML parser will be used when contents is inserted into the editor. tinymce.Editor
plugins Object Name/Value object containing plugin instances. tinymce.Editor
schema tinymce.html.Schema Schema instance, enables you to validate elements and its children. tinymce.Editor
selection tinymce.dom.Selection Selection instance for the editor. tinymce.Editor
serializer tinymce.dom.Serializer DOM serializer for the editor. Will be used when contents is extracted from the editor. tinymce.Editor
settings Object Name/value collection with editor settings. tinymce.Editor
theme tinymce.Theme Reference to the theme instance that was used to generate the UI. tinymce.Editor
undoManager tinymce.UndoManager Undo manager instance, responsible for handling undo levels. tinymce.Editor
windowManager tinymce.WindowManager Window manager reference, use this to open new windows and dialogs. tinymce.Editor

Constructors

name summary defined by
Editor() Constructs a editor instance by id. tinymce.Editor

Methods

name summary defined by
addButton() Adds a button that later gets created by the theme in the editors toolbars. tinymce.Editor
addCommand() Adds a custom command to the editor, you can also override existing commands with this method. The command that you add can be executed with execCommand. tinymce.Editor
addContextToolbar() Adds a contextual toolbar to be rendered when the selector matches. tinymce.Editor
addMenuItem() Adds a menu item to be used in the menus of the theme. There might be multiple instances of this menu item for example it might be used in the main menus of the theme but also in the context menu so make sure that it's self contained and supports multiple instances. tinymce.Editor
addQueryStateHandler() Adds a custom query state command to the editor, you can also override existing commands with this method. The command that you add can be executed with queryCommandState function. tinymce.Editor
addQueryValueHandler() Adds a custom query value command to the editor, you can also override existing commands with this method. The command that you add can be executed with queryCommandValue function. tinymce.Editor
addShortcut() Adds a keyboard shortcut for some command or function. tinymce.Editor
addSidebar() Adds a sidebar for the editor instance. tinymce.Editor
addVisual() Adds visual aid for tables, anchors etc so they can be more easily edited inside the editor. tinymce.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. tinymce.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. tinymce.Editor
execCallback() Executes a legacy callback. This method is useful to call old 2.x option callbacks. There new event model is a better way to add callback so this method might be removed in the future. tinymce.Editor
execCommand() Executes a command on the current instance. These commands can be TinyMCE internal commands prefixed with "mce" or they can be build in browser commands such as "Bold". A compleate list of browser commands is available on MSDN or Mozilla.org. This function will dispatch the execCommand function on each plugin, theme or the execcommand_callback option if none of these return true it will handle the command as a internal browser command. tinymce.Editor
fire() Fires the specified event by name. Consult the event reference for more details on each event. tinymce.util.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. tinymce.Editor
getBody() Returns the root element of the editable area. For a non-inline iframe-based editor, returns the iframe's body element. tinymce.Editor
getContainer() Returns the editors container element. The container element wrappes in all the elements added to the page for the editor. Such as UI, iframe etc. tinymce.Editor
getContent() Gets the content from the editor instance, this will cleanup the content before it gets returned using the different cleanup rules options. tinymce.Editor
getContentAreaContainer() Returns the editors content area container element. The this element is the one who holds the iframe or the editable element. tinymce.Editor
getDoc() Returns the iframes document object. tinymce.Editor
getElement() Returns the target element/textarea that got replaced with a TinyMCE editor instance. tinymce.Editor
getLang() Returns a language pack item by name/key. tinymce.Editor
getParam() Returns a configuration parameter by name. tinymce.Editor
getWin() Returns the iframes window object. tinymce.Editor
hasEventListeners() Returns true/false if the object has a event of the specified name. tinymce.util.Observable
hide() Hides the editor and shows any textarea/div that the editor is supposed to replace. tinymce.Editor
init() Initializes the editor this will be called automatically when all plugins/themes and language packs are loaded by the rendered method. This method will setup the iframe and create the theme and plugin instances. tinymce.Editor
insertContent() Inserts content at caret position. tinymce.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 if you do modifications to the content in other words when new undo levels is created or if you undo/redo to update the contents of the editor. It will also be set to false if you call editor.save(). tinymce.Editor
isHidden() Returns true/false if the editor is hidden or not. tinymce.Editor
load() Loads contents from the textarea or div element that got converted into an editor instance. This method will move the contents from that textarea or div into the editor by using setContent so all events etc that method has will get dispatched as well. tinymce.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. tinymce.Editor
off() Unbinds an event listener to a specific event by name. Consult the event reference for more details on each event. tinymce.util.Observable
on() Binds an event listener to a specific event by name. Consult the event reference for more details on each event. tinymce.util.Observable
once() Bind the event callback and once it fires the callback is removed. Consult the event reference for more details on each event. tinymce.util.Observable
queryCommandState() Returns a command specific state, for example if bold is enabled or not. tinymce.Editor
queryCommandSupported() Returns true/false if the command is supported or not. tinymce.Editor
queryCommandValue() Returns a command specific value, for example the current font size. tinymce.Editor
remove() Removes the editor from the dom and tinymce collection. tinymce.Editor
render() Renders the editor/adds it to the page. tinymce.Editor
save() Saves the contents from a 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. tinymce.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. tinymce.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. tinymce.Editor
setMode() Sets the editor mode. Mode can be for example "design", "code" or "readonly". tinymce.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. tinymce.Editor
show() Shows the editor and hides any textarea/div that the editor is supposed to replace. tinymce.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. tinymce.Editor
uploadImages() Uploads all data uri/blob uri images in the editor contents to server. tinymce.Editor

Constructors

Editor

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

Constructs a editor instance by id.

Parameters

Methods

addButton

addButton(name:String, settings:Object)

Adds a button that later gets created by the theme in the editors toolbars.

Examples
// Adds a custom button to the editor that inserts contents when clicked
tinymce.init({
   ...

   toolbar: 'example'

   setup: function(ed) {
      ed.addButton('example', {
         title: 'My title',
         image: '../js/tinymce/plugins/example/img/example.gif',
         onclick: function() {
            ed.insertContent('Hello world!!');
         }
      });
   }
});
Parameters

addCommand

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

Adds a custom command to the editor, you can also override existing commands with this method. 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: function(ed) {
      // Register example command
      ed.addCommand('mycommand', function(ui, v) {
         ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({format: 'text'}));
      });
   }
});
Parameters

addContextToolbar

addContextToolbar(predicate:function, items:String)

Adds a contextual toolbar to be rendered when the selector matches.

Parameters

addMenuItem

addMenuItem(name:String, settings:Object)

Adds a menu item to be used in the menus of the theme. There might be multiple instances of this menu item for example it might be used in the main menus of the theme but also in the context menu so make sure that it's self contained and supports multiple instances.

Examples
// Adds a custom menu item to the editor that inserts contents when clicked
// The context option allows you to add the menu item to an existing default menu
tinymce.init({
   ...

   setup: function(ed) {
      ed.addMenuItem('example', {
         text: 'My menu item',
         context: 'tools',
         onclick: function() {
            ed.insertContent('Hello world!!');
         }
      });
   }
});
Parameters

addQueryStateHandler

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

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

Parameters

addQueryValueHandler

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

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

Parameters

addShortcut

addShortcut(pattern:String, desc:String, cmdFunc:String, sc:Object):Boolean

Adds a keyboard shortcut for some command or function.

Parameters
Return value

addSidebar

addSidebar(name:String, settings:Object)

Adds a sidebar for the editor instance.

Examples
// Adds a custom sidebar that when clicked logs the panel element
tinymce.init({
   ...
   setup: function(ed) {
      ed.addSidebar('example', {
         tooltip: 'My sidebar',
         icon: 'my-side-bar',
         onshow: function(api) {
            console.log(api.element());
         }
      });
   }
});
Parameters

addVisual

addVisual(elm:Element)

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

Parameters

convertURL

convertURL(url:string, name:string, elm:string):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
Return value

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

execCallback

execCallback(name:String):Object

Executes a legacy callback. This method is useful to call old 2.x option callbacks. There new event model is a better way to add callback so this method might be removed in the future.

Parameters
Return value

execCommand

execCommand(cmd:String, ui:Boolean, value:mixed, args:Object)

Executes a command on the current instance. These commands can be TinyMCE internal commands prefixed with "mce" or they can be build in browser commands such as "Bold". A compleate list of browser commands is available on MSDN or Mozilla.org. This function will dispatch the execCommand function on each plugin, theme or the execcommand_callback option if none of these return true it will handle the command as a internal browser command.

Parameters

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.

Examples
instance.fire('event', {...});
Parameters
Return value

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

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

getContainer

getContainer():Element

Returns the editors container element. The container element wrappes in all the elements added to the page for the editor. Such as UI, iframe etc.

Return value

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 raw contents of the currently active editor
tinymce.activeEditor.getContent({format: 'raw'});

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

getContentAreaContainer

getContentAreaContainer():Element

Returns the editors content area container element. The this element is the one who holds the iframe or the editable element.

Return value

getDoc

getDoc():Document

Returns the iframes document object.

Return value

getElement

getElement():Element

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

Return value

getLang

getLang(name:String, defaultVal:String)

Returns a language pack item by name/key.

Parameters

getParam

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

Returns a configuration parameter by name.

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

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

getWin

getWin():Window

Returns the iframes window object.

Return value

hasEventListeners

hasEventListeners(name:String):Boolean

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

Parameters
Return value

hide

hide()

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

init

init()

Initializes the editor this will be called automatically when all plugins/themes and language packs are loaded by the rendered method. This method will setup the iframe and create the theme and plugin instances.

insertContent

insertContent(content:String, args:Object)

Inserts content at caret position.

Parameters

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 if you do modifications to the content in other words when new undo levels is created or if you undo/redo to update the contents of the editor. It will also be set to false if you call editor.save().

Examples
if (tinymce.activeEditor.isDirty())
    alert("You must save your contents.");
Return value

isHidden

isHidden():Boolean

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

Return value

load

load(args:Object):String

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

Parameters
Return value

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

off

off(name:String?, callback:callback?):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
Return value

on

on(name:String, callback:callback, first: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', function(e) {
    // Callback logic
});
Parameters
Return value

once

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

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

Parameters
Return value

queryCommandState

queryCommandState(cmd:string):Boolean

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

Parameters
Return value

queryCommandSupported

queryCommandSupported(cmd:String):Boolean

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

Parameters
Return value

queryCommandValue

queryCommandValue(cmd:string):Object

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

Parameters
Return value

remove

remove()

Removes the editor from the dom and tinymce collection.

render

render()

Renders the editor/adds it to the page.

save

save(args:Object):String

Saves the contents from a 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
Return value

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.

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

// Sets the raw contents of the activeEditor editor
tinymce.activeEditor.setContent('<span>some</span> html', {format: 'raw'});

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

// Sets the bbcode contents of the activeEditor editor if the bbcode plugin was added
tinymce.activeEditor.setContent('[b]some[/b] html', {format: 'bbcode'});
Parameters
Return value

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
function ajaxSave() {
    var editor = tinymce.get('elm1');

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

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

setMode

setMode(mode:String)

Sets the editor mode. Mode can be for example "design", "code" or "readonly".

Parameters

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
Return value

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
Return value

uploadImages

uploadImages(callback:function):tinymce.util.Promise

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

Parameters
Return value

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.