0 results found

Command identifiers

Contribute to this page

TinyMCE uses commands to perform RTE actions, such as making the selected text bold or italic. There are two major types of commands, "global commands" and "instance commands". Global commands are independent of any editor instance (focusing a specific editor or adding a new editor to a textarea, for example). Instance commands are for a specific editor instance (making the current selection in a specific editor bold, for example).

Invoking commands

There are a couple of methods for invoking these commands.

NameSummary
tinyMCE.execCommand(command, user_interface, value)This will execute the specified command on the currently selected editor instance if it's an instance command.
tinyMCE.execInstanceCommand(editor_id, command, user_interface, value, focus)This will execute the specified command on a specific editor instance by id.
inst.execCommand(command, user_interface, value);This will execute the specified command on a specific editor instance.

Browser commands

Here are the built-in commands for various browsers.

Global commands

These commands can only be executed by using tinyMCE.execCommand.

NameSummary
mceFocusMoves the focus and caret to the editor specified by its ID. Example: tinyMCE.execCommand('mceFocus',false,'myeditor');
mceAddControlConverts the specified textarea or div into an editor instance having the specified ID. Example: tinyMCE.execCommand('mceAddControl',false,'mydiv');
mceAddFrameControlConverts the specified textarea or div into an editor instance in a specific document having the specified ID. Example: tinyMCE.execCommand('mceAddFrameControl',false,{element_id:'someid', window:frame.window, other_init_option:'xyz'});
mceRemoveControlRemoves an editor instance having the specified ID. Example: tinyMCE.execCommand('mceRemoveControl',false,'mydiv');
mceResetDesignMode (removed in 3.3)Resets the designMode attribute for all editors. This might get lost sometimes in Gecko.
mceToggleEditorToggles the WYSIWYG mode on or off by displaying or hiding the textarea and editor instance. This is not the same thing as mceAddControl or mceRemoveControl because the instance is still there and uninitialized, so this method is faster.

Instance commands

These commands are instance specific so they can only be executed on a specific editor.

NameSummary
mceAddUndoLevelAdds a new undo level of the current editor HTML contents, unless processing is currently inside of a section marked by mceBeginUndoLevel and mceEndUndoLevel.
mceBeginUndoLevel (removed in 3.3)Marks the beginning of a section of code that may initiate multiple changes that should all be considered as a single "undo" level. Use this in conjunction with mceEndUndoLevel at the end of the section of code. Any calls to mceAddUndoLevel, either directly invoked from this section of code or indirectly invoked by any other method, will be ignored.
mceCodeEditorOpens the code editor dialogue where the document's underlying HTML code can be edited directly. The availability of the editor button which invokes this dialogue depends on your editor's configuration.
mceEndUndoLevelMarks the end of a section of code that may initiate multiple changes that should all be considered as a single "undo" level. Calls mceAddUndoLevel.
mceCleanupPeforms a clean up of the current editor HTML.
mceImageInserts an element or updates an existing one - works with current selection.
mceInsertContentInserts HTML contents at the current selection or caret position.
mceInsertLinkInserts an anchor or updates an existing one - works with current selection or a link at the caret's position (like what tinyMCE.themes["advanced"]._insertLink(URL, target); used to do in 2.x).
mceInsertRawHTMLInserts raw HTML code at the current selection or caret position.
mceRemoveNodeRemoves a specific node or element.
mceRepaintRepaints the editor. Sometimes the browser has graphic glitches.
mceReplaceContentReplaces the selected contents with the given value contents.
mceResizeresizes the editor container in the advanced theme (requires theme_advanced_resizing set to true as by default)
mceSetAttributeSets an attribute on the selected element.
mceSetCSSClass (removed in 3.3)Sets a CSS class of the selected element or selection.
mceSelectNodeSelects a specific node or element.
mceSelectNodeDepthSelects an ancestor node or element by index.
mceSetContentSets the whole HTML contents to the given value.
mceSetStyleInfo (removed in 3.3)Sets style information on a specific element.
mceStartTypingUser starts typing text.
mceEndTypingUser stops typing text.
mceToggleVisualAidTurns on or off visual aids like table borders.

Examples

Here are some example command executions.

<a href="#" onclick="tinyMCE.execCommand('Bold');return false;">[Bold]</a>
<a href="#" onclick="tinyMCE.execCommand('Italic');return false;">[Italic]</a>
<a href="#" onclick="tinyMCE.execCommand('mceInsertContent',false,'<b>Hello world!!</b>');return false;">[Insert some HTML]</a>
<a href="#" onclick="tinyMCE.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');return false;">[Replace selection]</a>

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.