You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Learn how to quickly create DHTMLX Rich Text Editor on a page and set up its basic configuration in four simple steps.
4
+
description: You can explore how to start working with DHTMLX RichText in the documentation of the DHTMLX JavaScript RichText library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText.
5
5
---
6
6
7
7
# How to start
8
8
9
-
RichText editor will make text editing quick and comfortable due to the inbuilt set of handy formatting tools.
10
-
Follow this comprehensive and easy-to-reproduce tutorial to create RichText editor on a page and start working with it.
9
+
This clear and comprehensive tutorial will guide your through the steps you need to take in order to get a full-functional RichText on a page.
First create an HTML file with the name ***index.html***. Then include the source files of DHTMLX RichText into this file. [Take a look at the structure of RichText package](guides/initialization.md#including-source-files).
15
+
Start from creating an HTML file and call it *index.html*. Then proceed to include RichText source files into the created file.
@@ -52,26 +51,29 @@ If you want to use trial version of RichText, download the [**trial RichText pac
52
51
You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Please note that access to the private **npm** is available only while your proprietary RichText license is active.
53
52
:::
54
53
55
-
## Step 2. Create RichText
54
+
## Step 2. Creating RichText
56
55
57
-
At this step you can add RichText on a page. There are two easy steps:
56
+
Now you are ready to add RichText to the page. First, let's create the `<div>` container for RichText. So, take the following steps:
58
57
59
-
-Open the ***index.html*** file and create a DIV container in it.
60
-
-Initialize DHTMLX RichText in the container with the `richtext.Richtext` constructor. As the parameters of the constructor, pass the container you've created above and the configuration object of RichText as follows:
58
+
-specify a DIV container in the *index.html* file
59
+
-initialize RichText using the **richtext.Richtext** constructor
61
60
62
-
~~~html title="index.html"
61
+
As parameters, the constructor takes the ID of HTML container where the RichText will be placed into, as well as corresponding configuration objects.
@@ -80,20 +82,26 @@ At this step you can add RichText on a page. There are two easy steps:
80
82
81
83
## Step 3. Configuring RichText
82
84
83
-
Now it's time to define configuration properties to make the RichText meet you needs.
84
-
85
-
RichText includes several properties that let you adjust the Toolbar appearance and behavior as well as choose the most suitable mode of work with a document. [Learn all the available settings](api/properties.md).
86
-
87
-
For example, you can specify the **"document"** mode of RichText displaying:
88
-
89
-
~~~jsx
90
-
constrich=newrichtext.Richtext("#root", {
91
-
mode:"document"
85
+
Next you can specify configuration properties you want the RichText component to have when initialized.
86
+
87
+
To start working with RichText, first you need to provide the initial data for editor via the [`value`](api/config/value.md) property. Beside this, you can enable [**menubar**](api/config/menubar.md), customize [**toolbar**](api/config/toolbar.md), specify [**fullscreen**](api/config/fullscreen.md) and [**layout**](api/config/layout-mode.md) modes, apply new [**locale**](api/config/locale.md) and [**default styles**](api/config/default-styles.md).
88
+
89
+
~~~jsx {2-12}
90
+
consteditor=newrichtext.Richtext("#root", {
91
+
menubar:true,
92
+
toolbar:false,
93
+
fullscreen:true,
94
+
layoutMode:"document",
95
+
locale:richtext.locale.cn
96
+
defaultStyles: {
97
+
h4: {
98
+
"font-size":"17px"
99
+
},
100
+
// other settings
101
+
}
92
102
});
93
103
~~~
94
104
95
-
There is a [detailed description of available RichText configuration settings](guides/configuration.md).
96
-
97
-
## Step 4. Set content (optional)
105
+
## What's next
98
106
99
-
If necessary, you can parse some text in the HTML or Markdown format on the RichText initialization. Read more about this feature in the [related article](guides/loading_data.md).
107
+
That's all. Just three simple steps and you have a handy tool for visualizing and managing the workflow. Now you can start working with your content or keep exploring the inner world of JavaScript RichText.
description: Get a general idea of DHTMLX Rich Text Editor, its purpose, Toolbar structure, editing modes, supported text formats, and available integrations with JavaScript frameworks.
5
4
slug: /
5
+
description: You can have an overview of DHTMLX JavaScript Kanban library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Kanban.
6
6
---
7
7
8
8
# RichText overview
9
9
10
-
DHTMLX RichText is a JavaScript client-side tool for fast and handy editing of content. It provides a compact set of formatting controls, two editing modes for comfy work with text and an easily adjustable Toolbar.
10
+
**DHTMLX RichText** is a flexible and lightweight WYSIWYG editor built with JavaScript. Designed to provide a seamless editing experience in modern web applications, RichText offers a clean UI, rich formatting capabilities, and full control over content rendering. Whether you're building a CMS, an internal admin tool, or an embedded document editor, RichText can be easily integrated and customized to match your needs.
11
11
12
-
This component supports parsing and serialization of data in the HTML and JSON formats and allows using any icon fonts and adding custom controls. Besides, there are ready-made solutions for integration with
13
-
such popular JavaScript frameworks as Angular, React and Vue.js.
12
+
**DHTMLX RichText** component includes the following features:
14
13
15
-
## Toolbar structure
14
+
- Multiple editing modes, including visual and source view
16
15
17
-
The Toolbar of RichText is [easily configurable](guides/configuration.md#toolbar). It contains several blocks of controls and their number depends on the chosen type of Toolbar:
16
+
- Content serialization to both HTML and JSON
18
17
19
-
- default Toolbar
20
-
- full Toolbar
18
+
- A configurable **toolbar** and **menubar** with built-in and custom buttons
21
19
22
-
### Default Toolbar
20
+
- Image uploading, rich formatting, custom styling, and layout modes
23
21
24
-
The **default Toolbar** includes 6 blocks of controls. They are: "undo", "style", "decoration", "colors", "align" and "link":
22
+
- Full API access for event handling, content manipulation, and reactive state management
25
23
26
-
24
+
RichText is framework-agnostic and provides official wrappers for React, Angular, Vue, and Svelte, making it suitable for a wide range of front-end ecosystems.
27
25
28
-
### Full Toolbar
26
+
This documentation provides detailed guidance on installation, configuration, usage, and customization. You'll find examples for common scenarios, full API references, and best practices for embedding RichText into your application.
29
27
30
-
The **full Toolbar** includes all the default blocks and additional "clear", "stats" and "fullscreen" blocks:
28
+
## RichText structure
31
29
32
-
30
+
###Toolbar
33
31
34
-
You can [adjust the look and feel of the Toolbar](guides/customization.md) to meet your requirements.
32
+
The RichText toolbar provides quick access to text formatting and structural editing features. By default, it is enabled and displays a predefined set of commonly used controls such as bold, italic, font settings, and list formatting.
35
33
36
-
## Two working modes
34
+
The [`toolbar`](api/config/toolbar.md) property allows you to fully customize the toolbar’s content and layout. You can enable or disable toolbar, rearrange default controls, or define a fully custom toolbar using an array of predefined button identifiers and custom button objects.
37
35
38
-
DHTMLX RichText can work with content in [two modes](guides/configuration.md). You can choose the most suitable mode to feel comfortable while editing text. The modes are:
36
+
39
37
40
-
- "classic"
38
+
### Menubar
41
39
42
-
40
+
The RichText menubar provides access to high-level editing actions such as creating a new document, printing, importing/exporting content, and more. It is hidden by default.
43
41
44
-
- "document"
42
+
Use the [`menubar`](api/config/menubar.md) property to toggle its visibility. While the menubar can be enabled or disabled, its contents are not configurable at this time.
45
43
46
-
44
+
47
45
48
-
[Read more](guides/configuration.md#working-modes) about setting the mode you like best.
46
+
### Editor
49
47
50
-
## Supported formats
48
+
The RichText editor is the central area where users create and format content. You can control the editor’s appearance and behavior through configuration options such as [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md), and [`defaultStyles`](api/config/default-styles.md). RichText also supports custom styling, image embedding, and responsive layout adjustments to match the needs of your application.
49
+
50
+
### Two working modes
51
+
52
+
DHTMLX RichText can work with content in "classic" and "document" modes. You can choose the most suitable mode to feel comfortable while editing text. Use the [`layoutMode`](api/config/layout-mode.md) property to switch modes programatically.
The RichText editor supports [parsing](guides/loading_data.md#adding-content-into-editor) and [serialization](guides/working_with_richtext.md#getting-content-from-editor) of content in the [HTML and Markdown formats](guides/loading_data.md#format-of-content).
0 commit comments