Commands Available for TinyMCE
Executable commands
The following tables show the existing editor commands. These commands are provided by tinymce
and not by the browser’s internal commands. These commands can be executed using the execCommand function.
Listing core and plugin editor commands
To retrieve a list of available commands from the active editor, run the following command from the browser console:
tinymce.activeEditor.editorCommands.commands.exec;
Core Editor commands
Supported browser-native commands
The commands in the following table are provided by the TinyMCE editor and provide the same or similar functionality to the native browser commands.
Command | Description |
---|---|
Bold |
Toggles bold formatting to selection. |
Italic |
Toggles italic formatting to selection. |
Underline |
Toggles underline formatting to selection. |
Strikethrough |
Toggles strikethrough formatting to selection. |
Superscript |
Toggles superscript formatting to selection. |
Subscript |
Toggles subscript formatting to selection. |
Cut |
Cuts the selected contents and puts in into users clipboard. |
Copy |
Copies the selected contents and puts in into users clipboard. |
Paste |
Pastes the current clipboard contents into the editor. |
ForeColor |
Changes the text color of the text. The value passed in should be the color. |
BackColor |
Changes the background color of the text. The value passed in should be the color. |
JustifyLeft |
Left aligns the current text block/image. |
JustifyCenter |
Center aligns the current text block/image. |
JustifyRight |
Right aligns the current text block/image. |
JustifyFull |
Full aligns the current text block/image. |
FontName |
Font name to apply to the text. The value passed in should be the font family name. |
FontSize |
Font size of the text. The value passed in should be a valid CSS font size. |
FormatBlock |
Toggles the format of the current selection. The value passed in should be the format name. If no format is specified, the paragraph ( |
RemoveFormat |
Removes any formats from the current selection. |
Indent |
Indents the current selection. |
Outdent |
Outdents the current selection. |
CreateLink |
Inserts a link at the current selection. The value is the URL to add to the link(s). |
Unlink |
Removes any links from the current selection. |
InsertHorizontalRule |
Inserts a horizontal rule at the cursor location or inplace of the current selection. |
InsertParagraph |
Inserts a new paragraph or new line at the current cursor or selection. |
InsertText |
Inserts the passed value as plain text at the current cursor or selection. |
InsertHTML |
Inserts the passed value as HTML at the current cursor or selection. |
InsertImage |
Adds an image |
SelectAll |
Selects all content in the editor. |
Delete |
Deletes the current selection from the editor. |
ForwardDelete |
Deletes the current selection or the character to the right of the cursor for a collapsed selection. |
Redo |
Redoes the last change to the editor. |
Undo |
Undoes the last change to the editor. |
tinymce.activeEditor.execCommand('Bold');
tinymce.activeEditor.execCommand('Italic');
tinymce.activeEditor.execCommand('Underline');
tinymce.activeEditor.execCommand('Strikethrough');
tinymce.activeEditor.execCommand('Superscript');
tinymce.activeEditor.execCommand('Subscript');
tinymce.activeEditor.execCommand('Cut');
tinymce.activeEditor.execCommand('Copy');
tinymce.activeEditor.execCommand('Paste');
tinymce.activeEditor.execCommand('JustifyLeft');
tinymce.activeEditor.execCommand('JustifyCenter');
tinymce.activeEditor.execCommand('JustifyRight');
tinymce.activeEditor.execCommand('JustifyFull');
tinymce.activeEditor.execCommand('ForeColor', false, '#FF0000');
tinymce.activeEditor.execCommand('BackColor', false, '#FF0000');
tinymce.activeEditor.execCommand('FontName', false, 'courier new');
tinymce.activeEditor.execCommand('FontSize', false, '30px');
tinymce.activeEditor.execCommand('FormatBlock', false, 'bold');
tinymce.activeEditor.execCommand('RemoveFormat');
tinymce.activeEditor.execCommand('Indent');
tinymce.activeEditor.execCommand('Outdent');
tinymce.activeEditor.execCommand('CreateLink', false, 'https://www.tiny.cloud');
tinymce.activeEditor.execCommand('Unlink');
tinymce.activeEditor.execCommand('InsertHorizontalRule');
tinymce.activeEditor.execCommand('InsertParagraph');
tinymce.activeEditor.execCommand('InsertText', false, 'My text content');
tinymce.activeEditor.execCommand('InsertHTML', false, 'My HTML content');
tinymce.activeEditor.execCommand('InsertImage', false, 'https://www.example.com/image.png');
tinymce.activeEditor.execCommand('SelectAll');
tinymce.activeEditor.execCommand('Delete');
tinymce.activeEditor.execCommand('ForwardDelete');
tinymce.activeEditor.execCommand('Redo');
tinymce.activeEditor.execCommand('Undo');
Miscellaneous Core Commands
The commands in the following table are provided by the TinyMCE editor and provide additional functionality that does not require any plugins to be enabled.
Command | Description |
---|---|
HiliteColor |
Changes the background color of the text. The value passed in should be the color. NOTE: This is an alias for the |
InsertLineBreak |
Adds a line break |
InsertNewBlockAfter |
inserts an empty block at the root level of the current TinyMCE document immediately after the block containing the current selection. |
InsertNewBlockBefore |
inserts an empty block at the root level of the current TinyMCE document immediately before the block containing the current selection. |
JustifyNone |
Removes any alignment to the selected text. |
Lang |
Sets the language of the current selection. The value passed in should be a language spec described in Content appearance options - |
LineHeight |
Sets the line height of the text. The value passed in should be a valid CSS line height. |
mceAddUndoLevel |
Adds an undo level. |
mceApplyTextcolor |
Applies text color or background color to the current selection. Requires an argument of either |
mceAutocompleterClose |
Closes any active autocompleter menu. |
mceAutocompleterReload |
Reloads the autocompleter menu with new items. For the data to provide, see the Autocompleter reload API. |
mceBlockQuote |
Wraps the selected text blocks into a block quote. |
mceCleanup |
Copies the current editor content and sets the content using the copy. |
mceEndUndoLevel |
Adds an undo level. |
mceFocus |
Focuses and activates the editor. Places DOM focus inside the editor and also sets the editor as the active editor instance on the page. |
mceInsertClipboardContent |
Triggers a paste event at the cursor location or over the current selection. The command requires an object with: |
mceInsertContent |
Inserts contents at the current selection. The value passed in should be the contents to be inserted. |
mceInsertLink |
Inserts a link at the current selection. The value is the URL to add to the link(s). NOTE: This is an alias for the |
mceInsertNewLine |
Adds a new line at the current cursor or selection, such as splitting the current paragraph element. The behavior of this setting can be controlled with the newline_behavior option. |
mceNewDocument |
Removes all contents of the editor. |
mcePrint |
Opens the browser’s print dialog for the current page. |
mceRemoveNode |
Removes the current node or the target node passed as the value ( |
mceRemoveTextcolor |
Removes the text color or background color from the current selection. Requires an argument of either |
mceReplaceContent |
Replaces the current selection. The value passed in should be the new content. |
mceSelectNode |
Selects a node in the editor. The target node is passed as the value ( |
mceSelectNodeDepth |
Selects the parent DOM node 'n' levels above the current node. |
mceSetContent |
Sets the contents of the editor. The value is the contents to set as the editor contents. |
mceToggleFormat |
Toggles a specified format by name. The value is the name of the format to toggle. For a list of options, see: Content formatting options - Built-in formats. |
mceTogglePlainTextPaste |
Toggles paste as plain text. |
mceToggleVisualAid |
Toggles the visual aids for: tables without borders and anchors. |
ToggleSidebar |
Closes the current sidebar, or toggles the sidebar if the sidebar name is provided as a value ( |
ToggleToolbarDrawer |
Toggles the Toolbar Drawer. For information on toolbars, see: User interface options - Toolbar. |
tinymce.activeEditor.execCommand('HiliteColor', false, '#FF0000');
tinymce.activeEditor.execCommand('InsertLineBreak');
tinymce.activeEditor.execCommand('InsertNewBlockAfter')
tinymce.activeEditor.execCommand('InsertNewBlockBefore')
tinymce.activeEditor.execCommand('JustifyNone');
tinymce.activeEditor.execCommand('Lang', false, { code: 'en_US' }); /* OR */
tinymce.activeEditor.execCommand('Lang', false, { code: 'en_US', customCode: 'en-us-medical' });
tinymce.activeEditor.execCommand('LineHeight', false, '1.4');
tinymce.activeEditor.execCommand('mceAddUndoLevel');
tinymce.activeEditor.execCommand('mceApplyTextcolor', 'hilitecolor', '#FF0000');
tinymce.activeEditor.execCommand('mceAutocompleterClose');
tinymce.activeEditor.execCommand('mceAutocompleterReload', false, {
fetchOptions: {}
});
tinymce.activeEditor.execCommand('mceBlockQuote');
tinymce.activeEditor.execCommand('mceCleanup');
tinymce.activeEditor.execCommand('mceEndUndoLevel');
tinymce.activeEditor.execCommand('mceFocus');
tinymce.activeEditor.execCommand('mceInsertClipboardContent', false, {
html: '<p>Hello, World!</p>'
});
tinymce.activeEditor.execCommand('mceInsertContent', false, 'My new content');
tinymce.activeEditor.execCommand('mceInsertLink', false, 'https://www.tiny.cloud');
tinymce.activeEditor.execCommand('mceInsertNewLine');
tinymce.activeEditor.execCommand('mceNewDocument');
tinymce.activeEditor.execCommand('mcePrint');
tinymce.activeEditor.execCommand('mceRemoveNode'); /* OR */
tinymce.activeEditor.execCommand('mceRemoveNode', false, '<DOM_node>');
tinymce.activeEditor.execCommand('mceSelectNode', false, '<DOM_node>');
tinymce.activeEditor.execCommand('mceSelectNodeDepth', false, 2); // For two nodes up.
tinymce.activeEditor.execCommand('mceSetContent', false, 'My content');
tinymce.activeEditor.execCommand('mceRemoveTextcolor', 'hilitecolor');
tinymce.activeEditor.execCommand('mceReplaceContent', false, 'My replacement content');
tinymce.activeEditor.execCommand('mceToggleFormat', false, 'bold');
tinymce.activeEditor.execCommand('mceTogglePlainTextPaste');
tinymce.activeEditor.execCommand('mceToggleVisualAid');
tinymce.activeEditor.execCommand('ToggleSidebar'); /* OR */
tinymce.activeEditor.execCommand('ToggleSidebar', false, '<sidebar-name>');
tinymce.activeEditor.execCommand('ToggleToolbarDrawer');
Core Table Commands
The following commands provide functionality for interacting with tables within the editor. These commands do not need the table
plugin to work.
Table row and table column cut, copy, and paste commands work with TinyMCE’s internal table clipboard, not the user’s system clipboard. |
Command | Description |
---|---|
mceTableSizingMode |
When |
mceTableApplyCellStyle |
Applies the specified styles to the selected cells. The following styles can be changed with this command: |
mceTableSplitCells |
Splits the current merged table cell. |
mceTableMergeCells |
Merges the selected cells. |
mceTableInsertRowBefore |
Inserts a row before the current row. |
mceTableInsertRowAfter |
Inserts a row after the current row. |
mceTableInsertColBefore |
Inserts a column before the current column. |
mceTableInsertColAfter |
Inserts a column after the current column. |
mceTableDeleteCol |
Deletes the current column. |
mceTableDeleteRow |
Deletes the current row. |
mceTableCutRow |
Cuts the current row to the TinyMCE clipboard. |
mceTableCutCol |
Cuts the current column to the TinyMCE clipboard. |
mceTableCopyRow |
Copies the current row to the TinyMCE clipboard. |
mceTableCopyCol |
Copies the current column to the TinyMCE clipboard. |
mceTablePasteRowBefore |
Paste the TinyMCE clipboard row before the current row. |
mceTablePasteRowAfter |
Paste the TinyMCE clipboard row after the current row. |
mceTablePasteColBefore |
Paste the TinyMCE clipboard column before the current row. |
mceTablePasteColAfter |
Paste the TinyMCE clipboard column after the current row. |
mceTableDelete |
Deletes the current table. |
mceTableCellToggleClass |
Adds a class to all selected cells that do not have it, or removes the class if all of them have it. |
mceTableToggleClass |
Adds a class to the selected table, or removes the class if it already exists. |
mceTableToggleCaption |
Adds a caption to the selected table, or removes the caption if it already exists. |
mceInsertTable |
Inserts a table with the specified number of row and columns. |
mceTableRowType |
Changes the current row or rows to the specified type, either: |
mceTableColType |
Changes all cells in the current column or columns to the specified type, either: |
mceTableCellType |
Changes the current cell or cells to the specified type, either: |
tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'fixed');
tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'relative');
tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'responsive');
tinymce.activeEditor.execCommand('mceTableApplyCellStyle', false, { 'background-color': 'red', 'border-color': 'blue' });
tinymce.activeEditor.execCommand('mceTableApplyCellStyle', false, { 'background-color': '' }); // removes the current background-color
tinymce.activeEditor.execCommand('mceTableSplitCells');
tinymce.activeEditor.execCommand('mceTableMergeCells');
tinymce.activeEditor.execCommand('mceTableInsertRowBefore');
tinymce.activeEditor.execCommand('mceTableInsertRowAfter');
tinymce.activeEditor.execCommand('mceTableInsertColBefore');
tinymce.activeEditor.execCommand('mceTableInsertColAfter');
tinymce.activeEditor.execCommand('mceTableDeleteCol');
tinymce.activeEditor.execCommand('mceTableDeleteRow');
tinymce.activeEditor.execCommand('mceTableCutRow');
tinymce.activeEditor.execCommand('mceTableCutCol');
tinymce.activeEditor.execCommand('mceTableCopyRow');
tinymce.activeEditor.execCommand('mceTableCopyCol');
tinymce.activeEditor.execCommand('mceTablePasteRowBefore');
tinymce.activeEditor.execCommand('mceTablePasteRowAfter');
tinymce.activeEditor.execCommand('mceTablePasteColBefore');
tinymce.activeEditor.execCommand('mceTablePasteColAfter');
tinymce.activeEditor.execCommand('mceTableDelete');
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 2, columns: 2 });
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 3, columns: 2, options: { headerRows: 1 } });
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 3, columns: 2, options: { headerRows: 1, headerColumns: 1 } });
tinymce.activeEditor.execCommand('mceTableToggleClass', false, 'myclass');
tinymce.activeEditor.execCommand('mceTableCellToggleClass', false, 'mycellclass');
tinymce.activeEditor.execCommand('mceTableToggleCaption');
tinymce.activeEditor.execCommand('mceTableRowType', false, { type: 'header' });
tinymce.activeEditor.execCommand('mceTableColType', false, { type: 'th' });
tinymce.activeEditor.execCommand('mceTableCellType', false, { type: 'th' });
Plugin Commands
Commands are available for the following plugins:
Advanced Lists
The following commands require the Advanced Lists (advlist
) plugin.
Command | Description |
---|---|
ApplyOrderedListStyle |
Converts the current selection to an ordered list. Accepts an object specifing the list type. |
ApplyUnorderedListStyle |
Converts the current selection to an unordered list. Accepts an object specifing the list type. |
For information on available list types, see: MDN web docs - list-style-type.
tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, {
'list-style-type': 'decimal'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
'list-style-type': 'disc'
});
[[Enhanced Tables]] ==== Enhanced Tables
The following commands require the Enhanced Tables (advtable
) plugin.
Command | Description |
---|---|
mceAdvancedTableSort |
Opens the Enhanced Table Sort Dialog for the current selection or cursor location. |
mceSortTableAdvanced |
Performs an Enhanced Table Sort. For details, see Using |
mceSortTableByColumnAsc |
Sorts the current table ascending by column based on the current cursor position or selection. |
mceSortTableByColumnDesc |
Sorts the current table descending by column based on the current cursor position or selection. |
mceSortTableByRowAsc |
Sorts the current table ascending by row based on the current cursor position or selection. |
mceSortTableByRowDesc |
Sorts the current table descending by row based on the current cursor position or selection. |
mceTableToggleSeries |
Toggles a series column on the selected table. For details, see Using |
tinymce.activeEditor.execCommand('mceAdvancedTableSort');
tinymce.activeEditor.execCommand('mceSortTableAdvanced', false, { sortby: 'row', roworcol: '2', sort: 'table', order: 'ascending' });
tinymce.activeEditor.execCommand('mceSortTableByColumnAsc');
tinymce.activeEditor.execCommand('mceSortTableByColumnDesc');
tinymce.activeEditor.execCommand('mceSortTableByRowAsc');
tinymce.activeEditor.execCommand('mceSortTableByRowDesc');
tinymce.activeEditor.execCommand('mceTableToggleSeries', false, { name: 'numeric' });
Using mceSortTableAdvanced
mceSortTableAdvanced
accepts an object with the following key-value pairs:
Name | Value | Requirement | Description |
---|---|---|---|
sortby |
|
Required |
|
roworcol |
|
Required |
A zero-indexed integer in a string representing the row from the top of the table or column from the left of the table. |
sort |
|
Required |
|
order |
|
Required |
Using mceTableToggleSeries
mceTableToggleSeries
accepts an object with the following key-value pairs:
Name | Value | Requirement | Description |
---|---|---|---|
name |
|
Required |
Specifies the series to toggle. Series and their associated names are configured using the |
If the table already has a series column that uses the series specified in name
, the series column will be removed from the table. Otherwise, a new series column will be created, replacing any other series column that may already be in the table.
Anchor
The following command requires the Anchor (anchor
) plugin.
Command | Description |
---|---|
mceAnchor |
Opens the insert/edit anchor dialog. |
tinymce.activeEditor.execCommand('mceAnchor');
Autoresize
The following command requires the Autoresize (autoresize
) plugin.
Command | Description |
---|---|
mceAutoResize |
Auto resizes the editor to the contents. |
tinymce.activeEditor.execCommand('mceAutoResize');
Case Change
The following commands require the Case Change (casechange
) plugin.
Command | Description |
---|---|
mceLowerCase |
Converts selected text to lower-case. |
mceTitleCase |
Converts selected text to title-case. |
mceUpperCase |
Converts selected text to upper-case. |
tinymce.activeEditor.execCommand('mceLowerCase');
tinymce.activeEditor.execCommand('mceTitleCase');
tinymce.activeEditor.execCommand('mceUpperCase');
Character Map
The following command requires the Character Map (charmap
) plugin.
Command | Description |
---|---|
mceShowCharmap |
Opens the character map dialog. |
tinymce.activeEditor.execCommand('mceShowCharmap');
Code
The following command requires the Code (code
) plugin.
Command | Description |
---|---|
mceCodeEditor |
Opens the code editor dialog. |
tinymce.activeEditor.execCommand('mceCodeEditor');
Code Sample
The following command requires the Code Sample (codesample
) plugin.
Command | Description |
---|---|
CodeSample |
Opens the Code Sample dialog at the cursor position or converts the current selection to a |
tinymce.activeEditor.execCommand('CodeSample');
Comments
The following commands require the Comments (tinycomments
) plugin.
Command | Description |
---|---|
tc-delete-conversation-at-cursor |
Attempts to delete the comment at the current cursor position. A confirmation dialog will be shown prior to deletion. |
tc-try-delete-all-conversations |
Attempts to delete all comments in the editor. A confirmation dialog will be shown prior to deletion. |
tinymce.activeEditor.execCommand('tc-delete-conversation-at-cursor');
tinymce.activeEditor.execCommand('tc-try-delete-all-conversations');
Directionality
The following commands require the Directionality (directionality
) plugin.
Command | Description |
---|---|
mceDirectionLTR |
Changes the directionality to LTR. |
mceDirectionRTL |
Changes the directionality to RTL. |
tinymce.activeEditor.execCommand('mceDirectionLTR');
tinymce.activeEditor.execCommand('mceDirectionRTL');
Enhanced Code Editor
The following command requires the Enhanced Code Editor (advcode
) plugin.
Command | Description |
---|---|
mceCodeEditor |
Opens the code editor dialog. |
tinymce.activeEditor.execCommand('mceCodeEditor');
Emoticons
The following commands require the Emoticons (emoticons
) plugin.
Command | Description |
---|---|
mceEmoticons |
Opens the Emojis dialog. |
tinymce.activeEditor.execCommand('mceEmoticons');
Export to PDF
The following commands require the Export to PDF (exportpdf
) plugin.
Command | Description |
---|---|
ExportPDF |
Generates a PDF file directly from the editor with the filename |
tinymce.activeEditor.execCommand('ExportPDF');
Export to Word
The following commands require the Export to Word (exportword
) plugin.
Command | Description |
---|---|
ExportWord |
Uses |
tinymce.activeEditor.execCommand('ExportWord');
Footnotes
The following commands require the Footnotes (footnotes
) plugin.
Command | Description |
---|---|
mceInsertFootnote |
Inserts a superscripted footnote number into the editor at the selection, and creates a new entry in the footnotes section linked to that footnote. |
mceUpdateFootnotes |
Manually updates the state of all footnotes in a TinyMCE document. |
tinymce.activeEditor.execCommand('mceInsertFootnote');
tinymce.activeEditor.execCommand('mceUpdateFootnotes');
Format Painter
The following commands require the Format Painter (formatpainter
) plugin.
Command | Description |
---|---|
mceRetrieveFormats |
Retrieves the formats from the current selection. |
mcePaintFormats |
Applies the formats retrieved using |
mceToggleFormatPainter |
Toggles the Format Painter. |
tinymce.activeEditor.execCommand('mceRetrieveFormats');
tinymce.activeEditor.execCommand('mcePaintFormats');
tinymce.activeEditor.execCommand('mceToggleFormatPainter');
Full Screen
The following command requires the Full Screen (fullscreen
) plugin.
Command | Description |
---|---|
mceFullScreen |
Toggles full screen mode. |
tinymce.activeEditor.execCommand('mceFullScreen');
Help
The following command requires the Help (help
) plugin.
Command | Description |
---|---|
mceHelp |
Opens the editor Help dialog. |
tinymce.activeEditor.execCommand('mceHelp');
Image
The following command requires the Image (image
) plugin.
Command | Description |
---|---|
mceImage |
Opens the insert/edit image dialog. |
tinymce.activeEditor.execCommand('mceImage');
Import from Word
The following command requires the Import from Word (importword
) plugin.
Command | Description |
---|---|
ImportWord |
Opens a file picker, that allows content from either a |
document.querySelector('button').addEventListener('click',
() => tinymce.activeEditor.execCommand('ImportWord')
);
The ImportWord command cannot be directly invoked through a script at the top level or from the browser console. Instead, it necessitates a specific user action within the user interface, such as clicking a toolbar button. To ensure correct execution, the command should be called within the scope of an event handler tied to a specific user interaction, as shown in the example.
|
Image Editing
The following commands require the Image Editing (editimage
) plugin.
Command | Description |
---|---|
mceEditImage |
Opens the Image editing dialog. |
mceImageRotateRight |
Rotates the selected image 90 degrees clockwise. |
mceImageRotateLeft |
Rotates the selected image 90 degrees counterclockwise. |
mceImageFlipVertical |
Flips the selected image vertically. |
mceImageFlipHorizontal |
Flips the selected image horizontally. |
tinymce.activeEditor.execCommand('mceEditImage');
tinymce.activeEditor.execCommand('mceImageRotateRight');
tinymce.activeEditor.execCommand('mceImageRotateLeft');
tinymce.activeEditor.execCommand('mceImageFlipVertical');
tinymce.activeEditor.execCommand('mceImageFlipHorizontal');
Insert Date/Time
The following commands require the Insert Date/Time (insertdatetime
) plugin.
Command | Description |
---|---|
mceInsertDate |
Inserts the current date as a human readable string. |
mceInsertTime |
Inserts the current time as a human readable string. |
tinymce.activeEditor.execCommand('mceInsertDate');
tinymce.activeEditor.execCommand('mceInsertTime');
Link
The following command requires the Link (link
) plugin.
Command | Description |
---|---|
mceLink |
Opens the Link or Quicklink Dialog at the current cursor position or for the current selection. |
tinymce.activeEditor.execCommand('mceLink');
Lists
The following commands require the Lists (lists
) plugin.
Command | Description |
---|---|
InsertDefinitionList |
Inserts a definition list into the editor. |
InsertOrderedList |
Inserts an ordered list into the editor. |
InsertUnorderedList |
Inserts an unordered list into the editor. |
mceListUpdate |
Updates list attributes or styles. |
mceListProps |
Opens the list properties dialog. |
RemoveList |
Removes the list elements from the selection. |
tinymce.activeEditor.execCommand('InsertDefinitionList', false, {
'list-item-attributes': {class: 'mylistitemclass'},
'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertOrderedList', false, {
'list-style-type': 'decimal',
'list-item-attributes': {class: 'mylistitemclass'},
'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('InsertUnorderedList', false, {
'list-style-type': 'disc',
'list-item-attributes': {class: 'mylistitemclass'},
'list-attributes': {id: 'mylist'}
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
styles: { 'background-color': 'powderblue' }
});
tinymce.activeEditor.execCommand('mceListUpdate', false, {
attrs: { contenteditable: 'false' }
});
tinymce.activeEditor.execCommand('mceListProps');
tinymce.activeEditor.execCommand('RemoveList');
List Styles
The following commands require the List Styles (advlist
) plugin.
Command | Description |
---|---|
ApplyOrderedListStyle |
Converts the current selection to an ordered list. Accepts an object specifing the list type. |
ApplyUnorderedListStyle |
Converts the current selection to an unordered list. Accepts an object specifing the list type. |
For information on available list types, see: MDN web docs - list-style-type.
tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, {
'list-style-type': 'decimal'
});
tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, {
'list-style-type': 'disc'
});
Math
The following commands require the Math (math
) plugin.
Command | Description |
---|---|
Math |
This command opens the Math dialog. |
tinymce.activeEditor.execCommand('Math');
Media
The following command requires the Media (media
) plugin.
Command | Description |
---|---|
mceMedia |
Opens the insert/edit media dialog. |
tinymce.activeEditor.execCommand('mceMedia');
Nonbreaking Space
The following command requires the Nonbreaking Space (nonbreaking
) plugin.
Command | Description |
---|---|
mceNonBreaking |
Inserts a non breaking space at the cursor location or overwrites the current selection. |
tinymce.activeEditor.execCommand('mceNonBreaking');
Page Break
The following command requires the Page Break (pagebreak
) plugin.
Command | Description |
---|---|
mcePageBreak |
Inserts a virtual page break ( |
tinymce.activeEditor.execCommand('mcePageBreak');
Permanent Pen
The following commands require the Permanent Pen (permanentpen
) plugin.
Command | Description |
---|---|
mceConfigurePermanentPen |
Opens the Permanent Pen dialog. |
mceTogglePermanentPen |
Toggles Permanent Pen. |
tinymce.activeEditor.execCommand('mceConfigurePermanentPen');
tinymce.activeEditor.execCommand('mceTogglePermanentPen');
PowerPaste
The following command requires the PowerPaste (powerpaste
) plugin.
Command | Description |
---|---|
mceInsertClipboardContent |
Triggers a paste event at the cursor location or over the current selection. HTML content will be automatically detected as Word, Google Docs, or standard HTML content and use the relevant paste path. The command requires an object with: |
mceTogglePlainTextPaste |
Toggles paste as plain text. |
tinymce.activeEditor.execCommand('mceInsertClipboardContent', false, {
html: '<p>Hello, World!</p>'
});
tinymce.activeEditor.execCommand('mceTogglePlainTextPaste');
Preview
The following command requires the Preview (preview
) plugin.
Command | Description |
---|---|
mcePreview |
Displays a preview of the editor contents. |
tinymce.activeEditor.execCommand('mcePreview');
Revision History
The following commands require the Revision History (revisionhistory
) plugin.
Command | Description |
---|---|
revisionHistory |
Toggle the Revision History view |
tinymce.activeEditor.execCommand('revisionHistory');
Save
The following commands require the Save (save
) plugin.
Command | Description |
---|---|
mceCancel |
Resets the editor content to the last save point created with |
mceSave |
Saves the current editor contents. |
tinymce.activeEditor.execCommand('mceCancel');
tinymce.activeEditor.execCommand('mceSave');
Search and Replace
The following command requires the Search and Replace (searchreplace
) plugin.
Command | Description |
---|---|
SearchReplace |
Opens the search and replace dialog. |
tinymce.activeEditor.execCommand('SearchReplace');
Spell Checker
The following commands require the Spell Checker (tinymcespellchecker
) plugin.
Command | Description |
---|---|
mceSpellcheckEnable |
Turns spellchecking on. |
mceSpellcheckDisable |
Turns spellchecking off. |
mceSpellcheckDialog |
Opens the spellchecking dialog. |
mceSpellcheckDialogClose |
Closes the spellchecking dialog. |
NOTE: This feature is only available for TinyMCE 6.5 and later. |
|
mceSpellcheckUpdate |
Checks the editor content for new misspellings, highlights them, and offers spelling suggestions. |
tinymce.activeEditor.execCommand('mceSpellcheckEnable');
tinymce.activeEditor.execCommand('mceSpellcheckDisable');
tinymce.activeEditor.execCommand('mceSpellcheckDialog');
tinymce.activeEditor.execCommand('mceSpellcheckDialogClose');
tinymce.activeEditor.execCommand('mceSpellcheckUpdate');
Table
For additional commands that are provided by the core table functionality, see Core Table Commands.
The following commands require the Table (table
) plugin.
Command | Description |
---|---|
mceInsertTableDialog |
Opens the insert/edit table dialog. |
mceTableProps |
Opens the Table Properties dialog. |
mceTableRowProps |
Opens the table row properties dialog. |
mceTableCellProps |
Opens the table cell properties dialog. |
tinymce.activeEditor.execCommand('mceInsertTableDialog');
tinymce.activeEditor.execCommand('mceTableProps');
tinymce.activeEditor.execCommand('mceTableRowProps');
tinymce.activeEditor.execCommand('mceTableCellProps');
Table of Contents
The following commands require the Table of Contents (tableofcontents
) plugin.
Command | Description |
---|---|
mceInsertToc |
Inserts a Table of Contents into the editor. |
mceUpdateToc |
Updates an existing Table of Contents. |
tinymce.activeEditor.execCommand('mceInsertToc');
tinymce.activeEditor.execCommand('mceUpdateToc');
Templates
The following commands require the Templates (advtemplate
) plugin.
Command | Description |
---|---|
AdvTemplateAddDialog |
Opens the |
AdvTemplateInsertDialog |
Opens the |
AdvTemplateInsertTemplateById |
Adds a new template specified by the value of its ID. |
tinymce.activeEditor.execCommand('AdvTemplateAddDialog');
tinymce.activeEditor.execCommand('AdvTemplateInsertDialog');
// Adds a new template, which ID is 122, to the document.
tinymce.activeEditor.execCommand('AdvTemplateInsertTemplateById', false, '122')
Visual Blocks
The following command requires the Visual Blocks (visualblocks
) plugin.
Command | Description |
---|---|
mceVisualBlocks |
Toggles visual blocks on/off. |
tinymce.activeEditor.execCommand('mceVisualBlocks');
Visual Characters
The following command requires the Visual Characters (visualchars
) plugin.
Command | Description |
---|---|
mceVisualChars |
Toggles visual characters on/off. |
tinymce.activeEditor.execCommand('mceVisualChars');
Word Count
The following command requires the Word Count (wordcount
) plugin.
Command | Description |
---|---|
mceWordCount |
Opens the Word Count summary dialog. |
tinymce.activeEditor.execCommand('mceWordCount');
Editor Management Commands
The following commands are used to manage editor instances.
For example:
tinymce.execCommand('mceAddEditor', false, { id: '<editor_id>', options: {} });
tinymce.execCommand('mceRemoveEditor', false, '<editor_id>');
tinymce.execCommand('mceToggleEditor', false, { id: '<editor_id>' });
tinymce.execCommand('mceToggleEditor', false, { index: '<editor_index>' });
Command | Description |
---|---|
mceAddEditor |
Converts an HTML or DOM element with the specified ID into an editor instance that uses the specified editor configuration options. For information on configuring the editor, see: Basic Setup. |
mceRemoveEditor |
Removes an editor instance with the specified ID. |
mceToggleEditor |
Runs |
Query command states
TinyMCE provides the queryCommandState
API to allow developers to determine the current state of selected content. The query will return true
if the content is formatted using the same CSS styles and elements used by the corresponding command.
Listing core and plugin query command states
To retrieve a list of avaliable queryable states from the active editor, run the following command from the browser console:
tinymce.activeEditor.editorCommands.commands.state;
Available query command states
The following command states can be queried using the queryCommandState API.
Command | Description |
---|---|
Bold |
Returns |
InsertDefinitionList |
Returns |
InsertOrderedList |
Returns |
InsertUnorderedList |
Returns |
Italic |
Returns |
JustifyCenter |
Returns |
JustifyFull |
Returns |
JustifyLeft |
Returns |
JustifyRight |
Returns |
mceBlockQuote |
Returns |
mceTogglePlainTextPaste |
Returns |
Outdent |
Returns |
Strikethrough |
Returns |
Subscript |
Returns |
Superscript |
Returns |
ToggleToolbarDrawer |
Returns |
Underline |
Returns |
tinymce.activeEditor.queryCommandState('Bold');
tinymce.activeEditor.queryCommandState('InsertDefinitionList');
tinymce.activeEditor.queryCommandState('InsertOrderedList');
tinymce.activeEditor.queryCommandState('InsertUnorderedList');
tinymce.activeEditor.queryCommandState('Italic');
tinymce.activeEditor.queryCommandState('JustifyCenter');
tinymce.activeEditor.queryCommandState('JustifyFull');
tinymce.activeEditor.queryCommandState('JustifyLeft');
tinymce.activeEditor.queryCommandState('JustifyRight');
tinymce.activeEditor.queryCommandState('mceBlockQuote');
tinymce.activeEditor.queryCommandState('mceTogglePlainTextPaste');
tinymce.activeEditor.queryCommandState('Outdent');
tinymce.activeEditor.queryCommandState('Strikethrough');
tinymce.activeEditor.queryCommandState('Subscript');
tinymce.activeEditor.queryCommandState('Superscript');
tinymce.activeEditor.queryCommandState('ToggleToolbarDrawer');
tinymce.activeEditor.queryCommandState('Underline');
Query command values
TinyMCE provides the queryCommandValue
API to allow developers to determine the current state of selected content. The query will return an object containing the relevant value.
Listing core and plugin query command values
To retrieve a list of available queryable command values from the active editor, run the following command from the browser console:
tinymce.activeEditor.editorCommands.commands.value;
Available query command values
The following command values can be queried using the queryCommandValue API.
Command | Description |
---|---|
FontName |
Returns the font name of the current selection. |
FontSize |
Returns the font size of the current selection. |
LineHeight |
Returns the line height of the current selection. |
ToggleSidebar |
Returns the current state of sidebar (open or closed). |
ToggleView |
Returns the current state of the view, for example: |
tinymce.activeEditor.queryCommandValue('FontName');
tinymce.activeEditor.queryCommandValue('FontSize');
tinymce.activeEditor.queryCommandValue('LineHeight');
tinymce.activeEditor.queryCommandValue('ToggleSidebar');
tinymce.activeEditor.queryCommandValue('ToggleView');
Query command values for tables
The following table-related values can be queried using the queryCommandValue API.
Value | Description |
---|---|
mceTableRowType |
Returns the row type of the current table row, either: |
mceTableColType |
Returns the column type of the current table column, either: |
mceTableCellType |
Returns the cell type of the current table cell, either: |
tinymce.activeEditor.queryCommandValue('mceTableCellType');
tinymce.activeEditor.queryCommandValue('mceTableRowType');
tinymce.activeEditor.queryCommandValue('mceTableColType');