From 33b7a15fba67c8b4e2c4178e805e8ce4c56c7f54 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 13 May 2026 22:54:40 +0300 Subject: [PATCH 01/21] Rewrite the Configuration guide --- docs/guides/configuration.md | 140 +++++++++++++++++++++++++---------- 1 file changed, 102 insertions(+), 38 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index f782c3a..4402448 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -6,33 +6,34 @@ description: You can learn about the configuration in the documentation of the D # Configuration -You can configure RichText appearance and functionality via the corresponding API. The available parameters will allow you to: +You can configure the RichText appearance and behavior with the following properties: -- Show/hide **menubar** using the [`menubar`](api/config/menubar.md) property -- Configure **toolbar** using the [`toolbar`](api/config/toolbar.md) property -- Enable the **fullscreen mode** using the [`fullscreenMode`](api/config/fullscreen-mode.md) property -- Toggle the **layout** between "classic" and "document" modes using the [`layoutMode`](api/config/layout-mode.md) property -- Specify **initial value** using the [`value`](api/config/value.md) property -- Specify **initial locale** using the [`locale`](api/config/locale.md) property -- Apply **initial styles** using the [`defaultStyles`](api/config/default-styles.md) property +- [`menubar`](api/config/menubar.md) — show or hide the top menubar +- [`toolbar`](api/config/toolbar.md) — configure toolbar visibility and buttons +- [`fullscreenMode`](api/config/fullscreen-mode.md) — start the editor in fullscreen +- [`layoutMode`](api/config/layout-mode.md) — switch between the `"classic"` and `"document"` layouts +- [`value`](api/config/value.md) — set the initial HTML content +- [`locale`](api/config/locale.md) — apply a localization object on initialization +- [`defaultStyles`](api/config/default-styles.md) — set default styles for specific block types +- [`imageUploadUrl`](api/config/image-upload-url.md) — set the endpoint for image uploads ## Layout modes -There are two layout modes of RichText editor between which you can select to get the best working place for creating your perfect content: +RichText supports two layout modes for the editing area: -- **"classic"** +- **"classic"** — the edit area fills the entire page
![Classic mode](./../assets/richtext/classic_mode.png)
-- **"document"** +- **"document"** — the edit area mimics real document sizes (A4, A5, A6, A7)
![Document mode](./../assets/richtext/document_mode.png)
-To specify the desired mode, you need to define it in the [`layoutMode`](api/config/layout-mode.md) property of the RichText configuration object during initialization of the component: +Set the [`layoutMode`](api/config/layout-mode.md) property during initialization to choose the mode: ~~~jsx const editor = new richtext.Richtext("#root", { @@ -42,11 +43,11 @@ const editor = new richtext.Richtext("#root", { ## Toolbar -The RichText toolbar consists of several blocks of controls that can be changed according to your needs. +The RichText toolbar groups controls into several blocks that you can customize. ### Default toolbar controls -You can specify the following buttons and controls in the RichText toolbar: +You can include the following buttons and controls in the RichText toolbar: | Button | Description | |---------------------|-----------------------------------------------------------------------------| @@ -76,11 +77,11 @@ You can specify the following buttons and controls in the RichText toolbar: | `clear` | Removes all formatting from the selected text | | `print` | Opens the print dialog | | `fullscreen` | Toggles fullscreen mode | -| `mode` | Switches between 2 view modes: Classic/ Document | +| `mode` | Switches between two layout modes: classic and document | | `shortcuts` | Displays a list of available keyboard shortcuts | | `separator` | Adds a visual separator between controls | -The toolbar structure is defined using the [`toolbar`](api/config/toolbar.md) property, which is an array with strings presenting the names of controls. +Use the [`toolbar`](api/config/toolbar.md) property to define the toolbar as an array of control name strings: ~~~jsx {2-36} new richtext.Richtext("#root", { @@ -125,36 +126,38 @@ new richtext.Richtext("#root", { **Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) -### Custom toolbar controls +### Add custom toolbar controls -You can also specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property with the following parameters: +Pass objects in the [`toolbar`](api/config/toolbar.md) array to add custom controls. The following parameters are available: -- `type` - (required) specifies a custom control type. The following types are available: `"button"`, `"richselect"`, `"colorpicker"` -- `id` - (optional) a custom control ID (cannot overlap with existing control ID) -- `label` - (optional) a button label (combines with icon) -- `tooltip` - (optional) a tooltip displayed on hover (if not specified, uses the value from "label") -- `css` - (optional) a css class name assigned to the control (default supported classes: wx-primary, wx-secondary) -- `handler` - (optional) a callback function that executes when the button is clicked +- `type: string` — required. Control type: `"button"`, `"richselect"`, or `"colorpicker"` +- `id: string` — optional. Custom control ID; cannot overlap with existing control IDs +- `icon: string` — optional. Icon class name; combines with the label +- `label: string` — optional. Button label; combines with the icon +- `tooltip: string` — optional. Tooltip shown on hover; defaults to `label` if not set +- `css: string` — optional. CSS class assigned to the control. Default supported classes: `wx-primary`, `wx-secondary` +- `handler: () => void` — optional. Callback invoked on click + +The example below combines built-in buttons, a predefined control with the `richselect` type, and two custom buttons: ~~~jsx {6-32} new richtext.Richtext("#root", { toolbar: [ - // buttons (strings represent buttons only) + // string entries represent built-in buttons "bold", "italic", - // predefined buttons (user cannot define any other options for these (no labels, tooltips, options, etc.), so only ({ type: "button", id: string }) + // predefined buttons accept only { type: "button", id: string } { type: "button", id: "fullscreen", }, - // user must specify the correct type if they want to use a predefined control (e.g. richselect/colorpicker) - // non-matching types will be ignored (not added to the toolbar) + // for predefined richselect/colorpicker controls, set the matching type + // entries with a non-matching type are ignored { - type: "richselect", // type: "button" - incorrect, will be ignored + type: "richselect", // type: "button" would be ignored here id: "mode", }, - // custom buttons (supported options are below) - // user can only define custom buttons (no richselect/colorpicker support atm) + // custom buttons (richselect/colorpicker are not supported for custom controls) { type: "button", id: "some", @@ -176,9 +179,9 @@ new richtext.Richtext("#root", { **Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) -### Hide Toolbar +### Hide the toolbar -If you need to hide toolbar, set the [`toolbar`](api/config/toolbar.md) property to `false` as follows: +Set the [`toolbar`](api/config/toolbar.md) property to `false` to hide the toolbar: ~~~jsx {2} new richtext.Richtext("#root", { @@ -187,13 +190,74 @@ new richtext.Richtext("#root", { }); ~~~ +## Show the menubar + +Use the [`menubar`](api/config/menubar.md) property to show the top menubar above the toolbar. The default value is `false`. + +~~~jsx {2} +new richtext.Richtext("#root", { + menubar: true + // other configuration properties +}); +~~~ + +## Set the initial content + +Use the [`value`](api/config/value.md) property to pass initial HTML content into the editor on initialization: + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" + // other configuration properties +}); +~~~ + +To replace the content later in a custom format, call the [`setValue()`](api/methods/set-value.md) method. + +## Set the initial locale + +Use the [`locale`](api/config/locale.md) property to apply a localization object on initialization: + +~~~jsx {2} +new richtext.Richtext("#root", { + locale: richtext.locales.cn + // other configuration properties +}); +~~~ + +For details and dynamic locale switching with [`setLocale()`](api/methods/set-locale.md), see the [Localization](guides/localization.md) guide. + +## Start in fullscreen mode + +Use the [`fullscreenMode`](api/config/fullscreen-mode.md) property to open the editor in fullscreen on initialization. The default value is `false`. + +~~~jsx {2} +new richtext.Richtext("#root", { + fullscreenMode: true + // other configuration properties +}); +~~~ + +## Configure the image upload URL + +Use the [`imageUploadUrl`](api/config/image-upload-url.md) property to set the server endpoint that handles image uploads triggered from the toolbar: + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // other configuration properties +}); +~~~ + ## Default styles -You can apply default style values for specific block types in the editor using the [`defaultStyles`](api/config/default-styles.md) property. +Use the [`defaultStyles`](api/config/default-styles.md) property to set default style values for specific block types in the editor. + +The following code snippet shows the type signature of the [`defaultStyles`](api/config/default-styles.md) property: ~~~jsx {} -defaultStyles?: boolean | { - "*"?: { // affects all blocks, allowing you to set common properties for all of these blocks +defaultStyles?: { + "*"?: { // applies to all blocks; sets common properties for every block "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" color?: string; @@ -250,7 +314,7 @@ defaultStyles?: boolean | { }; ~~~ -The `defaultStyles` property DOES NOT set the actual CSS to the affected blocks. CSS styles have to be applied separately: +The [`defaultStyles`](api/config/default-styles.md) property does not apply CSS to the affected blocks. Apply matching CSS styles separately: ```html title="index.html"
@@ -278,6 +342,6 @@ const editor = new richtext.Richtext("#root", { } ``` -In this example, all `h2` blocks are assigned to the `"Roboto"` font-family with a font-size of 28px with both the foreground and the background colors changed as well. Css styles are assigned to `h2` blocks as well. +In this example, all `h2` blocks use the `"Roboto"` font family at 28px with purple text on a pink background. The matching CSS rule applies the same values to the rendered `h2` elements. **Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) From 9858b3594edd39ad95b4514d8ee787d3e685cab8 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 13 May 2026 22:54:58 +0300 Subject: [PATCH 02/21] Rewrite the Initialization guide --- docs/guides/initialization.md | 46 +++++++++++++++++++++++------------ 1 file changed, 31 insertions(+), 15 deletions(-) diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index a43bf9e..e9689ad 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -6,42 +6,44 @@ description: You can learn about the initialization in the documentation of the # Initialization -This guide will give you detailed instructions on how to create RichText on a page to enrich your application with features of the RichText editor. Take the following steps to get a ready-to-use component: +This guide explains how to add RichText to a page. Follow these steps to get a ready-to-use editor: -1. [Include the RichText source files on a page](#including-source-files). -2. [Create a container for RichText](#creating-container). -3. [Initialize RichText with the object constructor](#initializing-richtext). +1. [Include the source files on a page](#include-the-source-files). +2. [Create a container for RichText](#create-a-container). +3. [Initialize RichText with the object constructor](#initialize-richtext). -## Including source files +## Include the source files -[Download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it into a folder of your project. +Add the RichText JavaScript and CSS files to your project to use the editor on a page. [Download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack the contents into a folder of your project. -To create RichText, you need to include 2 source files on your page: +To create RichText, include two source files on your page: - *richtext.js* - *richtext.css* -Make sure that you set correct relative paths to the source files: +Reference the files in your HTML with correct relative paths: ~~~html title="index.html" ~~~ -## Creating container +## Create a container -Add a container for RichText and give it an ID, for example *"root"*: +Add a container for RichText with an ID such as *"root"*: ~~~jsx title="index.html"
~~~ -## Initializing RichText +## Initialize RichText Initialize RichText with the `richtext.Richtext` constructor. The constructor takes two parameters: -- an HTML container (the ID of the HTML container) -- an object with configuration properties. [See the full list here](#configuration-properties) +- a container — a CSS selector or a DOM element +- a configuration object with the editor properties. See the [full list of properties](#configuration-properties) below + +The following code snippet creates a RichText instance inside a container with the ID `"root"`: ~~~jsx title="index.html" // create RichText @@ -52,12 +54,26 @@ const editor = new richtext.Richtext("#root", { ### Configuration properties +Pass any configuration option as a key of the second constructor argument. + :::note -The full list of properties to configure **RichText** can be found [**here**](api/overview/properties_overview.md). +For the full list of configuration properties, see the [Properties overview](api/overview/properties_overview.md). ::: +## Destroy the RichText instance + +Call the [`destructor()`](api/methods/destructor.md) method to remove the RichText HTML and detach all related events: + +~~~jsx +const editor = new richtext.Richtext("#root", { + // configuration properties +}); + +editor.destructor(); +~~~ + ## Example -In this snippet you can see how to initialize **RichText** with the initial data: +The example below initializes RichText with the menubar enabled: From af82ac81e6657aba06f981f7097b14b37c168a96 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 13 May 2026 22:55:36 +0300 Subject: [PATCH 03/21] Rewrite the Localization guide --- docs/guides/localization.md | 46 ++++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/docs/guides/localization.md b/docs/guides/localization.md index f29e8cd..37c5735 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -6,11 +6,11 @@ description: You can learn about the localization in the documentation of the DH # Localization -You can localize all labels in the interface of JavaScript RichText. For this you need to create a new locale or modify a built-in one and apply it to RichText. +RichText supports localization of all interface labels. Create a new locale or modify a built-in one, then apply the locale to the editor. ## Default locale -The **English** locale is used by default: +By default, RichText applies the English locale: ~~~jsx const en = { @@ -158,11 +158,11 @@ const en = { ~~~ :::info -Besides the default ***en*** locale (*English*), RichText also includes the built-in ***de*** (*German*) and ***cn*** (*Chinese*) ones. +RichText also ships with the built-in German (`de`) and Chinese (`cn`) locales. Access any built-in locale through the `richtext.locales` namespace: `richtext.locales.en`, `richtext.locales.de`, `richtext.locales.cn`. :::
-de locale +de locale ~~~jsx const de = { @@ -311,12 +311,12 @@ const de = {
-cn locale +cn locale ~~~jsx const cn = { richtext: { - // buttons/actions, + // buttons/actions Undo: "撤销", Redo: "重做", Style: "样式", @@ -459,16 +459,40 @@ const cn = { ~~~
-## Custom locale +## Apply a custom locale + +To apply a custom locale, follow these steps: + +- Create a locale object (or modify a built-in one) with translations for all interface labels. +- Apply the locale through the [`locale`](api/config/locale.md) property at initialization or through the [`setLocale()`](api/methods/set-locale.md) method at runtime. + +### Apply the locale at initialization + +Pass the locale to the [`locale`](api/config/locale.md) property in the constructor configuration: + +~~~jsx +const editor = new richtext.Richtext("#root", { + locale: richtext.locales.de + // other configuration properties +}); +~~~ + +### Switch the locale at runtime -To apply a custom locale you need to: +Call the [`setLocale()`](api/methods/set-locale.md) method to change the locale after initialization: -- create a custom locale (or modify the default one) and provide translations for all text labels (it can be any language you need) +~~~jsx +editor.setLocale(richtext.locales.cn); +~~~ -- apply the new locale to **RichText** via its [`locale`](api/config/locale.md) property or use the [`setLocale()`](api/methods/set-locale.md) method +To restore the default English locale, call [`setLocale()`](api/methods/set-locale.md) without arguments or with `null`: + +~~~jsx +editor.setLocale(); +~~~ ## Example -In this snippet you can see how to switch through several locales: +The example below switches RichText through several locales: From a183a4c958e473bb77295a1bc3acf52f815fa35d Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 13 May 2026 22:55:59 +0300 Subject: [PATCH 04/21] Rewrite the TypeScript Support guide --- docs/guides/typescript_support.md | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/docs/guides/typescript_support.md b/docs/guides/typescript_support.md index ad247d8..4a6aab3 100644 --- a/docs/guides/typescript_support.md +++ b/docs/guides/typescript_support.md @@ -6,16 +6,33 @@ description: You can learn about using typescript with the DHTMLX JavaScript Ric # TypeScript support -Starting from v2.0, the library of DHTMLX RichText provides an ability to use TypeScript definitions. The built-in support of TypeScript works out of the box. +Since v2.0, DHTMLX RichText ships with built-in TypeScript definitions. The definitions work out of the box and require no extra setup. :::note -You can try out the functionality right in our Snippet Tool. +Try out the editor in the Snippet Tool. ::: -## Advantages of using TypeScript +## Advantages of TypeScript -Why do you need to use DHTMLX RichText with TypeScript? +TypeScript with DHTMLX RichText gives you: -The main benefit of TypeScript is that it allows you to significantly increase the efficiency of the development process. +- type safety — the compiler catches misuse of configuration properties and method arguments at build time +- autocompletion — your IDE suggests valid property names, method signatures, and value types as you type +- self-documenting API — type annotations on the configuration object and methods double as inline documentation -The way of building an application becomes more robust as checking the types together with autocompletion allow you to avoid potential mistakes. Besides, TypeScript provides you with information about types of data you should use while working with the API of the DHTMLX RichText library. +## Initialize RichText in TypeScript + +The example below initializes RichText in a TypeScript file. With the bundled type definitions, the compiler offers autocompletion for the constructor arguments and configuration options: + +~~~ts +import { Richtext } from "@dhx/richtext"; + +const editor = new Richtext("#root", { + menubar: true, + layoutMode: "document" +}); +~~~ + +## Reference API types + +The configuration object follows the type annotations documented on each property page in the [Properties overview](api/overview/properties_overview.md). Method signatures appear on the corresponding pages in the [Methods overview](api/overview/methods_overview.md). From bae7d3f1a77f1e3135e8787833b2b58fbfd38e90 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 13 May 2026 22:56:28 +0300 Subject: [PATCH 05/21] Rewrite the Angular integration guide --- docs/guides/integration_with_angular.md | 124 ++++++++++++------------ 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 5525455..42ea229 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -7,87 +7,87 @@ description: You can learn about the integration with Angular in the documentati # Integration with Angular :::tip -You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://v17.angular.io/docs). +Make sure you are familiar with basic Angular concepts and patterns. For a refresher, see the [Angular documentation](https://v17.angular.io/docs). ::: -DHTMLX RichText is compatible with **Angular**. We have prepared code examples on how to use DHTMLX RichText with **Angular**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/angular-richtext-demo). +DHTMLX RichText works with Angular. For a complete code example, see the [GitHub demo](https://github.com/DHTMLX/angular-richtext-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/). +Install [Angular CLI](https://v17.angular.io/cli) and [Node.js](https://nodejs.org/en/) before creating a new project. ::: -Create a new **my-angular-richtext-app** project using Angular CLI. Run the following command for this purpose: +Create a new *my-angular-richtext-app* project with Angular CLI: -~~~json +~~~bash ng new my-angular-richtext-app ~~~ :::note -If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! +Disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when the Angular CLI prompts during project creation. ::: -The command above installs all the necessary tools, so you don't need to run any additional commands. +The command installs all the necessary tools. No additional commands are required. -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Switch to the new app directory: -~~~json +~~~bash cd my-angular-richtext-app ~~~ -Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager: +Install dependencies and start the dev server with the [yarn](https://yarnpkg.com/) package manager: -~~~json +~~~bash yarn yarn start ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on localhost (for example, `http://localhost:3000`). -## Creating RichText +## Create RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +Stop the app and install the RichText package. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only. - -### Step 2. Component creation +Download the [trial RichText package](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial license is valid for 30 days. -Now you need to create an Angular component, to add Richtext into the application. Create the **richtext** folder in the **src/app/** directory, add a new file into it and name it **richtext.component.ts**. +### Step 2. Create the component + +Create an Angular component to add RichText to the application. In the *src/app/* directory, create the *richtext* folder and add a new file named *richtext.component.ts*. #### Import source files -Open the **richtext.component.ts** file and import RichText source files. Note that: +Open *richtext.component.ts* and import the RichText source files. -- if you use PRO version and install the RichText package from a local folder, the imported path looks like this: +For the PRO version installed from a local folder, use: ~~~jsx -import { Richtext} from 'dhx-richtext-package'; +import { Richtext } from 'dhx-richtext-package'; ~~~ -- if you use the trial version of RichText, specify the following path: +For the trial version, use: ~~~jsx -import { Richtext} from '@dhx/trial-richtext'; +import { Richtext } from '@dhx/trial-richtext'; ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This tutorial uses the trial version of RichText. -#### Set containers and initialize the Richtext +#### Set the container and initialize RichText -To display RichText on the page, you need to set a container for RichText, and initialize the component using the corresponding constructor: +Set a container element for RichText and initialize the component with the `Richtext` constructor inside `ngOnInit()`. Call the [`destructor()`](api/methods/destructor.md) method inside `ngOnDestroy()` to clean up when Angular destroys the component: ~~~jsx {} title="richtext.component.ts" -import { Richtext} from '@dhx/trial-richtext'; -import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; +import { Richtext } from '@dhx/trial-richtext'; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; @Component({ encapsulation: ViewEncapsulation.None, - selector: "richtext", // a template name used in the "app.component.ts" file as + selector: "richtext", // use the "richtext" selector in app.component.ts as styleUrls: ["./richtext.component.css"], // include the css file template: `
@@ -95,7 +95,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} }) export class RichTextComponent implements OnInit, OnDestroy { - // initialize container for RichText + // container for RichText @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; private _editor!: Richtext; @@ -106,20 +106,20 @@ export class RichTextComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - this._editor.destructor(); // destruct RichText + this._editor.destructor(); // destroy RichText } } ~~~ -#### Adding styles +#### Add styles -To display RichText correctly, you need to provide the corresponding styles. For this purpose, you can create the **richtext.component.css** file in the **src/app/richtext/** directory and specify important styles for RichText and its container: +Provide the required styles for RichText. Create the *richtext.component.css* file in the *src/app/richtext/* directory with the styles for RichText and its container: ~~~css title="richtext.component.css" /* import RichText styles */ @import "@dhx/trial-richtext/dist/richtext.css"; -/* specify styles for initial page */ +/* base page styles */ html, body{ height: 100%; @@ -127,21 +127,21 @@ body{ margin: 0; } -/* specify styles for RichText container */ +/* RichText container */ .component_container { height: 100%; margin: 0 auto; } -/* specify styles for RichText widget */ +/* RichText widget */ .widget { height: calc(100% - 56px); } ~~~ -#### Loading data +#### Load data -To add data into RichText, you need to provide a data set. You can create the **data.ts** file in the **src/app/richtext/** directory and add some data into it: +Provide data for RichText. Create the *data.ts* file in the *src/app/richtext/* directory: ~~~jsx {} title="data.ts" export function getData() { @@ -153,12 +153,12 @@ export function getData() { } ~~~ -Then open the ***richtext.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of RichText within the `ngOnInit()` method, as shown below: +Open *richtext.component.ts*. Import the data and pass the `value` property to the RichText configuration inside `ngOnInit()`: ~~~jsx {} title="richtext.component.ts" -import { Richtext} from '@dhx/trial-richtext'; +import { Richtext } from '@dhx/trial-richtext'; import { getData } from "./data"; // import data -import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; @Component({ encapsulation: ViewEncapsulation.None, @@ -172,10 +172,10 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} export class RichTextComponent implements OnInit, OnDestroy { @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; - private _editor!: RichText; + private _editor!: Richtext; ngOnInit() { - const { value } = getData(); // initialize data property + const { value } = getData(); // extract the value from the data module this._editor = new Richtext(this.richtext_container.nativeElement, { value // other configuration properties @@ -188,12 +188,12 @@ export class RichTextComponent implements OnInit, OnDestroy { } ~~~ -You can also use the [`setValue()`](api/methods/set-value.md) method inside the `ngOnInit()` method of Angular to load data into RichText. +Alternatively, call the [`setValue()`](api/methods/set-value.md) method inside `ngOnInit()` to load data into RichText: ~~~jsx {} title="richtext.component.ts" -import { Richtext} from '@dhx/trial-richtext'; +import { Richtext } from '@dhx/trial-richtext'; import { getData } from "./data"; // import data -import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; @Component({ encapsulation: ViewEncapsulation.None, @@ -207,16 +207,16 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} export class RichTextComponent implements OnInit, OnDestroy { @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; - private _editor!: RichText; + private _editor!: Richtext; ngOnInit() { - const { value } = getData(); // initialize data property + const { value } = getData(); // extract the value from the data module this._editor = new Richtext(this.richtext_container.nativeElement, { // other configuration properties }); // apply the data via the setValue() method - this._editor.setValue({ value }); + this._editor.setValue(value); } ngOnDestroy(): void { @@ -225,13 +225,13 @@ export class RichTextComponent implements OnInit, OnDestroy { } ~~~ -Now the RichText component is ready to use. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties. +The RichText component is ready to use. Angular renders the editor with data when the `` element mounts. For the full list of configuration options, see the [RichText API overview](api/overview/main_overview.md). -#### Handling events +#### Handle events -When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +RichText fires events on user actions. Subscribe to events with the [`api.on()`](api/internal/on.md) method to react to user input. See the [full list of events](api/overview/events_overview.md). -Open the **richtext.component.ts** file and complete the `ngOnInit()` method in the following way: +Open *richtext.component.ts* and update the `ngOnInit()` method. The example below logs a message on every [`print`](api/events/print.md) event: ~~~jsx {} title="richtext.component.ts" // ... @@ -248,9 +248,9 @@ ngOnDestroy(): void { } ~~~ -### Step 3. Adding RichText into the app +### Step 3. Add RichText to the app -To add the ***RichTextComponent*** component into your app, open the ***src/app/app.component.ts*** file and replace the default code with the following one: +Open *src/app/app.component.ts* and replace the default code with the `` selector: ~~~jsx {} title="app.component.ts" import { Component } from "@angular/core"; @@ -264,7 +264,7 @@ export class AppComponent { } ~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *RichTextComponent* as shown below: +Create *src/app/app.module.ts* and declare the `RichTextComponent`: ~~~jsx {} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -281,7 +281,7 @@ import { RichTextComponent } from "./richtext/richtext.component"; export class AppModule {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +Finally, open *src/main.ts* and replace the contents with the following: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -291,10 +291,10 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -After that, you can start the app to see RichText loaded with data on a page. +Start the app to see RichText render with data on the page.
![RichText initialization](../assets/trial_richtext.png)
-Now you know how to integrate DHTMLX RichText with Angular. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo). +You now have a working RichText integration in Angular. Customize the code to fit your needs. A full advanced example is available on [GitHub](https://github.com/DHTMLX/angular-richtext-demo). From 6167bf4b34084dcd90c5ac6a4d204be5327382cc Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 13 May 2026 22:57:12 +0300 Subject: [PATCH 06/21] Rewrite the React integration guide --- docs/guides/integration_with_react.md | 102 +++++++++++++------------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index 1244911..856d11a 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -7,99 +7,99 @@ description: You can learn about the integration with React in the documentation # Integration with React :::tip -You should be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, please refer to the [**React documentation**](https://react.dev/learn). +Make sure you are familiar with basic [React](https://react.dev) concepts and patterns. For a refresher, see the [React documentation](https://react.dev/learn). ::: -DHTMLX RichText is compatible with **React**. We have prepared code examples on how to use DHTMLX RichText with **React**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/react-richtext-demo). +DHTMLX RichText works with React. For a complete code example, see the [GitHub demo](https://github.com/DHTMLX/react-richtext-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). +Install [Node.js](https://nodejs.org/en/) and (optionally) [Vite](https://vite.dev/) before creating a new project. ::: -You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-richtext-app**: +Create a basic React project (or use React with Vite) and name it *my-react-richtext-app*: -~~~json +~~~bash npx create-react-app my-react-richtext-app ~~~ -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Switch to the new app directory: -~~~json +~~~bash cd my-react-richtext-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Install dependencies and start the dev server with a package manager. -- if you use [**yarn**](https://yarnpkg.com/), run the following commands: +For [yarn](https://yarnpkg.com/), run: -~~~json +~~~bash yarn yarn start ~~~ -- if you use [**npm**](https://www.npmjs.com/), run the following commands: +For [npm](https://www.npmjs.com/), run: -~~~json +~~~bash npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on localhost (for example, `http://localhost:3000`). -## Creating RichText +## Create RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +Stop the app and install the RichText package. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only. +Download the [trial RichText package](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial license is valid for 30 days. -### Step 2. Component creation +### Step 2. Create the component -Now you need to create a React component, to add a RichText into the application. Create a new file in the ***src/*** directory and name it ***Richtext.jsx***. +Create a React component to add RichText to the application. In the *src/* directory, create a new file named *Richtext.jsx*. -#### Importing source files +#### Import source files -Open the ***Richtext.jsx*** file and import RichText source files. Note that: +Open *Richtext.jsx* and import the RichText source files. -- if you use PRO version and install the RichText package from a local folder, the import paths look like this: +For the PRO version installed from a local folder, use: ~~~jsx title="Richtext.jsx" -import { Richtext} from 'dhx-richtext-package'; +import { Richtext } from 'dhx-richtext-package'; import 'dhx-richtext-package/dist/richtext.css'; ~~~ -- if you use the trial version of RichText, specify the following paths: +For the trial version, use: ~~~jsx title="Richtext.jsx" -import { Richtext} from '@dhx/trial-richtext'; +import { Richtext } from '@dhx/trial-richtext'; import "@dhx/trial-richtext/dist/richtext.css"; ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This tutorial uses the trial version of RichText. -#### Setting containers and adding Richtext +#### Set the container and initialize RichText -To display RichText on the page, you need to create container for RichText and initialize the component using the corresponding constructors: +Set a container element for RichText and initialize the component with the `Richtext` constructor inside `useEffect()`. Call the [`destructor()`](api/methods/destructor.md) method in the cleanup function to remove RichText when React unmounts the component: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; -import { Richtext} from '@dhx/trial-richtext'; +import { Richtext } from '@dhx/trial-richtext'; import '@dhx/trial-richtext/dist/richtext.css'; // include RichText styles export default function RichTextComponent(props) { - let richtext_container = useRef(); // initialize container for RichText + let richtext_container = useRef(); // container for RichText useEffect(() => { // initialize the RichText component const editor = new Richtext(richtext_container.current, {}); return () => { - editor.destructor(); // destruct RichText + editor.destructor(); // destroy RichText }; }, []); @@ -109,12 +109,12 @@ export default function RichTextComponent(props) { } ~~~ -#### Adding styles +#### Add styles -To display RichText correctly, you need to specify important styles for RichText and its container in the main css file of the project: +Provide the required styles for RichText. Add the styles to the main CSS file of the project: ~~~css title="index.css" -/* specify styles for initial page */ +/* base page styles */ html, body, #root { @@ -123,21 +123,21 @@ body, margin: 0; } -/* specify styles for RichText container */ +/* RichText container */ .component_container { height: 100%; margin: 0 auto; } -/* specify styles for RichText widget */ +/* RichText widget */ .widget { height: calc(100% - 56px); } ~~~ -#### Loading data +#### Load data -To add data into the RichText, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +Provide data for RichText. Create the *data.js* file in the *src/* directory: ~~~jsx {} title="data.js" export function getData() { @@ -149,7 +149,7 @@ export function getData() { } ~~~ -Then open the ***App.js*** file and import data. After this you can pass data into the new created `` components as **props**: +Open *App.js* and import the data. Pass the value to the `` component as a prop: ~~~jsx {2,5-6} title="App.js" import RichText from "./Richtext"; @@ -163,11 +163,11 @@ function App() { export default App; ~~~ -Go to the ***Richtext.jsx*** file and apply the passed **props** to the RichText configuration object: +Open *Richtext.jsx* and pass `props.value` to the RichText configuration: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; -import { Richtext} from "@dhx/trial-richtext"; +import { Richtext } from "@dhx/trial-richtext"; import "@dhx/trial-richtext/dist/richtext.css"; export default function RichTextComponent(props) { @@ -190,11 +190,11 @@ export default function RichTextComponent(props) { } ~~~ -You can also use the [`setValue()`](api/methods/set-value.md) method inside the `useEffect()` method of React to load data into RichText: +Alternatively, call the [`setValue()`](api/methods/set-value.md) method inside `useEffect()` to load data into RichText: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; -import { Richtext} from "@dhx/trial-richtext"; +import { Richtext } from "@dhx/trial-richtext"; import "@dhx/trial-richtext/dist/richtext.css"; export default function RichTextComponent(props) { @@ -220,13 +220,13 @@ export default function RichTextComponent(props) { } ~~~ -Now the RichText component is ready. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties. +The RichText component is ready to use. React renders the editor with data when the `` element mounts. For the full list of configuration options, see the [RichText API overview](api/overview/main_overview.md). -#### Handling events +#### Handle events -When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +RichText fires events on user actions. Subscribe to events with the [`api.on()`](api/internal/on.md) method to react to user input. See the [full list of events](api/overview/events_overview.md). -Open ***Richtext.jsx*** and complete the `useEffect()` method in the following way: +Open *Richtext.jsx* and update the `useEffect()` hook. The example below logs a message on every [`print`](api/events/print.md) event: ~~~jsx {} title="Richtext.jsx" // ... @@ -244,10 +244,10 @@ useEffect(() => { // ... ~~~ -After that, you can start the app to see RichText loaded with data on a page. +Start the app to see RichText render with data on the page.
![RichText initialization](../assets/trial_richtext.png)
-Now you know how to integrate DHTMLX RichText with React. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/react-richtext-demo). +You now have a working RichText integration in React. Customize the code to fit your needs. A full advanced example is available on [GitHub](https://github.com/DHTMLX/react-richtext-demo). From fdcf4756c7755f3f101388fcf4dc352086716c08 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 13 May 2026 22:57:24 +0300 Subject: [PATCH 07/21] Rewrite the Svelte integration guide --- docs/guides/integration_with_svelte.md | 155 +++++++++++++------------ 1 file changed, 81 insertions(+), 74 deletions(-) diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index db9839f..94045b4 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -7,104 +7,101 @@ description: You can learn about the integration with Svelte in the documentatio # Integration with Svelte :::tip -You should be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, please refer to the [**Svelte documentation**](https://svelte.dev/). +Make sure you are familiar with basic [Svelte](https://svelte.dev/) concepts and patterns. For a refresher, see the [Svelte documentation](https://svelte.dev/). ::: -DHTMLX RichText is compatible with **Svelte**. We have prepared code examples on how to use DHTMLX RichText with **Svelte**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). +DHTMLX RichText works with Svelte. For a complete code example, see the [GitHub demo](https://github.com/DHTMLX/svelte-richtext-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). +Install [Node.js](https://nodejs.org/en/) and (optionally) [Vite](https://vite.dev/) before creating a new project. ::: -There are several ways of creating a **Svelte** project: +Create a Svelte project with one of the supported scaffolders: -- you can use the [**SvelteKit**](https://kit.svelte.dev/) +- [SvelteKit](https://kit.svelte.dev/) — full framework setup +- [Vite](https://vite.dev/) — minimal Svelte + Vite -or +For details on both options, see the [Svelte project guide](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). To start a Vite-based project, run: -- you can also use **Svelte with Vite** (but without SvelteKit): - -~~~json +~~~bash npm create vite@latest ~~~ -Check the details in the [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). - -### Installation of dependencies +### Install dependencies -Let's name the project as **my-svelte-richtext-app** and go to the app directory: +Name the project *my-svelte-richtext-app* and switch to the app directory: -~~~json +~~~bash cd my-svelte-richtext-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Install dependencies and start the dev server with a package manager. -- if you use [**yarn**](https://yarnpkg.com/), run the following commands: +For [yarn](https://yarnpkg.com/), run: -~~~json +~~~bash yarn -yarn start +yarn dev ~~~ -- if you use [**npm**](https://www.npmjs.com/), run the following commands: +For [npm](https://www.npmjs.com/), run: -~~~json +~~~bash npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on localhost (for example, `http://localhost:3000`). -## Creating RichText +## Create RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +Stop the app and install the RichText package. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only. +Download the [trial RichText package](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial license is valid for 30 days. -### Step 2. Component creation +### Step 2. Create the component -Now you need to create a Svelte component, to add a RichText into the application. Let's create a new file in the ***src/*** directory and name it ***Richtext.svelte***. +Create a Svelte component to add RichText to the application. In the *src/* directory, create a new file named *Richtext.svelte*. -#### Importing source files +#### Import source files -Open the ***Richtext.svelte*** file and import RichText source files. Note that: +Open *Richtext.svelte* and import the RichText source files. -- if you use PRO version and install the RichText package from a local folder, the import paths look like this: +For the PRO version installed from a local folder, use: ~~~html title="Richtext.svelte" ~~~ -- if you use the trial version of RichText, specify the following paths: +For the trial version, use: ~~~html title="Richtext.svelte" ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This tutorial uses the trial version of RichText. -#### Setting containers and adding RichText +#### Set the container and initialize RichText -To display RichText on the page, you need to create container for RichText, and initialize the component using the corresponding constructor: +Set a container element for RichText and initialize the component inside `onMount()`. Call the [`destructor()`](api/methods/destructor.md) method inside `onDestroy()` to remove RichText when Svelte unmounts the component: ~~~html {} title="Richtext.svelte" @@ -122,11 +119,36 @@ onDestroy(() => {
~~~ -#### Loading data +#### Add styles + +Provide the required styles for RichText. Add the styles to the main CSS file of the project (for example, *src/app.css*): + +~~~css title="app.css" +/* base page styles */ +html, +body { + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText widget */ +.widget { + height: calc(100% - 56px); +} +~~~ -To add data into the RichText, we need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +#### Load data -~~~jsx {} title="data.ts" +Provide data for RichText. Create the *data.js* file in the *src/* directory: + +~~~jsx {} title="data.js" export function getData() { const value = `

RichText 2.0

@@ -136,7 +158,7 @@ export function getData() { } ~~~ -Then open the ***App.svelte*** file, import data, and pass it into the new created `` components as **props**: +Open *App.svelte*, import the data, and pass the value to the `` component as a prop: ~~~html {} title="App.svelte" @@ -179,7 +201,7 @@ onDestroy(() => { ~~~ -You can also use the [`setValue()`](/api/methods/set-value.md) method inside the `onMount()` method of Svelte to load data into RichText: +Alternatively, call the [`setValue()`](api/methods/set-value.md) method inside `onMount()` to load data into RichText: ~~~html {} title="Richtext.svelte" @@ -210,13 +232,13 @@ onDestroy(() => { ~~~ -Now the RichText component is ready to use. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties. +The RichText component is ready to use. Svelte renders the editor with data when the `` element mounts. For the full list of configuration options, see the [RichText API overview](api/overview/main_overview.md). -#### Handling events +#### Handle events -When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +RichText fires events on user actions. Subscribe to events with the [`api.on()`](api/internal/on.md) method to react to user input. See the [full list of events](api/overview/events_overview.md). -Open ***Richtext.svelte*** and complete the `onMount()` method in the following way: +Open *Richtext.svelte* and update the `onMount()` hook. The example below logs a message on every [`print`](api/events/print.md) event: ~~~html {} title="Richtext.svelte" - - -~~~ - -After that, you can start the app to see RichText loaded with data on a page. +Start the app to see RichText render with data on the page.
![RichText initialization](../assets/trial_richtext.png)
-Now you know how to integrate DHTMLX RichText with Svelte. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). +You now have a working RichText integration in Svelte. Customize the code to fit your needs. A full advanced example is available on [GitHub](https://github.com/DHTMLX/svelte-richtext-demo). From cf3d8b05a131c0c080c00083642fb4bc927c7d48 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 13 May 2026 22:57:42 +0300 Subject: [PATCH 08/21] Rewrite the Vue integration guide --- docs/guides/integration_with_vue.md | 110 ++++++++++++++-------------- 1 file changed, 55 insertions(+), 55 deletions(-) diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md index 46db308..bfcc197 100644 --- a/docs/guides/integration_with_vue.md +++ b/docs/guides/integration_with_vue.md @@ -7,96 +7,96 @@ description: You can learn about the integration with Vue in the documentation o # Integration with Vue :::tip -You should be familiar with the basic concepts and patterns of [**Vue**](https://vuejs.org/) before reading this documentation. To refresh your knowledge, please refer to the [**Vue 3 documentation**](https://vuejs.org/guide/introduction.html#getting-started). +Make sure you are familiar with basic [Vue](https://vuejs.org/) concepts and patterns. For a refresher, see the [Vue 3 documentation](https://vuejs.org/guide/introduction.html#getting-started). ::: -DHTMLX RichText is compatible with **Vue**. We have prepared code examples on how to use DHTMLX RichText with **Vue 3**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/vue-richtext-demo). +DHTMLX RichText works with Vue. For a complete code example, see the [GitHub demo](https://github.com/DHTMLX/vue-richtext-demo). -## Creating a project +## Create a project :::info -Before you start to create a new project, install [**Node.js**](https://nodejs.org/en/). +Install [Node.js](https://nodejs.org/en/) before creating a new project. ::: -To create a **Vue** project, run the following command: +Create a Vue project with the official scaffolding tool: -~~~json +~~~bash npm create vue@latest ~~~ -This command installs and executes `create-vue`, the official **Vue** project scaffolding tool. Check the details in the [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). +The command installs and runs `create-vue`. For details, see the [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). -Let's name the project as **my-vue-richtext-app**. +Name the project *my-vue-richtext-app*. -### Installation of dependencies +### Install dependencies -Go to the app directory: +Switch to the app directory: -~~~json +~~~bash cd my-vue-richtext-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Install dependencies and start the dev server with a package manager. -- if you use [**yarn**](https://yarnpkg.com/), run the following commands: +For [yarn](https://yarnpkg.com/), run: -~~~jsx +~~~bash yarn -yarn start // or yarn dev +yarn dev ~~~ -- if you use [**npm**](https://www.npmjs.com/), run the following commands: +For [npm](https://www.npmjs.com/), run: -~~~json +~~~bash npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on localhost (for example, `http://localhost:3000`). -## Creating RichText +## Create RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +Stop the app and install the RichText package. -### Step 1. Package installation +### Step 1. Install the package -Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only. +Download the [trial RichText package](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial license is valid for 30 days. -### Step 2. Component creation +### Step 2. Create the component -Now you need to create a Vue component, to add RichText into the application. Create a new file in the ***src/components/*** directory and name it ***Richtext.vue***. +Create a Vue component to add RichText to the application. In the *src/components/* directory, create a new file named *Richtext.vue*. #### Import source files -Open the ***Richtext.vue*** file and import RichText source files. Note that: +Open *Richtext.vue* and import the RichText source files. -- if you use PRO version and install the RichText package from a local folder, the import paths look like this: +For the PRO version installed from a local folder, use: ~~~html title="Richtext.vue" ~~~ -- if you use the trial version of RichText, specify the following paths: +For the trial version, use: ~~~html title="Richtext.vue" ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This tutorial uses the trial version of RichText. -#### Setting containers and adding Richtext +#### Set the container and initialize RichText -To display Richtext on the page, you need to create a container for RichText and initialize the component using the corresponding constructor: +Set a container element for RichText and initialize the component with the `Richtext` constructor inside `mounted()`. Call the [`destructor()`](api/methods/destructor.md) method inside `unmounted()` to remove RichText when Vue unmounts the component: ~~~html {} title="Richtext.vue" @@ -118,37 +118,37 @@ export default { ~~~ -#### Adding styles +#### Add styles -To display RichText correctly, you need to specify important styles for RichText and its container in the main css file of the project: +Provide the required styles for RichText. Add the styles to the main CSS file of the project: ~~~css title="main.css" -/* specify styles for initial page */ +/* base page styles */ html, body, -#app { /* make sure that you use the #app root container */ +#app { /* use the #app root container */ height: 100%; padding: 0; margin: 0; } -/* specify styles for RichText container */ +/* RichText container */ .component_container { height: 100%; margin: 0 auto; } -/* specify styles for RichText widget */ +/* RichText widget */ .widget { height: calc(100% - 56px); } ~~~ -#### Loading data +#### Load data -To add data into the RichText, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +Provide data for RichText. Create the *data.js* file in the *src/* directory: -~~~jsx {} title="data.ts" +~~~jsx {} title="data.js" export function getData() { const value = `

RichText 2.0

@@ -158,7 +158,7 @@ export function getData() { } ~~~ -Then open the ***App.vue*** file, import data, and initialize it via the inner `data()` method. After this you can pass data into the new created `` component as **props**: +Open *App.vue*, import the data, and initialize it through the `data()` method. Pass the value to the `` component as a prop: ~~~html {} title="App.vue" @@ -43,10 +43,9 @@ Initialize RichText with the `richtext.Richtext` constructor. The constructor ta - a container — a CSS selector or a DOM element - a configuration object with the editor properties. See the [full list of properties](#configuration-properties) below -The following code snippet creates a RichText instance inside a container with the ID `"root"`: +The example below initializes RichText in the `#root` container: ~~~jsx title="index.html" -// create RichText const editor = new richtext.Richtext("#root", { // configuration properties }); @@ -54,7 +53,7 @@ const editor = new richtext.Richtext("#root", { ### Configuration properties -Pass any configuration option as a key of the second constructor argument. +Add configuration options as keys of the configuration object. :::note For the full list of configuration properties, see the [Properties overview](api/overview/properties_overview.md). From 99877153ee3e8c068a21c31d155c2225a64f9fa9 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 14 May 2026 15:03:21 +0300 Subject: [PATCH 12/21] Update grammar for Stylization guide --- docs/guides/stylization.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md index 4fbd95e..539b9a5 100644 --- a/docs/guides/stylization.md +++ b/docs/guides/stylization.md @@ -6,9 +6,9 @@ description: You can learn about the styling in the documentation of the DHTMLX # Styling -You can fully customize the appearance of DHTMLX RichText by overriding CSS variables and applying custom styles to specific parts of the widget. +Customize the appearance of DHTMLX RichText by overriding CSS variables on the editor's container and sub-elements. -This guide shows how to apply a **dark theme** and use the CSS class names to style the editor's menubar, toolbar, popup, and content area. +This guide shows how to apply a **dark theme** and target the menubar, toolbar, popup, and content area with CSS class selectors. ## Default structure and class names @@ -65,14 +65,14 @@ These styles apply a dark background, adjust button and icon colors, and improve | ---------------------------- | ------------------------------------ | | `--wx-background` | Background color of editor and popup | | `--wx-background-alt` | Alternate background for menubar | -| `--wx-color-primary` | Accent color for links, blockquotes, and borders of resizing pictures | +| `--wx-color-primary` | Accent color for links, blockquotes, and image resize handles | | `--wx-color-font` | Main font color (for editor, menubar, and toolbar)| | `--wx-color-font-alt` | Alternate font color | | `--wx-color-font-disabled` | Disabled text color (for menubar and toolbar elements)| | `--wx-border` | Border style used across the editor | | `--wx-color-secondary-hover` | Hover state background for buttons within menubar and toolbar | | `--wx-button-active` | Active state background for buttons within menubar and toolbar | -| `--wx-icon-color` | Color for toolbar arrow icons used for dropdown | +| `--wx-icon-color` | Color of the toolbar dropdown arrow icons | | `--wx-popup-border` | Border for popup elements | ## Best practices @@ -81,7 +81,7 @@ These styles apply a dark background, adjust button and icon colors, and improve * Avoid changing layout-related properties (like `display`, `position`) without a strong reason :::tip -For per-tag typography (font family, size, foreground and background per `h1`/`p`/`blockquote`/etc.), use the [`defaultStyles`](api/config/default-styles.md) configuration property together with matching CSS rules. See the [Configuration guide](guides/configuration.md#default-styles) for the full pattern. +For per-tag typography (font family, font size, color, background on `h1`, `p`, `blockquote`, and other block tags), use the [`defaultStyles`](api/config/default-styles.md) configuration property with matching CSS rules. See the [Configuration guide](guides/configuration.md#configure-default-styles) for the full pattern. ::: ## Live demo From 1b9d76ce86fc3b7e42e60c00a55f6e0405503df6 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 14 May 2026 15:03:40 +0300 Subject: [PATCH 13/21] Update grammar for Localization guide --- docs/guides/localization.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/guides/localization.md b/docs/guides/localization.md index 37c5735..1b09cfa 100644 --- a/docs/guides/localization.md +++ b/docs/guides/localization.md @@ -6,7 +6,7 @@ description: You can learn about the localization in the documentation of the DH # Localization -RichText supports localization of all interface labels. Create a new locale or modify a built-in one, then apply the locale to the editor. +RichText supports localization of all interface labels. Create a new locale or modify a built-in one, and apply the result through the editor configuration. ## Default locale @@ -461,10 +461,7 @@ const cn = { ## Apply a custom locale -To apply a custom locale, follow these steps: - -- Create a locale object (or modify a built-in one) with translations for all interface labels. -- Apply the locale through the [`locale`](api/config/locale.md) property at initialization or through the [`setLocale()`](api/methods/set-locale.md) method at runtime. +Create a locale object (or modify a built-in one) with translations for all interface labels. Apply the locale at initialization or switch it at runtime, as shown below. ### Apply the locale at initialization @@ -493,6 +490,6 @@ editor.setLocale(); ## Example -The example below switches RichText through several locales: +The example below cycles through several RichText locales: From 889be36567f4f5060397e9dade9b7e64aac37937 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 14 May 2026 15:03:59 +0300 Subject: [PATCH 14/21] Update grammar for TypeScript support guide --- docs/guides/typescript_support.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guides/typescript_support.md b/docs/guides/typescript_support.md index 4a6aab3..d1c3d2a 100644 --- a/docs/guides/typescript_support.md +++ b/docs/guides/typescript_support.md @@ -6,7 +6,7 @@ description: You can learn about using typescript with the DHTMLX JavaScript Ric # TypeScript support -Since v2.0, DHTMLX RichText ships with built-in TypeScript definitions. The definitions work out of the box and require no extra setup. +Since v2.0, DHTMLX RichText ships with built-in TypeScript definitions that require no extra setup. :::note Try out the editor in the Snippet Tool. @@ -22,7 +22,7 @@ TypeScript with DHTMLX RichText gives you: ## Initialize RichText in TypeScript -The example below initializes RichText in a TypeScript file. With the bundled type definitions, the compiler offers autocompletion for the constructor arguments and configuration options: +The example below initializes RichText in TypeScript with autocompletion from the bundled type definitions: ~~~ts import { Richtext } from "@dhx/richtext"; @@ -35,4 +35,4 @@ const editor = new Richtext("#root", { ## Reference API types -The configuration object follows the type annotations documented on each property page in the [Properties overview](api/overview/properties_overview.md). Method signatures appear on the corresponding pages in the [Methods overview](api/overview/methods_overview.md). +For TypeScript signatures of every configuration property, see the [Properties overview](api/overview/properties_overview.md). For method signatures, see the [Methods overview](api/overview/methods_overview.md). From f087bf092ce91584cb1ac500fac852eadf8a7659 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 14 May 2026 15:04:22 +0300 Subject: [PATCH 15/21] Update grammar for Angular integration guide --- docs/guides/integration_with_angular.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 42ea229..e457d69 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -25,7 +25,7 @@ ng new my-angular-richtext-app ~~~ :::note -Disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when the Angular CLI prompts during project creation. +Disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when the Angular CLI prompts you during project creation. ::: The command installs all the necessary tools. No additional commands are required. @@ -79,7 +79,7 @@ This tutorial uses the trial version of RichText. #### Set the container and initialize RichText -Set a container element for RichText and initialize the component with the `Richtext` constructor inside `ngOnInit()`. Call the [`destructor()`](api/methods/destructor.md) method inside `ngOnDestroy()` to clean up when Angular destroys the component: +Set a container element for RichText and initialize the component with the `Richtext` constructor inside `ngOnInit()`. Call the [`destructor()`](api/methods/destructor.md) method inside `ngOnDestroy()` to clean up: ~~~jsx {} title="richtext.component.ts" import { Richtext } from '@dhx/trial-richtext'; @@ -113,7 +113,7 @@ export class RichTextComponent implements OnInit, OnDestroy { #### Add styles -Provide the required styles for RichText. Create the *richtext.component.css* file in the *src/app/richtext/* directory with the styles for RichText and its container: +Create the *richtext.component.css* file in the *src/app/richtext/* directory with the styles for RichText and its container: ~~~css title="richtext.component.css" /* import RichText styles */ @@ -281,7 +281,7 @@ import { RichTextComponent } from "./richtext/richtext.component"; export class AppModule {} ~~~ -Finally, open *src/main.ts* and replace the contents with the following: +Open *src/main.ts* and replace the contents with the bootstrap code: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -297,4 +297,4 @@ Start the app to see RichText render with data on the page. ![RichText initialization](../assets/trial_richtext.png) -You now have a working RichText integration in Angular. Customize the code to fit your needs. A full advanced example is available on [GitHub](https://github.com/DHTMLX/angular-richtext-demo). +You now have a working RichText integration in Angular. Customize the code to fit your needs. A complete example is available on [GitHub](https://github.com/DHTMLX/angular-richtext-demo). From d78cbb0594fc8c26b20b8a83ba2a44dd02ed1007 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 14 May 2026 15:04:36 +0300 Subject: [PATCH 16/21] Update grammar for React integration guide --- docs/guides/integration_with_react.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index 856d11a..73a882e 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -18,7 +18,7 @@ DHTMLX RichText works with React. For a complete code example, see the [GitHub d Install [Node.js](https://nodejs.org/en/) and (optionally) [Vite](https://vite.dev/) before creating a new project. ::: -Create a basic React project (or use React with Vite) and name it *my-react-richtext-app*: +Create a new *my-react-richtext-app* project with Create React App: ~~~bash npx create-react-app my-react-richtext-app @@ -45,7 +45,7 @@ For [npm](https://www.npmjs.com/), run: ~~~bash npm install -npm run dev +npm start ~~~ The app runs on localhost (for example, `http://localhost:3000`). @@ -84,7 +84,7 @@ This tutorial uses the trial version of RichText. #### Set the container and initialize RichText -Set a container element for RichText and initialize the component with the `Richtext` constructor inside `useEffect()`. Call the [`destructor()`](api/methods/destructor.md) method in the cleanup function to remove RichText when React unmounts the component: +Set a container element for RichText and initialize the component with the `Richtext` constructor inside `useEffect()`. Call the [`destructor()`](api/methods/destructor.md) method in the cleanup function to remove RichText: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; @@ -111,7 +111,7 @@ export default function RichTextComponent(props) { #### Add styles -Provide the required styles for RichText. Add the styles to the main CSS file of the project: +Add the styles for RichText and its container to the main CSS file of the project: ~~~css title="index.css" /* base page styles */ @@ -250,4 +250,4 @@ Start the app to see RichText render with data on the page. ![RichText initialization](../assets/trial_richtext.png) -You now have a working RichText integration in React. Customize the code to fit your needs. A full advanced example is available on [GitHub](https://github.com/DHTMLX/react-richtext-demo). +You now have a working RichText integration in React. Customize the code to fit your needs. A complete example is available on [GitHub](https://github.com/DHTMLX/react-richtext-demo). From 332918cdd80b39163447dfc8f812755d7e2bbe83 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 14 May 2026 15:04:49 +0300 Subject: [PATCH 17/21] Update grammar for Svelte integration guide --- docs/guides/integration_with_svelte.md | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index 94045b4..3553b25 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -7,7 +7,7 @@ description: You can learn about the integration with Svelte in the documentatio # Integration with Svelte :::tip -Make sure you are familiar with basic [Svelte](https://svelte.dev/) concepts and patterns. For a refresher, see the [Svelte documentation](https://svelte.dev/). +Make sure you are familiar with basic [Svelte](https://svelte.dev/) concepts and patterns. For a refresher, see the [Svelte documentation](https://svelte.dev/docs). ::: DHTMLX RichText works with Svelte. For a complete code example, see the [GitHub demo](https://github.com/DHTMLX/svelte-richtext-demo). @@ -18,12 +18,9 @@ DHTMLX RichText works with Svelte. For a complete code example, see the [GitHub Install [Node.js](https://nodejs.org/en/) and (optionally) [Vite](https://vite.dev/) before creating a new project. ::: -Create a Svelte project with one of the supported scaffolders: +This tutorial uses a Vite-based Svelte project. For SvelteKit and other options, see the [Svelte project guide](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). -- [SvelteKit](https://kit.svelte.dev/) — full framework setup -- [Vite](https://vite.dev/) — minimal Svelte + Vite - -For details on both options, see the [Svelte project guide](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). To start a Vite-based project, run: +Start a new Vite project: ~~~bash npm create vite@latest @@ -31,7 +28,7 @@ npm create vite@latest ### Install dependencies -Name the project *my-svelte-richtext-app* and switch to the app directory: +When the scaffolder prompts for a project name, use *my-svelte-richtext-app*. Then switch to the new directory: ~~~bash cd my-svelte-richtext-app @@ -93,7 +90,7 @@ This tutorial uses the trial version of RichText. #### Set the container and initialize RichText -Set a container element for RichText and initialize the component inside `onMount()`. Call the [`destructor()`](api/methods/destructor.md) method inside `onDestroy()` to remove RichText when Svelte unmounts the component: +Set a container element for RichText and initialize the component inside `onMount()`. Call the [`destructor()`](api/methods/destructor.md) method inside `onDestroy()` to remove RichText: ~~~html {} title="Richtext.svelte"