Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

tinymce.Formatter

Text formatter engine class. This class is used to apply formats like bold, italic, font size etc to the current selection or specific nodes. This engine was built to replace the browser's default formatting logic for execCommand due to its inconsistent and buggy behavior.

Examples

tinymce.activeEditor.formatter.register('mycustomformat', {
   inline: 'span',
   styles: {color: '#ff0000'}
 });

 tinymce.activeEditor.formatter.apply('mycustomformat');

Methods

name summary defined by
apply() Applies the specified format to the current selection or specified node. tinymce.Formatter
canApply() Returns true/false if the specified format can be applied to the current selection or not. It will currently only check the state for selector formats, it returns true on all other format types. tinymce.Formatter
closest() Finds the closest matching format from a set of formats for the current selection.
Added in TinyMCE 5.6
tinymce.Formatter
formatChanged() Executes the specified callback when the current selection matches the formats or not. tinymce.Formatter
get() Returns the format by name or all formats if no name is specified. tinymce.Formatter
getCssText() Returns a preview css text for the specified format. tinymce.Formatter
has() Returns true or false if a format is registered for the specified name. tinymce.Formatter
match() Matches the current selection or specified node against the specified format name. tinymce.Formatter
matchAll() Matches the current selection against the array of formats and returns a new array with matching formats. tinymce.Formatter
matchNode() Return true/false if the specified node has the specified format. tinymce.Formatter
register() Registers a specific format by name. tinymce.Formatter
remove() Removes the specified format from the current selection or specified node. tinymce.Formatter
toggle() Toggles the specified format on/off. tinymce.Formatter
unregister() Unregister a specific format by name. tinymce.Formatter

Methods

apply

apply(name:String, vars:Object, node:Node)

Applies the specified format to the current selection or specified node.

Parameters
  • name (String) - Name of format to apply.
  • vars (Object) - Optional list of variables to replace within format before applying it.
  • node (Node) - Optional node to apply the format to defaults to current selection.

canApply

canApply(name:String):boolean

Returns true/false if the specified format can be applied to the current selection or not. It will currently only check the state for selector formats, it returns true on all other format types.

Parameters
  • name (String) - Name of format to check.
Return value
  • boolean - true/false if the specified format can be applied to the current selection/node.

closest

closest(names:Array):String

Finds the closest matching format from a set of formats for the current selection.
Added in TinyMCE 5.6

Parameters
  • names (Array) - Format names to check for.
Return value
  • String - The closest matching format name or null.

formatChanged

formatChanged(formats:String, callback:function, similar:Boolean, vars:Object)

Executes the specified callback when the current selection matches the formats or not.

Parameters
  • formats (String) - Comma separated list of formats to check for.
  • callback (function) - Callback with state and args when the format is changed/toggled on/off.
  • similar (Boolean) - True/false state if the match should handle similar or exact formats.
  • vars (Object) - Restrict the format being watched to only match if the variables applied are equal to vars.

get

get(name:String):Array, Object

Returns the format by name or all formats if no name is specified.

Parameters
  • name (String) - Optional name to retrieve by.
Return value
  • Array - Array/Object with all registered formats or a specific format.
  • Object - Array/Object with all registered formats or a specific format.

getCssText

getCssText(format:String):String

Returns a preview css text for the specified format.

Examples
var cssText1 = editor.formatter.getCssText('bold');
var cssText2 = editor.formatter.getCssText({inline: 'b'});
Parameters
  • format (String) - Format to generate preview css text for.
Return value
  • String - Css text for the specified format.

has

has(name:String):boolean

Returns true or false if a format is registered for the specified name.

Parameters
  • name (String) - Format name to check if a format exists.
Return value
  • boolean - True/False if a format for the specified name exists.

match

match(name:String, vars:Object, node:Node, similar:Boolean):boolean

Matches the current selection or specified node against the specified format name.

Parameters
  • name (String) - Name of format to match.
  • vars (Object) - Optional list of variables to replace before checking it.
  • node (Node) - Optional node to check.
  • similar (Boolean) - Optional argument to specify that similar formats should be checked instead of only exact formats.
Return value
  • boolean - true/false if the specified selection/node matches the format.

matchAll

matchAll(names:Array, vars:Object):Array

Matches the current selection against the array of formats and returns a new array with matching formats.

Parameters
  • names (Array) - Name of format to match.
  • vars (Object) - Optional list of variables to replace before checking it.
Return value
  • Array - Array with matched formats.

matchNode

matchNode(node:Node, name:String, vars:Object, similar:Boolean):Object

Return true/false if the specified node has the specified format.

Parameters
  • node (Node) - Node to check the format on.
  • name (String) - Format name to check.
  • vars (Object) - Optional list of variables to replace before checking it.
  • similar (Boolean) - Match format that has similar properties.
Return value
  • Object - Returns the format object it matches or undefined if it doesn't match.

register

register(name:Object, format:Object)

Registers a specific format by name.

Parameters
  • name (Object) - Name of the format for example "bold".
  • format (Object) - Optional format object or array of format variants can only be omitted if the first arg is an object.

remove

remove(name:String, vars:Object, node:Node)

Removes the specified format from the current selection or specified node.

Parameters
  • name (String) - Name of format to remove.
  • vars (Object) - Optional list of variables to replace within format before removing it.
  • node (Node) - Optional node or DOM range to remove the format from defaults to current selection.

toggle

toggle(name:String, vars:Object, node:Node)

Toggles the specified format on/off.

Parameters
  • name (String) - Name of format to apply/remove.
  • vars (Object) - Optional list of variables to replace within format before applying/removing it.
  • node (Node) - Optional node to apply the format to or remove from. Defaults to current selection.

unregister

unregister(name:String)

Unregister a specific format by name.

Parameters
  • name (String) - Name of the format for example "bold".

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.