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 object to current document that holds the TinyMCE editor instance. |
||
contentCSS |
|
Array with CSS files to load into the iframe. |
|
contentStyles |
|
Array of CSS styles to add to head of document when the editor loads. |
|
documentBaseURI |
URI object to document configured for the TinyMCE instance. |
||
dom |
DOM instance for the editor. |
||
editorUpload |
Editor upload API |
||
formatter |
Formatter instance. |
||
id |
|
Editor instance id, normally the same as the div/textarea that was replaced. |
|
initialized |
|
Is set to true after the editor instance has been initialized |
|
mode |
Editor mode API |
||
notificationManager |
Notification manager reference, use this to open new windows and dialogs. |
||
options |
Editor options API |
||
parser |
HTML parser will be used when contents is inserted into the editor. |
||
plugins |
|
Name/Value object containing plugin instances. |
|
schema |
Schema instance, enables you to validate elements and its children. |
||
selection |
Selection instance for the editor. |
||
serializer |
DOM serializer for the editor. Will be used when contents is extracted from the editor. |
||
theme |
Reference to the theme instance that was used to generate the UI. |
||
ui |
Editor ui components |
||
undoManager |
Undo manager instance, responsible for handling undo levels. |
||
windowManager |
Window manager reference, use this to open new windows and dialogs. |
Methods
Name | Summary | Defined by |
---|---|---|
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. |
||
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. |
||
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. |
||
Adds a keyboard shortcut for some command or function. |
||
Adds visual aids for tables, anchors, etc so they can be more easily edited inside the editor. |
||
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. |
||
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. |
||
Dispatches the specified event by name. Consult the event reference for more details on each event. |
||
Executes a registered command on the current instance. A list of available commands can be found in the tinymce command identifiers documentation. |
||
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 |
||
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. |
||
Returns the root element of the editable area. For a non-inline iframe-based editor, returns the iframe’s body 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. |
||
Gets the content from the editor instance, this will cleanup the content before it gets returned using the different cleanup rules options. |
||
Returns the content area container element of the editor. This element holds the iframe or the editable element. |
||
Returns the iframes document object. |
||
Returns the target element/textarea that got replaced with a TinyMCE editor instance. |
||
Returns a configuration parameter by name. Deprecated in TinyMCE 6.0 and has been marked for removal in TinyMCE 7.0. Use the |
||
Returns the iframes window object. |
||
Returns the current editable state of the editor’s root element. |
||
Returns true/false if the object has a event of the specified name. |
||
Returns true/false if the editor has real keyboard focus. |
||
Checks that the plugin is in the editor configuration and can optionally check if the plugin has been loaded. |
||
Hides the editor and shows any textarea/div that the editor is supposed to replace. |
||
Inserts content at caret position. |
||
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 |
||
Returns true/false if the editor is hidden or not. |
||
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. |
||
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. |
||
Unbinds an event listener to a specific event by name. Consult the event reference for more details on each event. |
||
Binds an event listener to a specific event by name. Consult the event reference for more details on each event. |
||
Bind the event callback and once it fires the callback is removed. Consult the event reference for more details on each event. |
||
Returns a command specific state, for example if bold is enabled or not. |
||
Returns true/false if the command is supported or not. |
||
Returns a command specific value, for example the current font size. |
||
Removes the editor from the dom and tinymce collection. |
||
Renders the editor/adds it to the page. |
||
Resets the editors content, undo/redo history and dirty state. If |
||
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. |
||
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. |
||
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. |
||
Changes the editable state of the editor’s root element. |
||
Sets the progress state, this will display a throbber/progess for the editor. This is ideal for asynchronous operations like an AJAX save call. |
||
Shows the editor and hides any textarea/div that the editor is supposed to replace. |
||
Translates the specified string by replacing variables with language pack items it will also check if there is a key matching the input. |
||
Uploads all data uri/blob uri images in the editor contents to server. |
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.
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.
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.
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!');
});
addVisual()
addVisual(elm: Element)
Adds visual aids for tables, anchors, etc so they can be more easily edited inside the editor.
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.
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.
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.
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.
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.
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.
getBody()
getBody(): Element
Returns the root element of the editable area. For a non-inline iframe-based editor, returns the iframe’s body element.
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.
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()
getContentAreaContainer()
getContentAreaContainer(): Element
Returns the content area container element of the editor. This element holds the iframe or the editable element.
getElement()
getElement(): Element
Returns the target element/textarea that got replaced with a TinyMCE editor instance.
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');
hasEditableRoot()
hasEditableRoot(): Boolean
Returns the current editable state of the editor’s root element.
hasEventListeners()
hasEventListeners(name: String): Boolean
Returns true/false if the object has a event of the specified name.
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');
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.
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.
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.
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.
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.
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.
queryCommandState()
queryCommandState(cmd: String): Boolean
Returns a 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.
queryCommandValue()
queryCommandValue(cmd: String): String
Returns a command specific value, for example the current font size.
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.
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.
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' });
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.
setEditableRoot()
setEditableRoot(state: Boolean)
Changes the editable state of the editor’s root element.
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);