Skip to main content

Editor API Methods

add#

Adds a new text into the editor

void add(string|object config, [object selection] );

ParameterTypeDescription
configstring,objecta string with a text or a text block as an object. Check the details
selectionobjectoptional, text selection (its position relative to all other text). Check the details
// adding simple textrichtext.getEditorAPI().add("text");// orrichtext.getEditorAPI().add({type:"text",data:"text"}); // adding a text node with style into the predefined positionrichtext.getEditorAPI().add({    type: "textnode",    data: {        text: "Hello world",        style: {            bold: true        }    }}, {     left: {        blockIndex: 0,        textIndex: 0,        offset: 0     },    range: false}); // adding a data modelrichtext.getEditorAPI().add({type:"full",data:[    {        "style": {            "style": "h1"        },        "textNodes": [            {                "style": {},                "text": "Hello "            },            {                "style": {                    "italic": true                },                "text": "world"            },            {                "style": {},                "text": "!"            }        ]    }]});

Related samples: RichText. Add

Details#

Check the detailed description of parameters:

ParameterTypeDescription
configstring|objecta string with a text or a text block as an object. If set as an object, the parameter includes:
  • type - (string) the type of a text block: "text" (a string) | "textnode" (a text node) | "full" (a data model);
  • data - (string|object|array) the content of a text block. It can be:
    • a simple string with text;
    • a text node as an object that includes:
      • a text as a string;
      • an object with style properties.
    • a data model as an array. It contains objects with styles and text nodes. Each text node includes:
      • an array with text nodes objects (each of them contains two key:value values for a text string and an object with style settings, as described above)
      • a style object
selectionobjectoptional, text selection (its position relative to all other text). Includes the following attributes:
  • range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
  • left - (object) the left coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the first character within a text node in the selection.
  • right - (object) the right coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.

getModel#

Returns the data model of the entered text in the JSON format

array getModel();

Returns:

TypeDescription
arraythe data model of the entered text
var model = richtext.getEditorAPI().getModel();

Related samples: RichText. Get Model

Details:#

The returned value is an array of the following type:

[    {        "style": {            "style": "h1"        },        "textNodes": [            {                "style": {},                "text": "Hello "            },            {                "style": {                    "italic": true                },                "text": "world"            },            {                "style": {},                "text": "!"            }        ]    }]

It contains objects with styles and text nodes. Each text node includes:

  • an array with text nodes objects (each of them contains two key:value pairs for a text string and an object with style settings)
  • a style object

getPosition#

Returns the position of text selection relative to the browser window

object getPosition();

Returns:

TypeDescription
objectthe position of text selection relative to the browser window
var position = richtext.getEditorAPI().getPosition();

Related samples: RichText. Get Position

Details#

The returned value is an object of the following type:

{    "xStart": 402.5,    "yStart": 172,    "xEnd": 461.5,    "yEnd": 172}

where:

  • xStart - the X coordinate of the selection start
  • yStart - the Y coordinate of the selection start
  • xEnd - the X coordinate of the selection end
  • yEnd - the Y coordinate of the selection end

getSelection#

Returns the position of text selection relative to all other text

object getSelection();

Returns:

TypeDescription
objectthe position of text selection relative to all other text
var selection = richtext.getEditorAPI().getSelection();

Related samples: RichText. Get Selection

Details#

The returned value is an object of the following type:

{    "left": {        "blockIndex": 0,        "textIndex": 0,        "offset": 8    },    "right": {        "blockIndex": 0,        "textIndex": 0,        "offset": 12    },    "range": true}

where:

  • range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
  • left - (object) the left coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the first character within a text node in the selection.
  • right - (object) the right coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.

remove#

Removes a selected text

void remove( [object selection] );

ParameterTypeDescription
selectionobjectoptional, text selection (its position relative to all other text). Check the details
var api = richtext.getEditorAPI(); richtext.getEditorAPI().remove(api.getSelection());

Related samples: RichText. Remove

Details#

Check the detailed description of the parameter:

selectionobjectoptional, text selection (its position relative to all other text). Includes the following attributes:
  • range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
  • left - (object) the left coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the first character within a text node in the selection.
  • right - (object) the right coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.

setModel#

Sets a structured text with styles (a data model as JSON) for the editor

void setModel(array structure, [object selection] );

ParameterTypeDescription
structurearrayan array of objects with styles and text nodes. Check the details
selectionobjectoptional, text selection (its position relative to all other text). Check the details
richtext.getEditorAPI().setModel([    {        "style": {            "style": "h1"        },        "textNodes": [            {                "style": {},                "text": "Hello "            },            {                "style": {                    "italic": true                },                "text": "world"            },            {                "style": {},                "text": "!"            }        ]    }]);

Related samples: RichText. Set Model

Details#

Check the detailed description of parameters:

structurearrayan array of objects with styles and text nodes. Each text node includes:
  • an array with text nodes objects (each of them contains two key:value pairs for a text string and an object with style settings)
  • a style object
selectionobjectoptional, text selection (its position relative to all other text). Includes the following attributes:
  • range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
  • left - (object) the left coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the first character within a text node in the selection.
  • right - (object) the right coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.

setSelection#

Applies selection to the specified text position

void setSelection(object selection);

ParameterTypeDescription
selectionobjectthe position of text selection relative to all other text
richtext.getEditorAPI().setSelection({    "left": {        "blockIndex": 0,        "textIndex": 0,        "offset": 0    },    "right": {        "blockIndex": 0,        "textIndex": 0,        "offset": 9    },    "range": true});

Related samples: RichText. Set Selection

Details#

Check the detailed description of the parameter:

selectionobjectthe position of text selection relative to all other text. Includes the following attributes:
  • range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
  • left - (object) the left coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the first character within a text node in the selection.
  • right - (object) the right coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.

update#

Modifies the entered text

void update(object config, [object selection] );

ParameterTypeDescription
configobjectan object with details of updating. Check the details
selectionobjectoptional, text selection (its position relative to all other text). Check the details
var api = richtext.getEditorAPI(); richtext.getEditorAPI().update(    {        modifier: "color",        value: "#BB2B1A"    },     api.getSelection());

Related samples: RichText. Update

Details:#

Check the detailed description of parameters:

configobjectan object with details of updating. It contains two parameters:
  • modifier - (object) an object with a set of styling options that will be updated;
  • value - (any) the value of the modifier.
selectionobjectoptional, text selection (its position relative to all other text). Includes the following attributes:
  • range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
  • left - (object) the left coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the first character within a text node in the selection.
  • right - (object) the right coordinate of selection, contains the following properties:
    • blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
    • textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
    • offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.