TINY BLOG > Important changes to Tiny Cloud pricing > Find out more

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
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
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.

formatChanged

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

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.

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.

match

match(name:String, vars:Object, node:Node):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.
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.