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

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", "raw" (Richtext AST content)

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", "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>'