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)

Note that the markdown parser of Rich Text Editor doesn't provide support for nested structures. It means that such complex structures as, e.g. bold font style inside the italics one, or a link inside a list, or multi-level lists won't work correctly while being pasted, added via the setValue() method with the "markdown" format or imported in an .md file.

If the type parameter isn't specified, the method tries to treat content as HTML.

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 hasn't been passed, the method returns a string HTML content.

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