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);
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 |
| ui | tinymce.Editor.ui | Editor ui components | 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 |
|---|---|---|
| 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 |
| 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 |
| 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 |
| 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 |
| hasFocus() | Returns true/false if the editor has real keyboard focus. | tinymce.Editor |
| hide() | Hides the editor and shows any textarea/div that the editor is supposed to replace. | 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
- id (String) - Unique id for the editor.
- settings (Object) - Settings for the editor.
- editorManager (tinymce.EditorManager) - EditorManager instance.
Methods
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
- name (String) - Command name to add/override.
- callback (addCommandCallback) - Function to execute when the command occurs.
- scope (Object) - Optional scope to execute the function in.
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
- name (String) - Command name to add/override.
- callback (addQueryStateHandlerCallback) - Function to execute when the command state retrieval occurs.
- scope (Object) - Optional scope to execute the function in.
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
- name (String) - Command name to add/override.
- callback (addQueryValueHandlerCallback) - 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, sc:Object):BooleanAdds a keyboard shortcut for some command or function.
Parameters
- pattern (String) - Shortcut pattern. Like for example: ctrl+alt+o.
- desc (String) - Text description for the command.
- cmdFunc (String) - Command name string or function to execute when the key is pressed.
- sc (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 aid 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):stringURL 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) - 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.
execCallback
execCallback(name:String):ObjectExecutes 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
- name (String) - Name of the callback to execute.
Return value
- Object - Return value passed from callback function.
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
- cmd (String) - Command name to execute, for example mceLink or Bold.
- ui (Boolean) - True/false state if a UI (dialog) should be presented or not.
- value (mixed) - Optional command value, this can be anything.
- args (Object) - Optional arguments object.
fire
fire(name:String, args:Object?, bubble:Boolean?):ObjectFires the specified event by name. Consult the event reference for more details on each event.
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():ElementReturns 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():ElementReturns 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
- Element - HTML DOM element for the editor container.
getContent
getContent(args:Object):StringGets 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
- 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():ElementReturns the editors content area container element. The this element is the one who holds the iframe or the editable element.
Return value
- Element - HTML DOM element for the editor area container.
getDoc
getDoc():DocumentReturns the iframes document object.
Return value
- Document - Iframe DOM document object.
getElement
getElement():ElementReturns 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):StringReturns 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
- name (String) - Configruation 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():WindowReturns the iframes window object.
Return value
- Window - Iframe DOM window object.
hasEventListeners
hasEventListeners(name:String):BooleanReturns 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():BooleanReturns true/false if the editor has real keyboard focus.
Return value
- Boolean - Current focus state of the editor.
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():BooleanReturns 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
- 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():BooleanReturns 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):StringLoads 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
- 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:callback?):ObjectUnbinds 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 (callback?) - Callback to unbind.
Return value
- Object - Current class instance.
on
on(name:String, callback:callback, first:Boolean):ObjectBinds 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
- name (String) - Event name or space separated list of events to bind.
- callback (callback) - Callback to be executed when the event occurs.
- first (Boolean) - Optional flag if the event should be prepended. Use this with care.
Return value
- Object - Current class instance.
once
once(name:String, callback:callback):ObjectBind 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 (callback) - Callback to bind only once.
Return value
- Object - Current class instance.
queryCommandState
queryCommandState(cmd:string):BooleanReturns 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):BooleanReturns 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):ObjectReturns a command specific value, for example the current font size.
Parameters
- cmd (string) - Command to query value from.
Return value
- Object - Command specific value, for example the current font size.
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):StringSaves 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
- 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):StringSets 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
- 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
function ajaxSave() {
var 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.
setMode
setMode(mode:String)Sets the editor mode. Mode can be for example "design", "code" or "readonly".
Parameters
- mode (String) - Mode to set the editor in.
setProgressState
setProgressState(state:Boolean, time:Number):BooleanSets 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):StringTranslates 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(callback:function):tinymce.util.PromiseUploads all data uri/blob uri images in the editor contents to server.
Parameters
- callback (function) - Optional callback with images and status for each image.
Return value
- tinymce.util.Promise - Promise instance.
Can't find what you're looking for? Let us know.
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.