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');

Summary

Methods

Name Summary Defined by

apply()

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

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.

Formatter

closest()

Finds the closest matching format from a set of formats for the current selection.

Added in TinyMCE 5.6

Formatter

formatChanged()

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

Formatter

get()

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

Formatter

getCssText()

Returns a preview css text for the specified format.

Formatter

has()

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

Formatter

match()

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

Formatter

matchAll()

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

Formatter

matchNode()

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

Formatter

register()

Registers a specific format by name.

Formatter

remove()

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

Formatter

toggle()

Toggles the specified format on/off.

Formatter

unregister()

Unregister a specific format by name.

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 | Object): 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 | Object) - 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 | String, format: Object | Array)

Registers a specific format by name.

Parameters

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

  • format (Object | Array) - 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 | Range)

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 | Range) - 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".