Working with Data

Data Structure

Rich Text Editor expects a JS data file with an HTML string to display. Check the data sample below:

const text = 
`<p>Hello World</p>
 <p><a href="https://docs.webix.com/desktop__richtext.html">Rich Text Editor</a></p>
 <p>Sample text</p>`;

Data Services

Rich Text Editor has the following services to work with data:

1. Upload

handles uploading of images added to the document

const upload = $$("editor").getService("upload");
upload.fileDialog(id); // opens a dialog for uploading

2. Operations

processes all inner actions

$$("editor").getService("operations").copy(); // copies the selected text

3. Backend

handles export and import of documents

const back = $$("editor").getService("backend");
back.import(); // initiates the file dialog for importing .docx, .md, .txt

Study the models folder in the source code for method signatures.

Data Operations

Setting Rich Text Editor Value

To specify a value for Rich Text Editor, use the setValue() method of Rich Text Editor. The method takes the following parameters:

value (string) - the value to be set for the component
type (string) - optional, the format of the applied value. It can be: "html", "text", "markdown", "raw" (Richtext AST content)

If the type parameter isn't specified, the method treats the content according to the current datatype parameter ("html" by default).

const text = 
`<p>Hello World</p>
<p><a href="https://docs.webix.com/desktop__richtext.html">Rich Text Editor</a></p>
<p>Sample text</p>`;
 
$$("editor").setValue(text);

Getting Rich Text Editor Value

To get the value of the widget, make use of the getValue() method. It takes one optional parameter:

type (string) - the format of the applied value: "html", "text", "markdown", "raw" (Richtext AST content)

The method returns the content of the widget in the specified format. If the type parameter isn't specified, the method returns the content of the widget according to the current datatype parameter ("html" by default).

const value = $$("editor").getValue();
// -> '<p>Sample text</p>'

Inserting Value at Cursor Position

You can insert a value in the specified format at the cursor position using the insertValue() method. The method takes the following parameters:

value (string) - the value to be inserted
type (string) - optional, the format of the inserted value. It can be: "html", "text", "markdown", "raw" (Richtext AST content)

If the type parameter isn't specified, the method treats the content according to the current datatype parameter ("html" by default).

const md = "**Inserted** markdown content";
 
$$("editor").insertValue(md, "markdown");

Related sample: Insert Value via API

Note that the markdown parser of Rich Text Editor doesn't provide support for nested structures (except bold inside italic). This means that combinations such as bold inside a link, italic inside a list, or multi-level lists will not render correctly while being pasted, added via the setValue() method or inserted via the insertValue() method with the "markdown" format or imported in an .md file.