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 text
richtext.getEditorAPI().add("text");
// or
richtext.getEditorAPI().add({type:"text",data:"text"});
 
// adding a text node with style into the predefined position
richtext.getEditorAPI().add({
    type: "textnode",
    data: {
        text: "Hello world",
        style: {
            bold: true
        }
    }
}, {
     left: {
        blockIndex: 0,
        textIndex: 0,
        offset: 0
     },
    range: false
});
 
// adding a data model
richtext.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.