Editor API methods

add

Adds a new text into the editor

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

Parameter	Type	Description
config	string,object	a string with a text or a text block as an object. Check the details
selection	object	optional, 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:

Parameter	Type	Description
config	string|object	a 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
selection	object	optional, 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:

Type	Description
array	the 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:

Type	Description
object	the 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:

Type	Description
object	the 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] );

Parameter	Type	Description
selection	object	optional, 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:

selection

object

optional, 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] );

Parameter	Type	Description
structure	array	an array of objects with styles and text nodes. Check the details
selection	object	optional, 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:

structure	array	an 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
selection	object	optional, 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);

Parameter	Type	Description
selection	object	the 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:

selection

object

the 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] );

Parameter	Type	Description
config	object	an object with details of updating. Check the details
selection	object	optional, 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:

config	object	an 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.
selection	object	optional, 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.