diff --git a/docs/api/config/default-styles.md b/docs/api/config/default-styles.md
index f057af2..fa86f70 100644
--- a/docs/api/config/default-styles.md
+++ b/docs/api/config/default-styles.md
@@ -6,11 +6,11 @@ description: You can learn about the defaultStyles config in the documentation o
 
 # defaultStyles
 
-### Description
+### Description {#description}
 
 @short: Optional. Specifies default style values for specific block types
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 defaultStyles?: {
@@ -101,7 +101,7 @@ 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 assigned to `h2` blocks as well.
 :::
 
-### Default config
+### Default config {#default-config}
 
 ~~~jsx
 const defaultStyles = {
@@ -117,7 +117,7 @@ const defaultStyles = {
 };
 ~~~
 
-### Example
+### Example {#example}
 
 ~~~jsx {3-13}
 // initialize RichText
diff --git a/docs/api/config/fullscreen-mode.md b/docs/api/config/fullscreen-mode.md
index eb8ea90..5e3d0da 100644
--- a/docs/api/config/fullscreen-mode.md
+++ b/docs/api/config/fullscreen-mode.md
@@ -6,23 +6,23 @@ description: You can learn about the fullscreenMode config in the documentation
 
 # fullscreenMode
 
-### Description
+### Description {#description}
 
 @short: Optional. Enables the RichText fullscreen mode
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 fullscreenMode?: boolean; 
 ~~~
 
-### Default config
+### Default config {#default-config}
 
 ~~~jsx
 fullscreenMode: false;
 ~~~
 
-### Example
+### Example {#example}
 
 ~~~jsx {3}
 // initialize RichText
diff --git a/docs/api/config/image-upload-url.md b/docs/api/config/image-upload-url.md
index 761b8c8..b6ef81b 100644
--- a/docs/api/config/image-upload-url.md
+++ b/docs/api/config/image-upload-url.md
@@ -6,17 +6,17 @@ description: You can learn about the imageUploadUrl config in the documentation
 
 # imageUploadUrl
 
-### Description
+### Description {#description}
 
 @short: Optional. Specifies the URL which will be used for image upload
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 imageUploadUrl?: string;
 ~~~
 
-### Example
+### Example {#example}
 
 ~~~jsx {3}
 // initialize RichText
diff --git a/docs/api/config/layout-mode.md b/docs/api/config/layout-mode.md
index 10b21a8..72f7189 100644
--- a/docs/api/config/layout-mode.md
+++ b/docs/api/config/layout-mode.md
@@ -6,11 +6,11 @@ description: You can learn about the layoutMode config in the documentation of t
 
 # layoutMode
 
-### Description
+### Description {#description}
 
 @short: Optional. Specifies the layout mode for the main editor area
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 layoutMode: "classic" | "document";
@@ -18,13 +18,13 @@ layoutMode: "classic" | "document";
 
 The `"classic"` mode represents the edit area that fits the entire page. The `"document"` mode closely represent the real document sizes (sizes used: A4, A5, A6, A7).
 
-### Default config
+### Default config {#default-config}
 
 ~~~jsx
 layoutMode: "classic";
 ~~~
 
-### Example
+### Example {#example}
 
 ~~~jsx {3}
 // initialize RichText
diff --git a/docs/api/config/locale.md b/docs/api/config/locale.md
index 5a9fc14..1a32d41 100644
--- a/docs/api/config/locale.md
+++ b/docs/api/config/locale.md
@@ -6,7 +6,7 @@ description: You can learn about the locale config in the documentation of the D
 
 # locale
 
-### Description
+### Description {#description}
 
 @short: Optional. An object that includes localization labels of RichText
 
@@ -14,13 +14,13 @@ description: You can learn about the locale config in the documentation of the D
 The **locale** object needs to include all labels of RichText with the corresponding translations.
 :::
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 locale?: object;
 ~~~
 
-### Default config
+### Default config {#default-config}
 
 By default, RichText uses the **English** locale. You can set it to the custom locale as well.
 
@@ -28,7 +28,7 @@ By default, RichText uses the **English** locale. You can set it to the custom l
 To change the current locale dynamically, you can use the [**setLocale()**](api/methods/set-locale.md) method of RichText
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {3}
 // initialize RichText
diff --git a/docs/api/config/menubar.md b/docs/api/config/menubar.md
index 8a452f0..e58f106 100644
--- a/docs/api/config/menubar.md
+++ b/docs/api/config/menubar.md
@@ -6,17 +6,17 @@ description: You can learn about the menubar config in the documentation of the
 
 # menubar
 
-### Description
+### Description {#description}
 
 @short: Optional. Enables the top menubar of RichText
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 menubar?: boolean; 
 ~~~
 
-### Example
+### Example {#example}
 
 ~~~jsx {3}
 // initialize RichText
diff --git a/docs/api/config/toolbar.md b/docs/api/config/toolbar.md
index 79e2fe3..304564d 100644
--- a/docs/api/config/toolbar.md
+++ b/docs/api/config/toolbar.md
@@ -6,17 +6,17 @@ description: You can learn about the toolbar config in the documentation of the
 
 # toolbar
 
-### Description
+### Description {#description}
 
 @short: Optional. Enables toolbar and allows users to specify/configure buttons displayed within toolbar
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 toolbar?: boolean | Array<string | { id: string, type: string, label?: string, tooltip?: string, css?: string, handler?: () => any }>;
 ~~~
 
-#### Available buttons within Toolbar
+#### Available buttons within Toolbar {#available-buttons-within-toolbar}
 
 You can specify the following buttons in the RichText toolbar:
 
@@ -66,7 +66,7 @@ new richtext.Richtext("#root", {
 });
 ~~~
 
-#### Custom buttons within Toolbar
+#### Custom buttons within Toolbar {#custom-buttons-within-toolbar}
 
 You can specify custom buttons as objects with the following parameters:
 
@@ -115,7 +115,7 @@ new richtext.Richtext("#root", {
 });
 ~~~
 
-#### Hide Toolbar
+#### Hide Toolbar {#hide-toolbar}
 
 If you need to hide toolbar, set the `toolbar` property to `false` as follows:
 
@@ -126,7 +126,7 @@ new richtext.Richtext("#root", {
 });
 ~~~
 
-### Default config
+### Default config {#default-config}
 
 ~~~jsx
 const defaultToolbarButtons = {
@@ -187,7 +187,7 @@ new richtext.Richtext("#root", {
 ```
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {3-18}
 // initialize RichText
diff --git a/docs/api/config/value.md b/docs/api/config/value.md
index 70d2c71..9db633c 100644
--- a/docs/api/config/value.md
+++ b/docs/api/config/value.md
@@ -6,7 +6,7 @@ description: You can learn about the value config in the documentation of the DH
 
 # value
 
-### Description
+### Description {#description}
 
 @short: Optional. Specifies the initial value (content) displayed within the editor area of RichText
 
@@ -14,13 +14,13 @@ description: You can learn about the value config in the documentation of the DH
 If you want to set the value (content) using custom format, use the built-in [`setValue()`](api/methods/set-value.md) method.
 :::
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 value?: string; 
 ~~~
 
-### Example
+### Example {#example}
 
 ~~~jsx {2}
 new richtext.Richtext("#root", {
diff --git a/docs/api/events/align.md b/docs/api/events/align.md
index c46be2f..06b02ca 100644
--- a/docs/api/events/align.md
+++ b/docs/api/events/align.md
@@ -6,11 +6,11 @@ description: You can learn about the align event in the documentation of the DHT
 
 # align
 
-### Description
+### Description {#description}
 
 @short: Fires when text alignment is changed via the menubar/toolbar or Event Bus methods
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "align": ({ 
@@ -18,7 +18,7 @@ description: You can learn about the align event in the documentation of the DHT
 }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **align** event can take an object with the following parameter:
 
@@ -28,7 +28,7 @@ The callback of the **align** event can take an object with the following parame
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-12}
 // initialize RichText
diff --git a/docs/api/events/clear-text-format.md b/docs/api/events/clear-text-format.md
index feda55d..4061970 100644
--- a/docs/api/events/clear-text-format.md
+++ b/docs/api/events/clear-text-format.md
@@ -6,11 +6,11 @@ description: You can learn about the clear-text-format event in the documentatio
 
 # clear-text-format
 
-### Description
+### Description {#description}
 
 @short: Fires when a text format is cleared via the menubar/toolbar or Event Bus methods
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "clear-text-format": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the clear-text-format event in the documentatio
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-10}
 // initialize RichText
diff --git a/docs/api/events/copy.md b/docs/api/events/copy.md
index 5d74562..2531e8e 100644
--- a/docs/api/events/copy.md
+++ b/docs/api/events/copy.md
@@ -6,11 +6,11 @@ description: You can learn about the copy event in the documentation of the DHTM
 
 # copy
 
-### Description
+### Description {#description}
 
 @short: Fires when copying selected text
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "copy": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the copy event in the documentation of the DHTM
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/events/create-new.md b/docs/api/events/create-new.md
index eb4676b..8a6340e 100644
--- a/docs/api/events/create-new.md
+++ b/docs/api/events/create-new.md
@@ -6,17 +6,17 @@ description: You can learn about the create-new event in the documentation of th
 
 # create-new
 
-### Description
+### Description {#description}
 
 @short: Fires when pressing the "New" option within the menubar or via Event Bus methods
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "create-new": ({ reset?: boolean }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **create-new** event can take an object with the following parameter:
 
@@ -26,7 +26,7 @@ The callback of the **create-new** event can take an object with the following p
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-10}
 // initialize RichText
diff --git a/docs/api/events/cut.md b/docs/api/events/cut.md
index 54a44d3..010c26d 100644
--- a/docs/api/events/cut.md
+++ b/docs/api/events/cut.md
@@ -6,11 +6,11 @@ description: You can learn about the cut event in the documentation of the DHTML
 
 # cut
 
-### Description
+### Description {#description}
 
 @short: Fires when cutting selected text
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "cut": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the cut event in the documentation of the DHTML
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/events/delete-link.md b/docs/api/events/delete-link.md
index 9b4abb6..e6284dc 100644
--- a/docs/api/events/delete-link.md
+++ b/docs/api/events/delete-link.md
@@ -6,11 +6,11 @@ description: You can learn about the delete-link event in the documentation of t
 
 # delete-link
 
-### Description
+### Description {#description}
 
 @short: Fires when deleting a link
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "delete-link": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the delete-link event in the documentation of t
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/events/export.md b/docs/api/events/export.md
index 0691bd5..150a717 100644
--- a/docs/api/events/export.md
+++ b/docs/api/events/export.md
@@ -6,11 +6,11 @@ description: You can learn about the export event in the documentation of the DH
 
 # export
 
-### Description
+### Description {#description}
 
 @short: Fires after pressing the "Export" option in the menubar or via Event Bus methods
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "export": ({ options: IExportOptions; result?: any }) => boolean | void;
@@ -23,7 +23,7 @@ interface IExportOptions {
 }
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of **export** event can take an object with the following parameters:
 
@@ -36,7 +36,7 @@ The callback of **export** event can take an object with the following parameter
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-15}
 // initialize RichText
diff --git a/docs/api/events/import.md b/docs/api/events/import.md
index d3dd7e2..bcc4748 100644
--- a/docs/api/events/import.md
+++ b/docs/api/events/import.md
@@ -6,17 +6,17 @@ description: You can learn about the import event in the documentation of the DH
 
 # import
 
-### Description
+### Description {#description}
 
 @short: Fires after pressing the "Import" option in the menubar or via Event Bus methods
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "import": ({ html?: string }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of **import** event can take an object with the following parameter:
 
@@ -26,7 +26,7 @@ The callback of **import** event can take an object with the following parameter
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-13}
 // initialize RichText
diff --git a/docs/api/events/indent.md b/docs/api/events/indent.md
index 4d400de..4fa7317 100644
--- a/docs/api/events/indent.md
+++ b/docs/api/events/indent.md
@@ -6,17 +6,17 @@ description: You can learn about the indent event in the documentation of the DH
 
 # indent
 
-### Description
+### Description {#description}
 
 @short: Fires when increasing block indention
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "indent": ({ step: number }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **indent** event can take an object with the following parameters:
 
@@ -26,7 +26,7 @@ The callback of the **indent** event can take an object with the following param
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/events/insert-image.md b/docs/api/events/insert-image.md
index 7898511..49ec0cf 100644
--- a/docs/api/events/insert-image.md
+++ b/docs/api/events/insert-image.md
@@ -6,11 +6,11 @@ description: You can learn about the insert-image event in the documentation of
 
 # insert-image
 
-### Description
+### Description {#description}
 
 @short: Fires when inserting image
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "insert-image": (IImageContext) => boolean | void;
@@ -33,7 +33,7 @@ interface IImageContext {
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/events/insert-line.md b/docs/api/events/insert-line.md
index ee1a518..08f3bbb 100644
--- a/docs/api/events/insert-line.md
+++ b/docs/api/events/insert-line.md
@@ -6,11 +6,11 @@ description: You can learn about the insert-line event in the documentation of t
 
 # insert-line
 
-### Description
+### Description {#description}
 
 @short: Fires when inserting horizontal line
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "insert-line": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the insert-line event in the documentation of t
 For handling the inner events you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/events/insert-link.md b/docs/api/events/insert-link.md
index 1db8b8d..f31634a 100644
--- a/docs/api/events/insert-link.md
+++ b/docs/api/events/insert-link.md
@@ -6,17 +6,17 @@ description: You can learn about the insert-link event in the documentation of t
 
 # insert-link
 
-### Description
+### Description {#description}
 
 @short: Fires when inserting link
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "insert-link": ({ url: string }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **update-link** event can take an object with the following parameter:
 
@@ -26,7 +26,7 @@ The callback of the **update-link** event can take an object with the following
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/events/insert-list.md b/docs/api/events/insert-list.md
index 3be5f19..a9c90b7 100644
--- a/docs/api/events/insert-list.md
+++ b/docs/api/events/insert-list.md
@@ -6,11 +6,11 @@ description: You can learn about the insert-list event in the documentation of t
 
 # insert-list
 
-### Description
+### Description {#description}
 
 @short: Fires when inserting list
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "insert-list": ({ type: TListType }) => boolean | void;
@@ -18,7 +18,7 @@ description: You can learn about the insert-list event in the documentation of t
 type TListType = "bulleted" | "numbered";
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **insert-list** event can take an object with the following parameter:
 
@@ -30,7 +30,7 @@ The callback of the **insert-list** event can take an object with the following
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/events/outdent.md b/docs/api/events/outdent.md
index 94f6245..b983a81 100644
--- a/docs/api/events/outdent.md
+++ b/docs/api/events/outdent.md
@@ -6,17 +6,17 @@ description: You can learn about the outdent event in the documentation of the D
 
 # outdent
 
-### Description
+### Description {#description}
 
 @short: Fires when decreasing block indention
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "outdent": ({ step: number }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **outdent** event can take an object with the following parameters:
 
@@ -26,7 +26,7 @@ The callback of the **outdent** event can take an object with the following para
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/events/paste.md b/docs/api/events/paste.md
index fcd7ca9..4fd4aa7 100644
--- a/docs/api/events/paste.md
+++ b/docs/api/events/paste.md
@@ -6,11 +6,11 @@ description: You can learn about the paste event in the documentation of the DHT
 
 # paste
 
-### Description
+### Description {#description}
 
 @short: Fires when pasting content
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "paste": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the paste event in the documentation of the DHT
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/events/print.md b/docs/api/events/print.md
index 21a9247..8bf6b89 100644
--- a/docs/api/events/print.md
+++ b/docs/api/events/print.md
@@ -6,11 +6,11 @@ description: You can learn about the print event in the documentation of the DHT
 
 # print
 
-### Description
+### Description {#description}
 
 @short: Fires when printing document
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "print": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the print event in the documentation of the DHT
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/events/redo.md b/docs/api/events/redo.md
index 06ff24b..7a67def 100644
--- a/docs/api/events/redo.md
+++ b/docs/api/events/redo.md
@@ -6,11 +6,11 @@ description: You can learn about the redo event in the documentation of the DHTM
 
 # redo
 
-### Description
+### Description {#description}
 
 @short: Fires when pressing the "Redo" button in the menubar/toolbar or via Event Bus methods
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "redo": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the redo event in the documentation of the DHTM
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/events/resize-image.md b/docs/api/events/resize-image.md
index 9db126e..bc0ab76 100644
--- a/docs/api/events/resize-image.md
+++ b/docs/api/events/resize-image.md
@@ -6,17 +6,17 @@ description: You can learn about the resize-image event in the documentation of
 
 # resize-image
 
-### Description
+### Description {#description}
 
 @short: Fires when resizing image
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "resize-image": ({ id: number, width: number, height: number }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **resize-image** event can take an object with the following parameters:
 
@@ -28,7 +28,7 @@ The callback of the **resize-image** event can take an object with the following
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/events/set-font-family.md b/docs/api/events/set-font-family.md
index 9626bd7..300c426 100644
--- a/docs/api/events/set-font-family.md
+++ b/docs/api/events/set-font-family.md
@@ -6,17 +6,17 @@ description: You can learn about the set-font-family event in the documentation
 
 # set-font-family
 
-### Description
+### Description {#description}
 
 @short: Fires when setting a font family
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "set-font-family": ({ fontFamily: string }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **set-font-family** event can take an object with the following parameter:
 
@@ -26,7 +26,7 @@ The callback of the **set-font-family** event can take an object with the follow
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-13}
 // initialize RichText
diff --git a/docs/api/events/set-font-size.md b/docs/api/events/set-font-size.md
index 3c68fa6..29d1854 100644
--- a/docs/api/events/set-font-size.md
+++ b/docs/api/events/set-font-size.md
@@ -6,17 +6,17 @@ description: You can learn about the set-font-size event in the documentation of
 
 # set-font-size
 
-### Description
+### Description {#description}
 
 @short: Fires when setting a font size
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "set-font-size": ({ fontSize: string }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **set-font-size** event can take an object with the following parameter:
 
@@ -26,7 +26,7 @@ The callback of the **set-font-size** event can take an object with the followin
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-13}
 // initialize RichText
diff --git a/docs/api/events/set-line-height.md b/docs/api/events/set-line-height.md
index 0dc8832..6fbd26d 100644
--- a/docs/api/events/set-line-height.md
+++ b/docs/api/events/set-line-height.md
@@ -6,17 +6,17 @@ description: You can learn about the set-line-height event in the documentation
 
 # set-line-height
 
-### Description
+### Description {#description}
 
 @short: Fires when setting a line height
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "set-line-height": ({ lineHeight: string }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **set-line-height** event can take an object with the following parameter:
 
@@ -26,7 +26,7 @@ The callback of the **set-line-height** event can take an object with the follow
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-13}
 // initialize RichText
diff --git a/docs/api/events/set-text-color.md b/docs/api/events/set-text-color.md
index b846db2..6679156 100644
--- a/docs/api/events/set-text-color.md
+++ b/docs/api/events/set-text-color.md
@@ -6,11 +6,11 @@ description: You can learn about the set-text-color event in the documentation o
 
 # set-text-color
 
-### Description
+### Description {#description}
 
 @short: Fires when setting a text color and/or a background text color
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "set-text-color": (ITextColor) => boolean | void;
@@ -21,7 +21,7 @@ interface ITextColor {
 }
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **set-text-color** event can take an object with the following parameters:
 
@@ -32,7 +32,7 @@ The callback of the **set-text-color** event can take an object with the followi
 For handling the inner events you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-14}
 // initialize RichText
diff --git a/docs/api/events/set-text-format.md b/docs/api/events/set-text-format.md
index f3c2cd2..ce23da3 100644
--- a/docs/api/events/set-text-format.md
+++ b/docs/api/events/set-text-format.md
@@ -6,11 +6,11 @@ description: You can learn about the set-text-format event in the documentation
 
 # set-text-format
 
-### Description
+### Description {#description}
 
 @short: Fires when setting a text format
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "set-text-format": (ITextFormat) => boolean | void;
@@ -27,7 +27,7 @@ interface ITextFormat {
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **set-text-format** event can take an object with the following parameters:
 
@@ -36,7 +36,7 @@ The callback of the **set-text-format** event can take an object with the follow
 - `strike` - a strike text format
 - `underline` - an underline text format
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-14}
 // initialize RichText
diff --git a/docs/api/events/set-text-style.md b/docs/api/events/set-text-style.md
index 102eb5b..52ddf27 100644
--- a/docs/api/events/set-text-style.md
+++ b/docs/api/events/set-text-style.md
@@ -6,11 +6,11 @@ description: You can learn about the set-text-style event in the documentation o
 
 # set-text-style
 
-### Description
+### Description {#description}
 
 @short: Fires when setting a text style
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "set-text-style": ({ tag: TBlockType }) => boolean | void;
@@ -18,7 +18,7 @@ description: You can learn about the set-text-style event in the documentation o
 type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **set-text-style** event can take an object with the following parameters:
 
@@ -28,7 +28,7 @@ The callback of the **set-text-style** event can take an object with the followi
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-13}
 // initialize RichText
diff --git a/docs/api/events/show-popup.md b/docs/api/events/show-popup.md
index 3ecf004..a6d7ffb 100644
--- a/docs/api/events/show-popup.md
+++ b/docs/api/events/show-popup.md
@@ -6,11 +6,11 @@ description: You can learn about the show-popup event in the documentation of th
 
 # show-popup
 
-### Description
+### Description {#description}
 
 @short: Fires when a popup is shown/hidden
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "show-popup": (IPopupConfig) => boolean | void;
@@ -21,7 +21,7 @@ interface IPopupConfig {
 }
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **show-popup** event can take an object with the following parameters:
 
@@ -32,7 +32,7 @@ The callback of the **show-popup** event can take an object with the following p
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-13}
 // initialize RichText
diff --git a/docs/api/events/subscript.md b/docs/api/events/subscript.md
index b268b3f..b43fcd9 100644
--- a/docs/api/events/subscript.md
+++ b/docs/api/events/subscript.md
@@ -6,11 +6,11 @@ description: You can learn about the subscript event in the documentation of the
 
 # subscript
 
-### Description
+### Description {#description}
 
 @short: Fires when pressing the "Subscript" button in the menubar/toolbar or via Event Bus methods
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "subscript": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the subscript event in the documentation of the
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-10}
 // initialize RichText
diff --git a/docs/api/events/superscript.md b/docs/api/events/superscript.md
index ed283b4..fe70e09 100644
--- a/docs/api/events/superscript.md
+++ b/docs/api/events/superscript.md
@@ -6,11 +6,11 @@ description: You can learn about the superscript event in the documentation of t
 
 # superscript
 
-### Description
+### Description {#description}
 
 @short: Fires when pressing the "Superscript" button in the menubar/toolbar or via Event Bus methods
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "superscript": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the superscript event in the documentation of t
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/events/toggle-fullscreen-mode.md b/docs/api/events/toggle-fullscreen-mode.md
index ad49e57..b7fc36c 100644
--- a/docs/api/events/toggle-fullscreen-mode.md
+++ b/docs/api/events/toggle-fullscreen-mode.md
@@ -6,17 +6,17 @@ description: You can learn about the toggle-fullscreen-mode event in the documen
 
 # toggle-fullscreen-mode
 
-### Description
+### Description {#description}
 
 @short: Fires when toggling the full screen mode
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **toggle-fullscreen-mode** event can take an object with the following parameter:
 
@@ -26,7 +26,7 @@ The callback of the **toggle-fullscreen-mode** event can take an object with the
 For handling the inner events you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/events/toggle-layout-mode.md b/docs/api/events/toggle-layout-mode.md
index e71b2df..6daf119 100644
--- a/docs/api/events/toggle-layout-mode.md
+++ b/docs/api/events/toggle-layout-mode.md
@@ -6,17 +6,17 @@ description: You can learn about the toggle-layout-mode event in the documentati
 
 # toggle-layout-mode
 
-### Description
+### Description {#description}
 
 @short: Fires when toggling the layout mode
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **toggle-layout-mode** event can take an object with the following parameters:
 
@@ -26,7 +26,7 @@ The callback of the **toggle-layout-mode** event can take an object with the fol
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-11}
 // initialize RichText
diff --git a/docs/api/events/toggle-shortcut-info.md b/docs/api/events/toggle-shortcut-info.md
index 4bc2ec6..158429a 100644
--- a/docs/api/events/toggle-shortcut-info.md
+++ b/docs/api/events/toggle-shortcut-info.md
@@ -6,17 +6,17 @@ description: You can learn about the toggle-shortcut-info event in the documenta
 
 # toggle-shortcut-info
 
-### Description
+### Description {#description}
 
 @short: Fires when toggling the shortcut info
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "toggle-shortcut-info": ({ mode?: boolean }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **toggle-shortcut-info** event can take an object with the following parameter:
 
@@ -26,7 +26,7 @@ The callback of the **toggle-shortcut-info** event can take an object with the f
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/events/undo.md b/docs/api/events/undo.md
index ea701da..1cb17b8 100644
--- a/docs/api/events/undo.md
+++ b/docs/api/events/undo.md
@@ -6,11 +6,11 @@ description: You can learn about the undo event in the documentation of the DHTM
 
 # undo
 
-### Description
+### Description {#description}
 
 @short: Fires when pressing the "Undo" button in the menubar/toolbar or via Event Bus methods
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "undo": () => boolean | void;
@@ -20,7 +20,7 @@ description: You can learn about the undo event in the documentation of the DHTM
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/events/update-link.md b/docs/api/events/update-link.md
index 01072fb..7179c62 100644
--- a/docs/api/events/update-link.md
+++ b/docs/api/events/update-link.md
@@ -6,17 +6,17 @@ description: You can learn about the update-link event in the documentation of t
 
 # update-link
 
-### Description
+### Description {#description}
 
 @short: Fires when updating link
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 "update-link": ({ id: number, url: string }) => boolean | void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 The callback of the **update-link** event can take an object with the following parameters:
 
@@ -27,7 +27,7 @@ The callback of the **update-link** event can take an object with the following
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-9}
 // initialize RichText
diff --git a/docs/api/internal/detach.md b/docs/api/internal/detach.md
index 4992e37..b87e830 100644
--- a/docs/api/internal/detach.md
+++ b/docs/api/internal/detach.md
@@ -6,27 +6,27 @@ description: You can learn about the on method in the documentation of the DHTML
 
 # api.detach()
 
-### Description
+### Description {#description}
 
 @short: Allows removing/detaching event handlers
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 api.detach( tag: string ): void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 - `tag` - (required) the name of the action tag
 
-### Events
+### Events {#events}
 
 :::info
 The full list of RichText internal events can be found [**here**](api/overview/events_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {6-8,10}
 // initialize RichText
diff --git a/docs/api/internal/exec.md b/docs/api/internal/exec.md
index ba0bcd0..749d44d 100644
--- a/docs/api/internal/exec.md
+++ b/docs/api/internal/exec.md
@@ -6,11 +6,11 @@ description: You can learn about the exec method in the documentation of the DHT
 
 # api.exec()
 
-### Description
+### Description {#description}
 
 @short: Allows triggering inner events
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 api.exec(
@@ -19,18 +19,18 @@ api.exec(
 ): void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 - `event` - (required) an event to be fired
 - `config` - (required) the config object with parameters (see the event to be fired)
 
-### Events
+### Events {#events}
 
 :::info
 The full list of RichText internal events can be found [**here**](api/overview/events_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/internal/get-reactive-state.md b/docs/api/internal/get-reactive-state.md
index 3fc3830..bcc65dd 100644
--- a/docs/api/internal/get-reactive-state.md
+++ b/docs/api/internal/get-reactive-state.md
@@ -6,17 +6,17 @@ description: You can learn about the getReactiveState method in the documentatio
 
 # api.getReactiveState()
 
-### Description
+### Description {#description}
 
 @short: Returns an object with the reactive properties of RichText
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 api.getReactiveState(): object;
 ~~~
 
-### Returns
+### Returns {#returns}
 
 The method returns an object with the following parameters:
 
@@ -33,7 +33,7 @@ The method returns an object with the following parameters:
 }
 ~~~  
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-7}
 // initialize RichText
diff --git a/docs/api/internal/get-state.md b/docs/api/internal/get-state.md
index f666c91..8faea24 100644
--- a/docs/api/internal/get-state.md
+++ b/docs/api/internal/get-state.md
@@ -6,17 +6,17 @@ description: You can learn about the getState method in the documentation of the
 
 # api.getState()
 
-### Description
+### Description {#description}
 
 @short: Returns an object with the StateStore properties of RichText
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 api.getState(): object;
 ~~~
 
-### Returns
+### Returns {#returns}
 
 The method returns an object with the following parameters:
 
@@ -33,7 +33,7 @@ The method returns an object with the following parameters:
 }
 ~~~
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-7}
 // initialize RichText
diff --git a/docs/api/internal/intercept.md b/docs/api/internal/intercept.md
index 4700950..f56719c 100644
--- a/docs/api/internal/intercept.md
+++ b/docs/api/internal/intercept.md
@@ -6,11 +6,11 @@ description: You can learn about the intercept method in the documentation of th
 
 # api.intercept()
 
-### Description
+### Description {#description}
 
 @short: Allows intercepting and preventing the inner events
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 api.intercept(
@@ -19,18 +19,18 @@ api.intercept(
 ): void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 - `event` - (required) an event to be fired
 - `callback` - (required) a callback to be performed (the callback arguments will depend on the event to be fired)
 
-### Events
+### Events {#events}
 
 :::info
 The full list of RichText internal events can be found [**here**](api/overview/events_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-10}
 // create RichText
diff --git a/docs/api/internal/on.md b/docs/api/internal/on.md
index 165aaa2..16a9bbf 100644
--- a/docs/api/internal/on.md
+++ b/docs/api/internal/on.md
@@ -6,11 +6,11 @@ description: You can learn about the on method in the documentation of the DHTML
 
 # api.on()
 
-### Description
+### Description {#description}
 
 @short: Allows attaching a handler to the inner events
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 api.on(
@@ -19,18 +19,18 @@ api.on(
 ): void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 - `event` - (required) an event to be fired
 - `handler` - (required) a handler to be attached (the handler arguments will depend on the event to be fired)
 
-### Events
+### Events {#events}
 
 :::info
 The full list of RichText internal events can be found [**here**](api/overview/events_overview.md)
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-8}
 // initialize RichText
diff --git a/docs/api/internal/set-next.md b/docs/api/internal/set-next.md
index 8a4d3f1..c834daa 100644
--- a/docs/api/internal/set-next.md
+++ b/docs/api/internal/set-next.md
@@ -6,21 +6,21 @@ description: You can learn about the setNext method in the documentation of the
 
 # api.setNext()
 
-### Description
+### Description {#description}
 
 @short: Allows adding some action into the Event Bus order
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 api.setNext(next: any): void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 - `next` - (required) the action to be included into the **Event Bus** order  
 
-### Example
+### Example {#example}
 
 ~~~jsx {10-11}
 const server = "https://some-backend-url";
diff --git a/docs/api/methods/destructor.md b/docs/api/methods/destructor.md
index 58973c0..b50f3b0 100644
--- a/docs/api/methods/destructor.md
+++ b/docs/api/methods/destructor.md
@@ -6,17 +6,17 @@ description: You can learn about the destructor method in the documentation of t
 
 # destructor()
 
-### Description
+### Description {#description}
 
 @short: Removes all HTML elements of RichText, and detaches all related events
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 destructor(): void;
 ~~~
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-6}
 const editor = new richtext.Richtext("#root", {
diff --git a/docs/api/methods/get-value.md b/docs/api/methods/get-value.md
index 4ed50ae..be5699e 100644
--- a/docs/api/methods/get-value.md
+++ b/docs/api/methods/get-value.md
@@ -6,17 +6,17 @@ description: You can learn about the getValue method in the documentation of the
 
 # getValue()
 
-### Description
+### Description {#description}
 
 @short: Returns the RichText value
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 getValue(encoder?: any): string;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 - `encoder` - (optional) a parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default) and `text`
 
@@ -27,7 +27,7 @@ const toTextEncoder = richtext.text.toText; // text encoder
 const toHTMLEncoder = richtext.html.toHTML; // html encoder
 ```
 
-### Example
+### Example {#example}
 
 ~~~jsx {6-8}
 const editor = new richtext.Richtext("#root", {
diff --git a/docs/api/methods/set-config.md b/docs/api/methods/set-config.md
index d54fef0..6fabeb3 100644
--- a/docs/api/methods/set-config.md
+++ b/docs/api/methods/set-config.md
@@ -6,17 +6,17 @@ description: You can learn about the setConfig method in the documentation of th
 
 # setConfig()
 
-### Description
+### Description {#description}
 
 @short: Applies new configuration parameters to RichText
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 setConfig(config: { [key:any]: any }): void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 - `config` - (required) the object of RichText configuration parameters. See the full list of properties [here](api/overview/properties_overview.md)
 
@@ -24,7 +24,7 @@ setConfig(config: { [key:any]: any }): void;
 The `setConfig()` method preserves all the previously set parameters that are not explicitly provided in the `setConfig()` method call.
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {6-8}
 const editor = new richtext.Richtext("#root", {
diff --git a/docs/api/methods/set-locale.md b/docs/api/methods/set-locale.md
index 55610c6..cac3511 100644
--- a/docs/api/methods/set-locale.md
+++ b/docs/api/methods/set-locale.md
@@ -6,17 +6,17 @@ description: You can learn about the setLocale method in the documentation of th
 
 # setLocale()
 
-### Description
+### Description {#description}
 
 @short: Applies a new locale to RichText
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 setLocale(null | locale?: object): void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 - `null` - (optional) resets to the default locale (*English*)
 - `locale` - (optional) the object of data of the new locale to be applied
@@ -25,7 +25,7 @@ setLocale(null | locale?: object): void;
 Use the `setLocale()` method to apply a new locale to RichText. To reset RichText to the default locale, call the `setLocale()` method without arguments (or with a *null* value).
 :::
 
-### Example
+### Example {#example}
 
 ~~~jsx {5-6}
 const editor = new richtext.Richtext("#root", {
diff --git a/docs/api/methods/set-value.md b/docs/api/methods/set-value.md
index 5d40f94..8a9ca34 100644
--- a/docs/api/methods/set-value.md
+++ b/docs/api/methods/set-value.md
@@ -6,17 +6,17 @@ description: You can learn about the setValue method in the documentation of the
 
 # setValue()
 
-### Description
+### Description {#description}
 
 @short: Applies a new value to RichText
 
-### Usage
+### Usage {#usage}
 
 ~~~jsx {}
 setValue: (value: string, encoder?: any): void;
 ~~~
 
-### Parameters
+### Parameters {#parameters}
 
 - `value` - (required) a value to be inserted into the RichText
 - `encoder` - (optional) a custom parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default) and `text`
@@ -28,7 +28,7 @@ const fromTextEncoder = richtext.text.fromText; // text encoder
 const fromHTMLEncoder = richtext.html.fromHTML; // html encoder
 ```
 
-### Example
+### Example {#example}
 
 ~~~jsx {7-8}
 const editor = new richtext.Richtext("#root", {
diff --git a/docs/api/overview/event_bus_methods_overview.md b/docs/api/overview/event_bus_methods_overview.md
index 367bf7d..0e084d9 100644
--- a/docs/api/overview/event_bus_methods_overview.md
+++ b/docs/api/overview/event_bus_methods_overview.md
@@ -11,8 +11,8 @@ These methods are designed for advanced integrations and custom behavior based o
 
 | Name                                              | Description                                  |
 | ------------------------------------------------- | -------------------------------------------- |
-| [](../internal/detach.md)                         | @getshort(../internal/detach.md)             |
-| [](../internal/exec.md)                           | @getshort(../internal/exec.md)               |
-| [](../internal/intercept.md)                      | @getshort(../internal/intercept.md)          |
-| [](../internal/on.md)                             | @getshort(../internal/on.md)                 |
-| [](../internal/set-next.md)                       | @getshort(../internal/set-next.md)           |
+| [](api/internal/detach.md)                         | @getshort(api/internal/detach.md)             |
+| [](api/internal/exec.md)                           | @getshort(api/internal/exec.md)               |
+| [](api/internal/intercept.md)                      | @getshort(api/internal/intercept.md)          |
+| [](api/internal/on.md)                             | @getshort(api/internal/on.md)                 |
+| [](api/internal/set-next.md)                       | @getshort(api/internal/set-next.md)           |
diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md
index 12e92be..957e228 100644
--- a/docs/api/overview/events_overview.md
+++ b/docs/api/overview/events_overview.md
@@ -11,35 +11,35 @@ You can use these events to extend functionality, track user interaction, or tri
 
 | Name                                                   | Description                                   |
 | ------------------------------------------------------ | --------------------------------------------- |
-| [](../events/align.md)                                 | @getshort(../events/align.md)                 |
-| [](../events/clear-text-format.md)                     | @getshort(../events/clear-text-format.md)     |
-| [](../events/copy.md)                                  | @getshort(../events/copy.md)                  |
-| [](../events/create-new.md)                            | @getshort(../events/create-new.md)            |
-| [](../events/cut.md)                                   | @getshort(../events/cut.md)                   |
-| [](../events/delete-link.md)                           | @getshort(../events/delete-link.md)           |
-| [](../events/export.md)                                | @getshort(../events/export.md)                |
-| [](../events/import.md)                                | @getshort(../events/import.md)                |
-| [](../events/indent.md)                                | @getshort(../events/indent.md)                |
-| [](../events/insert-image.md)                          | @getshort(../events/insert-image.md)          |
-| [](../events/insert-line.md)                           | @getshort(../events/insert-line.md)           |
-| [](../events/insert-link.md)                           | @getshort(../events/insert-link.md)           |
-| [](../events/insert-list.md)                           | @getshort(../events/insert-list.md)           |
-| [](../events/outdent.md)                               | @getshort(../events/outdent.md)               |
-| [](../events/paste.md)                                 | @getshort(../events/paste.md)                 |
-| [](../events/print.md)                                 | @getshort(../events/print.md)                 |
-| [](../events/redo.md)                                  | @getshort(../events/redo.md)                  |
-| [](../events/resize-image.md)                          | @getshort(../events/resize-image.md)          |
-| [](../events/set-font-family.md)                       | @getshort(../events/set-font-family.md)       |
-| [](../events/set-font-size.md)                         | @getshort(../events/set-font-size.md)         |
-| [](../events/set-line-height.md)                       | @getshort(../events/set-line-height.md)       |
-| [](../events/set-text-color.md)                        | @getshort(../events/set-text-color.md)        |
-| [](../events/set-text-format.md)                       | @getshort(../events/set-text-format.md)       |
-| [](../events/set-text-style.md)                        | @getshort(../events/set-text-style.md)        |
-| [](../events/show-popup.md)                            | @getshort(../events/show-popup.md)            |
-| [](../events/subscript.md)                             | @getshort(../events/subscript.md)             |
-| [](../events/superscript.md)                           | @getshort(../events/superscript.md)           |
-| [](../events/toggle-fullscreen-mode.md)                | @getshort(../events/toggle-fullscreen-mode.md)|
-| [](../events/toggle-layout-mode.md)                    | @getshort(../events/toggle-layout-mode.md)    |
-| [](../events/toggle-shortcut-info.md)                  | @getshort(../events/toggle-shortcut-info.md)  |
-| [](../events/undo.md)                                  | @getshort(../events/undo.md)                  |
-| [](../events/update-link.md)                           | @getshort(../events/update-link.md)           |
+| [](api/events/align.md)                                 | @getshort(api/events/align.md)                 |
+| [](api/events/clear-text-format.md)                     | @getshort(api/events/clear-text-format.md)     |
+| [](api/events/copy.md)                                  | @getshort(api/events/copy.md)                  |
+| [](api/events/create-new.md)                            | @getshort(api/events/create-new.md)            |
+| [](api/events/cut.md)                                   | @getshort(api/events/cut.md)                   |
+| [](api/events/delete-link.md)                           | @getshort(api/events/delete-link.md)           |
+| [](api/events/export.md)                                | @getshort(api/events/export.md)                |
+| [](api/events/import.md)                                | @getshort(api/events/import.md)                |
+| [](api/events/indent.md)                                | @getshort(api/events/indent.md)                |
+| [](api/events/insert-image.md)                          | @getshort(api/events/insert-image.md)          |
+| [](api/events/insert-line.md)                           | @getshort(api/events/insert-line.md)           |
+| [](api/events/insert-link.md)                           | @getshort(api/events/insert-link.md)           |
+| [](api/events/insert-list.md)                           | @getshort(api/events/insert-list.md)           |
+| [](api/events/outdent.md)                               | @getshort(api/events/outdent.md)               |
+| [](api/events/paste.md)                                 | @getshort(api/events/paste.md)                 |
+| [](api/events/print.md)                                 | @getshort(api/events/print.md)                 |
+| [](api/events/redo.md)                                  | @getshort(api/events/redo.md)                  |
+| [](api/events/resize-image.md)                          | @getshort(api/events/resize-image.md)          |
+| [](api/events/set-font-family.md)                       | @getshort(api/events/set-font-family.md)       |
+| [](api/events/set-font-size.md)                         | @getshort(api/events/set-font-size.md)         |
+| [](api/events/set-line-height.md)                       | @getshort(api/events/set-line-height.md)       |
+| [](api/events/set-text-color.md)                        | @getshort(api/events/set-text-color.md)        |
+| [](api/events/set-text-format.md)                       | @getshort(api/events/set-text-format.md)       |
+| [](api/events/set-text-style.md)                        | @getshort(api/events/set-text-style.md)        |
+| [](api/events/show-popup.md)                            | @getshort(api/events/show-popup.md)            |
+| [](api/events/subscript.md)                             | @getshort(api/events/subscript.md)             |
+| [](api/events/superscript.md)                           | @getshort(api/events/superscript.md)           |
+| [](api/events/toggle-fullscreen-mode.md)                | @getshort(api/events/toggle-fullscreen-mode.md)|
+| [](api/events/toggle-layout-mode.md)                    | @getshort(api/events/toggle-layout-mode.md)    |
+| [](api/events/toggle-shortcut-info.md)                  | @getshort(api/events/toggle-shortcut-info.md)  |
+| [](api/events/undo.md)                                  | @getshort(api/events/undo.md)                  |
+| [](api/events/update-link.md)                           | @getshort(api/events/update-link.md)           |
diff --git a/docs/api/overview/main_overview.md b/docs/api/overview/main_overview.md
index e9e746f..98f9e9c 100644
--- a/docs/api/overview/main_overview.md
+++ b/docs/api/overview/main_overview.md
@@ -6,7 +6,7 @@ description: You can have an API overview of JavaScript RichText in the document
 
 # API overview
 
-## RichText constructor
+## RichText constructor {#richtext-constructor}
 
 ~~~js
 new richtext.RichText("#root", {
@@ -19,79 +19,79 @@ new richtext.RichText("#root", {
 - an HTML container (e.g., CSS selector or DOM element)
 - a configuration object ([see properties](api/overview/properties_overview.md))
 
-## RichText methods
+## RichText methods {#richtext-methods}
 
 | Name                                          | Description                               |
 | ----------------------------------------------|-------------------------------------------|
-| [](../methods/get-value.md)                   | @getshort(../methods/get-value.md)        |
-| [](../methods/set-value.md)                   | @getshort(../methods/set-value.md)        |
-| [](../methods/set-config.md)                  | @getshort(../methods/set-config.md)       |
-| [](../methods/set-locale.md)                  | @getshort(../methods/set-locale.md)       |
-| [](../methods/destructor.md)                  | @getshort(../methods/destructor.md)       |
+| [](api/methods/get-value.md)                   | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                   | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                  | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                  | @getshort(api/methods/set-locale.md)       |
+| [](api/methods/destructor.md)                  | @getshort(api/methods/destructor.md)       |
 
-## Event Bus methods
+## Event Bus methods {#event-bus-methods}
 
 | Name                                          | Description                               |
 | ----------------------------------------------|-------------------------------------------|
-| [](../internal/exec.md)                       | @getshort(../internal/exec.md)            |
-| [](../internal/intercept.md)                  | @getshort(../internal/intercept.md)       |
-| [](../internal/on.md)                         | @getshort(../internal/on.md)              |
-| [](../internal/detach.md)                     | @getshort(../internal/detach.md)          |
-| [](../internal/set-next.md)                   | @getshort(../internal/set-next.md)        |
+| [](api/internal/exec.md)                       | @getshort(api/internal/exec.md)            |
+| [](api/internal/intercept.md)                  | @getshort(api/internal/intercept.md)       |
+| [](api/internal/on.md)                         | @getshort(api/internal/on.md)              |
+| [](api/internal/detach.md)                     | @getshort(api/internal/detach.md)          |
+| [](api/internal/set-next.md)                   | @getshort(api/internal/set-next.md)        |
 
-## State methods
+## State methods {#state-methods}
 
 | Name                                          | Description                               |
 | ----------------------------------------------|-------------------------------------------|
-| [](../internal/get-state.md)                  | @getshort(../internal/get-state.md)       |
-| [](../internal/get-reactive-state.md)         | @getshort(../internal/get-reactive-state.md) |
+| [](api/internal/get-state.md)                  | @getshort(api/internal/get-state.md)       |
+| [](api/internal/get-reactive-state.md)         | @getshort(api/internal/get-reactive-state.md) |
 
-## Events
+## Events {#events}
 
 | Name                                           | Description                               |
 | ----------------------------------------------|-------------------------------------------|
-| [](../events/align.md)                        | @getshort(../events/align.md)             |
-| [](../events/clear-text-format.md)            | @getshort(../events/clear-text-format.md) |
-| [](../events/copy.md)                         | @getshort(../events/copy.md)              |
-| [](../events/create-new.md)                   | @getshort(../events/create-new.md)        |
-| [](../events/cut.md)                          | @getshort(../events/cut.md)               |
-| [](../events/delete-link.md)                  | @getshort(../events/delete-link.md)       |
-| [](../events/export.md)                       | @getshort(../events/export.md)            |
-| [](../events/import.md)                       | @getshort(../events/import.md)            |
-| [](../events/indent.md)                       | @getshort(../events/indent.md)            |
-| [](../events/insert-image.md)                 | @getshort(../events/insert-image.md)      |
-| [](../events/insert-line.md)                  | @getshort(../events/insert-line.md)       |
-| [](../events/insert-link.md)                  | @getshort(../events/insert-link.md)       |
-| [](../events/insert-list.md)                  | @getshort(../events/insert-list.md)       |
-| [](../events/outdent.md)                      | @getshort(../events/outdent.md)           |
-| [](../events/paste.md)                        | @getshort(../events/paste.md)             |
-| [](../events/print.md)                        | @getshort(../events/print.md)             |
-| [](../events/redo.md)                         | @getshort(../events/redo.md)              |
-| [](../events/resize-image.md)                 | @getshort(../events/resize-image.md)      |
-| [](../events/set-font-family.md)              | @getshort(../events/set-font-family.md)   |
-| [](../events/set-font-size.md)                | @getshort(../events/set-font-size.md)     |
-| [](../events/set-line-height.md)              | @getshort(../events/set-line-height.md)   |
-| [](../events/set-text-color.md)               | @getshort(../events/set-text-color.md)    |
-| [](../events/set-text-format.md)              | @getshort(../events/set-text-format.md)   |
-| [](../events/set-text-style.md)               | @getshort(../events/set-text-style.md)    |
-| [](../events/show-popup.md)                   | @getshort(../events/show-popup.md)        |
-| [](../events/subscript.md)                    | @getshort(../events/subscript.md)         |
-| [](../events/superscript.md)                  | @getshort(../events/superscript.md)       |
-| [](../events/toggle-fullscreen-mode.md)       | @getshort(../events/toggle-fullscreen-mode.md) |
-| [](../events/toggle-layout-mode.md)           | @getshort(../events/toggle-layout-mode.md) |
-| [](../events/toggle-shortcut-info.md)         | @getshort(../events/toggle-shortcut-info.md) |
-| [](../events/undo.md)                         | @getshort(../events/undo.md)              |
-| [](../events/update-link.md)                  | @getshort(../events/update-link.md)       |
+| [](api/events/align.md)                        | @getshort(api/events/align.md)             |
+| [](api/events/clear-text-format.md)            | @getshort(api/events/clear-text-format.md) |
+| [](api/events/copy.md)                         | @getshort(api/events/copy.md)              |
+| [](api/events/create-new.md)                   | @getshort(api/events/create-new.md)        |
+| [](api/events/cut.md)                          | @getshort(api/events/cut.md)               |
+| [](api/events/delete-link.md)                  | @getshort(api/events/delete-link.md)       |
+| [](api/events/export.md)                       | @getshort(api/events/export.md)            |
+| [](api/events/import.md)                       | @getshort(api/events/import.md)            |
+| [](api/events/indent.md)                       | @getshort(api/events/indent.md)            |
+| [](api/events/insert-image.md)                 | @getshort(api/events/insert-image.md)      |
+| [](api/events/insert-line.md)                  | @getshort(api/events/insert-line.md)       |
+| [](api/events/insert-link.md)                  | @getshort(api/events/insert-link.md)       |
+| [](api/events/insert-list.md)                  | @getshort(api/events/insert-list.md)       |
+| [](api/events/outdent.md)                      | @getshort(api/events/outdent.md)           |
+| [](api/events/paste.md)                        | @getshort(api/events/paste.md)             |
+| [](api/events/print.md)                        | @getshort(api/events/print.md)             |
+| [](api/events/redo.md)                         | @getshort(api/events/redo.md)              |
+| [](api/events/resize-image.md)                 | @getshort(api/events/resize-image.md)      |
+| [](api/events/set-font-family.md)              | @getshort(api/events/set-font-family.md)   |
+| [](api/events/set-font-size.md)                | @getshort(api/events/set-font-size.md)     |
+| [](api/events/set-line-height.md)              | @getshort(api/events/set-line-height.md)   |
+| [](api/events/set-text-color.md)               | @getshort(api/events/set-text-color.md)    |
+| [](api/events/set-text-format.md)              | @getshort(api/events/set-text-format.md)   |
+| [](api/events/set-text-style.md)               | @getshort(api/events/set-text-style.md)    |
+| [](api/events/show-popup.md)                   | @getshort(api/events/show-popup.md)        |
+| [](api/events/subscript.md)                    | @getshort(api/events/subscript.md)         |
+| [](api/events/superscript.md)                  | @getshort(api/events/superscript.md)       |
+| [](api/events/toggle-fullscreen-mode.md)       | @getshort(api/events/toggle-fullscreen-mode.md) |
+| [](api/events/toggle-layout-mode.md)           | @getshort(api/events/toggle-layout-mode.md) |
+| [](api/events/toggle-shortcut-info.md)         | @getshort(api/events/toggle-shortcut-info.md) |
+| [](api/events/undo.md)                         | @getshort(api/events/undo.md)              |
+| [](api/events/update-link.md)                  | @getshort(api/events/update-link.md)       |
 
-## Properties
+## Properties {#properties}
 
 | Name                                          | Description                               |
 | ----------------------------------------------|-------------------------------------------|
-| [](../config/default-styles.md)               | @getshort(../config/default-styles.md)    |
-| [](../config/fullscreen-mode.md)              | @getshort(../config/fullscreen-mode.md)   |
-| [](../config/image-upload-url.md)             | @getshort(../config/image-upload-url.md)  |
-| [](../config/layout-mode.md)                  | @getshort(../config/layout-mode.md)       |
-| [](../config/locale.md)                       | @getshort(../config/locale.md)            |
-| [](../config/menubar.md)                      | @getshort(../config/menubar.md)           |
-| [](../config/toolbar.md)                      | @getshort(../config/toolbar.md)           |
-| [](../config/value.md)                        | @getshort(../config/value.md)             |
+| [](api/config/default-styles.md)               | @getshort(api/config/default-styles.md)    |
+| [](api/config/fullscreen-mode.md)              | @getshort(api/config/fullscreen-mode.md)   |
+| [](api/config/image-upload-url.md)             | @getshort(api/config/image-upload-url.md)  |
+| [](api/config/layout-mode.md)                  | @getshort(api/config/layout-mode.md)       |
+| [](api/config/locale.md)                       | @getshort(api/config/locale.md)            |
+| [](api/config/menubar.md)                      | @getshort(api/config/menubar.md)           |
+| [](api/config/toolbar.md)                      | @getshort(api/config/toolbar.md)           |
+| [](api/config/value.md)                        | @getshort(api/config/value.md)             |
diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md
index a1850f7..b6b8f67 100644
--- a/docs/api/overview/methods_overview.md
+++ b/docs/api/overview/methods_overview.md
@@ -11,8 +11,8 @@ Use this reference to quickly navigate to detailed descriptions of each method,
 
 | Name                                                   | Description                               |
 | ------------------------------------------------------ | ----------------------------------------- |
-| [](../methods/destructor.md)                           | @getshort(../methods/destructor.md)       |
-| [](../methods/get-value.md)                            | @getshort(../methods/get-value.md)        |
-| [](../methods/set-value.md)                            | @getshort(../methods/set-value.md)        |
-| [](../methods/set-config.md)                           | @getshort(../methods/set-config.md)       |
-| [](../methods/set-locale.md)                           | @getshort(../methods/set-locale.md)       |
+| [](api/methods/destructor.md)                           | @getshort(api/methods/destructor.md)       |
+| [](api/methods/get-value.md)                            | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                            | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                           | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                           | @getshort(api/methods/set-locale.md)       |
diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md
index 1d89cf7..255a158 100644
--- a/docs/api/overview/properties_overview.md
+++ b/docs/api/overview/properties_overview.md
@@ -11,11 +11,11 @@ They help you control layout, toolbar, value, localization, and other aspects of
 
 | Name                                                    | Description                                  |
 | --------------------------------------------------------|----------------------------------------------|
-| [](../config/default-styles.md)                         | @getshort(../config/default-styles.md)       |
-| [](../config/fullscreen-mode.md)                        | @getshort(../config/fullscreen-mode.md)      |
-| [](../config/image-upload-url.md)                       | @getshort(../config/image-upload-url.md)     |
-| [](../config/layout-mode.md)                            | @getshort(../config/layout-mode.md)          |
-| [](../config/locale.md)                                 | @getshort(../config/locale.md)               |
-| [](../config/menubar.md)                                | @getshort(../config/menubar.md)              |
-| [](../config/toolbar.md)                                | @getshort(../config/toolbar.md)              |
-| [](../config/value.md)                                  | @getshort(../config/value.md)                |
+| [](api/config/default-styles.md)                         | @getshort(api/config/default-styles.md)       |
+| [](api/config/fullscreen-mode.md)                        | @getshort(api/config/fullscreen-mode.md)      |
+| [](api/config/image-upload-url.md)                       | @getshort(api/config/image-upload-url.md)     |
+| [](api/config/layout-mode.md)                            | @getshort(api/config/layout-mode.md)          |
+| [](api/config/locale.md)                                 | @getshort(api/config/locale.md)               |
+| [](api/config/menubar.md)                                | @getshort(api/config/menubar.md)              |
+| [](api/config/toolbar.md)                                | @getshort(api/config/toolbar.md)              |
+| [](api/config/value.md)                                  | @getshort(api/config/value.md)                |
diff --git a/docs/api/overview/state_methods_overview.md b/docs/api/overview/state_methods_overview.md
index 79ffabb..8b828ee 100644
--- a/docs/api/overview/state_methods_overview.md
+++ b/docs/api/overview/state_methods_overview.md
@@ -11,5 +11,5 @@ These methods are useful for debugging, integrating with reactive systems, or im
 
 | Name                                                        | Description                                      |
 | ----------------------------------------------------------- | ------------------------------------------------ |
-| [](../internal/get-reactive-state.md)                       | @getshort(../internal/get-reactive-state.md)     |
-| [](../internal/get-state.md)                                | @getshort(../internal/get-state.md)              |
+| [](api/internal/get-reactive-state.md)                       | @getshort(api/internal/get-reactive-state.md)     |
+| [](api/internal/get-state.md)                                | @getshort(api/internal/get-state.md)              |
diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md
index f782c3a..4ef2df2 100644
--- a/docs/guides/configuration.md
+++ b/docs/guides/configuration.md
@@ -16,7 +16,7 @@ You can configure RichText appearance and functionality via the corresponding AP
 - Specify **initial locale** using the [`locale`](api/config/locale.md) property
 - Apply **initial styles** using the [`defaultStyles`](api/config/default-styles.md) property
 
-## Layout modes
+## Layout modes {#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:
 
@@ -40,11 +40,11 @@ const editor = new richtext.Richtext("#root", {
 });
 ~~~
 
-## Toolbar
+## Toolbar {#toolbar}
 
 The RichText toolbar consists of several blocks of controls that can be changed according to your needs.
 
-### Default toolbar controls
+### Default toolbar controls {#default-toolbar-controls}
 
 You can specify the following buttons and controls in the RichText toolbar:
 
@@ -125,7 +125,7 @@ new richtext.Richtext("#root", {
 
 **Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
 
-### Custom toolbar controls
+### Custom toolbar controls {#custom-toolbar-controls}
 
 You can also specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property with the following parameters:
 
@@ -176,7 +176,7 @@ new richtext.Richtext("#root", {
 
 **Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
 
-### Hide Toolbar
+### Hide Toolbar {#hide-toolbar}
 
 If you need to hide toolbar, set the [`toolbar`](api/config/toolbar.md) property to `false` as follows:
 
@@ -187,7 +187,7 @@ new richtext.Richtext("#root", {
 });
 ~~~
 
-## Default styles
+## Default styles {#default-styles}
 
 You can apply default style values for specific block types in the editor using the [`defaultStyles`](api/config/default-styles.md) property.
 
diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md
index a43bf9e..9b07b08 100644
--- a/docs/guides/initialization.md
+++ b/docs/guides/initialization.md
@@ -12,7 +12,7 @@ This guide will give you detailed instructions on how to create RichText on a pa
 2. [Create a container for RichText](#creating-container).
 3. [Initialize RichText with the object constructor](#initializing-richtext).
 
-## Including source files
+## Including source files {#including-source-files}
 
 [Download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it into a folder of your project.
 
@@ -28,7 +28,7 @@ Make sure that you set correct relative paths to the source files:
 <link rel="stylesheet" href="./codebase/richtext.css">
 ~~~
 
-## Creating container
+## Creating container {#creating-container}
 
 Add a container for RichText and give it an ID, for example *"root"*:
 
@@ -36,7 +36,7 @@ Add a container for RichText and give it an ID, for example *"root"*:
 <div id="root"></div>
 ~~~
 
-## Initializing RichText
+## Initializing RichText {#initializing-richtext}
 
 Initialize RichText with the `richtext.Richtext` constructor. The constructor takes two parameters:
 
@@ -50,13 +50,13 @@ const editor = new richtext.Richtext("#root", {
 });
 ~~~
 
-### Configuration properties
+### Configuration properties {#configuration-properties}
 
 :::note
 The full list of properties to configure **RichText** can be found [**here**](api/overview/properties_overview.md).
 :::
 
-## Example
+## Example {#example}
 
 In this snippet you can see how to initialize **RichText** with the initial data:
 
diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md
index 5525455..94289cf 100644
--- a/docs/guides/integration_with_angular.md
+++ b/docs/guides/integration_with_angular.md
@@ -12,7 +12,7 @@ You should be familiar with basic concepts and patterns of **Angular** before re
 
 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).
 
-## Creating a project
+## Creating a project {#creating-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/).
@@ -30,7 +30,7 @@ If you want to follow this guide, disable Server-Side Rendering (SSR) and Static
 
 The command above installs all the necessary tools, so you don't need to run any additional commands.
 
-### Installation of dependencies
+### Installation of dependencies {#installation-of-dependencies}
 
 Go to the new created app directory:
 
@@ -47,19 +47,19 @@ yarn start
 
 The app should run on a localhost (for instance `http://localhost:3000`).
 
-## Creating RichText
+## Creating RichText {#creating-richtext}
 
 Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
 
-### Step 1. Package installation
+### Step 1. Package installation {#step-1-package-installation}
 
 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
+### Step 2. Component creation {#step-2-component-creation}
 
 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**.
 
-#### Import source files
+#### Import source files {#import-source-files}
 
 Open the **richtext.component.ts** file and import RichText source files. Note that:
 
@@ -77,7 +77,7 @@ import { Richtext} from '@dhx/trial-richtext';
 
 In this tutorial you can see how to configure the **trial** version of RichText.
 
-#### Set containers and initialize the Richtext
+#### Set containers and initialize the Richtext {#set-containers-and-initialize-the-richtext}
 
 To display RichText on the page, you need to set a container for RichText, and initialize the component using the corresponding constructor:
 
@@ -111,7 +111,7 @@ export class RichTextComponent implements OnInit, OnDestroy {
 }
 ~~~
 
-#### Adding styles
+#### Adding styles {#adding-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:
 
@@ -139,7 +139,7 @@ body{
 }
 ~~~
 
-#### Loading data
+#### Loading data {#loading-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:
 
@@ -227,7 +227,7 @@ 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.
 
-#### Handling events
+#### Handling events {#handling-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).
 
@@ -248,7 +248,7 @@ ngOnDestroy(): void {
 }
 ~~~
 
-### Step 3. Adding RichText into the app
+### Step 3. Adding RichText into the app {#step-3-adding-richtext-into-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:
 
diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md
index 1244911..b1086a1 100644
--- a/docs/guides/integration_with_react.md
+++ b/docs/guides/integration_with_react.md
@@ -12,7 +12,7 @@ You should be familiar with the basic concepts and patterns of [**React**](https
 
 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).
 
-## Creating a project
+## Creating a project {#creating-a-project}
 
 :::info
 Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
@@ -24,7 +24,7 @@ You can create a basic **React** project or use **React with Vite**. Let's name
 npx create-react-app my-react-richtext-app
 ~~~
 
-### Installation of dependencies
+### Installation of dependencies {#installation-of-dependencies}
 
 Go to the new created app directory:
 
@@ -50,19 +50,19 @@ npm run dev
 
 The app should run on a localhost (for instance `http://localhost:3000`).
 
-## Creating RichText
+## Creating RichText {#creating-richtext}
 
 Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
 
-### Step 1. Package installation
+### Step 1. Package installation {#step-1-package-installation}
 
 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
+### Step 2. Component creation {#step-2-component-creation}
 
 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***.
 
-#### Importing source files
+#### Importing source files {#importing-source-files}
 
 Open the ***Richtext.jsx*** file and import RichText source files. Note that:
 
@@ -82,7 +82,7 @@ import "@dhx/trial-richtext/dist/richtext.css";
 
 In this tutorial you can see how to configure the **trial** version of RichText.
 
-#### Setting containers and adding Richtext
+#### Setting containers and adding Richtext {#setting-containers-and-adding-richtext}
 
 To display RichText on the page, you need to create container for RichText and initialize the component using the corresponding constructors:
 
@@ -109,7 +109,7 @@ export default function RichTextComponent(props) {
 }
 ~~~
 
-#### Adding styles
+#### Adding styles {#adding-styles}
 
 To display RichText correctly, you need to specify important styles for RichText and its container in the main css file of the project:
 
@@ -135,7 +135,7 @@ body,
 }
 ~~~
 
-#### Loading data
+#### Loading data {#loading-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:
 
@@ -222,7 +222,7 @@ 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.
 
-#### Handling events
+#### Handling events {#handling-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).
 
diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md
index db9839f..f6a6165 100644
--- a/docs/guides/integration_with_svelte.md
+++ b/docs/guides/integration_with_svelte.md
@@ -12,7 +12,7 @@ You should be familiar with the basic concepts and patterns of **Svelte** before
 
 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).
 
-## Creating a project
+## Creating a project {#creating-a-project}
 
 :::info
 Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
@@ -32,7 +32,7 @@ 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
+### Installation of dependencies {#installation-of-dependencies}
 
 Let's name the project as **my-svelte-richtext-app** and go to the app directory:
 
@@ -58,19 +58,19 @@ npm run dev
 
 The app should run on a localhost (for instance `http://localhost:3000`).
 
-## Creating RichText
+## Creating RichText {#creating-richtext}
 
 Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
 
-### Step 1. Package installation
+### Step 1. Package installation {#step-1-package-installation}
 
 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
+### Step 2. Component creation {#step-2-component-creation}
 
 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***.
 
-#### Importing source files
+#### Importing source files {#importing-source-files}
 
 Open the ***Richtext.svelte*** file and import RichText source files. Note that:
 
@@ -94,7 +94,7 @@ import '@dhx/trial-richtext/dist/richtext.css';
 
 In this tutorial you can see how to configure the **trial** version of RichText.
 
-#### Setting containers and adding RichText
+#### Setting containers and adding RichText {#setting-containers-and-adding-richtext}
 
 To display RichText on the page, you need to create container for RichText, and initialize the component using the corresponding constructor:
 
@@ -122,7 +122,7 @@ onDestroy(() => {
 </div>
 ~~~
 
-#### Loading data
+#### Loading data {#loading-data}
 
 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:
 
@@ -212,7 +212,7 @@ 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.
 
-#### Handling events
+#### Handling events {#handling-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).
 
@@ -239,7 +239,7 @@ onDestroy(() => {
 // ...
 ~~~
 
-### Step 3. Adding RichText into the app
+### Step 3. Adding RichText into the app {#step-3-adding-richtext-into-the-app}
 
 To add the component into the app, open the **App.svelte** file and replace the default code with the following one:
 
diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md
index 46db308..4352070 100644
--- a/docs/guides/integration_with_vue.md
+++ b/docs/guides/integration_with_vue.md
@@ -12,7 +12,7 @@ You should be familiar with the basic concepts and patterns of [**Vue**](https:/
 
 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).
 
-## Creating a project
+## Creating a project {#creating-a-project}
 
 :::info
 Before you start to create a new project, install [**Node.js**](https://nodejs.org/en/).
@@ -28,7 +28,7 @@ This command installs and executes `create-vue`, the official **Vue** project sc
 
 Let's name the project as **my-vue-richtext-app**.
 
-### Installation of dependencies
+### Installation of dependencies {#installation-of-dependencies}
 
 Go to the app directory:
 
@@ -54,19 +54,19 @@ npm run dev
 
 The app should run on a localhost (for instance `http://localhost:3000`).
 
-## Creating RichText
+## Creating RichText {#creating-richtext}
 
 Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
 
-### Step 1. Package installation
+### Step 1. Package installation {#step-1-package-installation}
 
 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
+### Step 2. Component creation {#step-2-component-creation}
 
 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***.
 
-#### Import source files
+#### Import source files {#import-source-files}
 
 Open the ***Richtext.vue*** file and import RichText source files. Note that:
 
@@ -90,7 +90,7 @@ import '@dhx/trial-richtext/dist/richtext.css';
 
 In this tutorial you can see how to configure the **trial** version of RichText.
 
-#### Setting containers and adding Richtext
+#### Setting containers and adding Richtext {#setting-containers-and-adding-richtext}
 
 To display Richtext on the page, you need to create a container for RichText and initialize the component using the corresponding constructor:
 
@@ -118,7 +118,7 @@ export default {
 </template>
 ~~~
 
-#### Adding styles
+#### Adding styles {#adding-styles}
 
 To display RichText correctly, you need to specify important styles for RichText and its container in the main css file of the project:
 
@@ -144,7 +144,7 @@ body,
 }
 ~~~
 
-#### Loading data
+#### Loading data {#loading-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:
 
@@ -242,7 +242,7 @@ export default {
 
 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.
 
-#### Handling events
+#### Handling events {#handling-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).
 
diff --git a/docs/guides/localization.md b/docs/guides/localization.md
index f29e8cd..d1b6e58 100644
--- a/docs/guides/localization.md
+++ b/docs/guides/localization.md
@@ -8,7 +8,7 @@ description: You can learn about the localization in the documentation of the DH
 
 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.
 
-## Default locale
+## Default locale {#default-locale}
 
 The **English** locale is used by default:
 
@@ -459,7 +459,7 @@ const cn = {
 ~~~
 </details>
 
-## Custom locale
+## Custom locale {#custom-locale}
 
 To apply a custom locale you need to:
 
@@ -467,7 +467,7 @@ To apply a custom locale you need to:
 
 - apply the new locale to **RichText** via its [`locale`](api/config/locale.md) property or use the [`setLocale()`](api/methods/set-locale.md) method
 
-## Example
+## Example {#example}
 
 In this snippet you can see how to switch through several locales:
 
diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md
index e14c464..6b3b36d 100644
--- a/docs/guides/stylization.md
+++ b/docs/guides/stylization.md
@@ -10,7 +10,7 @@ You can fully customize the appearance of DHTMLX RichText by overriding CSS vari
 
 This guide shows how to apply a **dark theme** and use available class names to style the editor’s menubar, toolbar, popup, and content area.
 
-## Default structure and class names
+## Default structure and class names {#default-structure-and-class-names}
 
 RichText uses the following core classes to structure its UI:
 
@@ -24,7 +24,7 @@ RichText uses the following core classes to structure its UI:
 
 You can use these classes in your custom CSS selectors to override the appearance of the RichText editor.
 
-## Overriding default styles
+## Overriding default styles {#overriding-default-styles}
 
 You can override RichText's default styles by redefining CSS variables on the `#root` container or on specific sub-elements:
 
@@ -59,7 +59,7 @@ You can override RichText's default styles by redefining CSS variables on the `#
 These styles will apply a dark background, adjust button and icon colors, and improve visibility for dark UI themes.
 :::
 
-## List of supported CSS variables
+## List of supported CSS variables {#list-of-supported-css-variables}
 
 | Variable name                | Description                          |
 | ---------------------------- | ------------------------------------ |
@@ -75,12 +75,12 @@ These styles will apply a dark background, adjust button and icon colors, and im
 | `--wx-icon-color`            | Color for toolbar arrow icons used for dropdown          |
 | `--wx-popup-border`          | Border for popup elements            |
 
-## Best practices
+## Best practices {#best-practices}
 
 * Use `color-scheme: dark` to improve native input styling in dark mode
 * Avoid changing layout-related properties (like `display`, `position`) unless necessary
 
-## Live demo
+## Live demo {#live-demo}
 
 In this snippet you can see how to apply a custom style to RichText:
 
diff --git a/docs/guides/typescript_support.md b/docs/guides/typescript_support.md
index ad247d8..4cc183d 100644
--- a/docs/guides/typescript_support.md
+++ b/docs/guides/typescript_support.md
@@ -12,7 +12,7 @@ Starting from v2.0, the library of DHTMLX RichText provides an ability to use Ty
 You can try out the functionality right in our <a href="https://snippet.dhtmlx.com/ziynafp7?tag=richtext"  target="_blank">Snippet Tool</a>.
 :::
 
-## Advantages of using TypeScript
+## Advantages of using TypeScript {#advantages-of-using-typescript}
 
 Why do you need to use DHTMLX RichText with TypeScript?
 
diff --git a/docs/how_to_start.md b/docs/how_to_start.md
index 2227c79..55d442b 100644
--- a/docs/how_to_start.md
+++ b/docs/how_to_start.md
@@ -12,7 +12,7 @@ This clear and comprehensive tutorial will guide your through the steps you need
 ![DHTMLX RichText Classic Mode](./assets/richtext/classic_mode.png)
 </div>
 
-## Step 1. Including source files
+## Step 1. Including source files {#step-1-including-source-files}
 
 Start from creating an HTML file and call it *index.html*. Then proceed to include RichText source files into the created file.
 
@@ -37,23 +37,23 @@ There are two necessary files:
 </html>
 ~~~
 
-### Installing RichText via npm or yarn
+### Installing RichText via npm or yarn {#installing-richtext-via-npm-or-yarn}
 
 You can import JavaScript RichText into your project using **yarn** or **npm** package manager.
 
-#### Installing trial RichText via npm or yarn
+#### Installing trial RichText via npm or yarn {#installing-trial-richtext-via-npm-or-yarn}
 
 :::info
 If you want to use trial version of RichText, download the [**trial RichText package**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) and follow steps mentioned in the *README* file. Note that trial RichText is available 30 days only.
 :::
 
-#### Installing PRO RichText via npm or yarn
+#### Installing PRO RichText via npm or yarn {#installing-pro-richtext-via-npm-or-yarn}
 
 :::info
 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.
 :::
 
-## Step 2. Creating RichText
+## Step 2. Creating RichText {#step-2-creating-richtext}
 
 Now you are ready to add RichText to the page. First, let's create the `<div>` container for RichText. So, take the following steps:
 
@@ -82,7 +82,7 @@ As parameters, the constructor takes any valid CSS selector of HTML container wh
 </html>
 ~~~
 
-## Step 3. Configuring RichText
+## Step 3. Configuring RichText {#step-3-configuring-richtext}
 
 Next you can specify configuration properties you want the RichText component to have when initialized.
 
@@ -104,6 +104,6 @@ const editor = new richtext.Richtext("#root", {
 });
 ~~~
 
-## What's next
+## What's next {#whats-next}
 
 That's all. Just three simple steps and you have a handy tool for editing content. Now you can start working with your content or keep exploring the inner world of JavaScript RichText.
diff --git a/docs/index.md b/docs/index.md
index d6a84fe..ae3fb59 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -27,9 +27,9 @@ RichText is framework-agnostic and can be easily integrated with [React](guides/
 
 This documentation provides detailed guidance on installation, configuration, usage, and customization. You'll find examples for common scenarios, [full API references](api/overview/main_overview.md), and best practices for embedding RichText into your application.
 
-## RichText structure
+## RichText structure {#richtext-structure}
 
-### Menubar
+### Menubar {#menubar}
 
 The RichText menubar provides access to editing actions such as creating a new document, printing, importing/exporting content, and more. It is hidden by default.
 
@@ -39,7 +39,7 @@ Use the [`menubar`](api/config/menubar.md) property to toggle its visibility. Wh
 ![Menubar](./assets/richtext/menubar.png)
 </div>
 
-### Toolbar
+### Toolbar {#toolbar}
 
 The RichText toolbar provides quick access to text formatting and structural editing features. By default, the [toolbar](api/config/toolbar.md#default-config) is enabled and displays a predefined set of commonly used controls such as bold, italic, font settings, list formatting, and more.
 
@@ -49,11 +49,11 @@ The [`toolbar`](api/config/toolbar.md) property allows you to fully customize th
 ![Toolbar](./assets/richtext/toolbar.png)
 </div>
 
-### Editor
+### Editor {#editor}
 
 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.
 
-#### Two working modes
+#### Two working modes {#two-working-modes}
 
 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.
 
@@ -69,27 +69,27 @@ DHTMLX RichText can work with content in "classic" and "document" modes. You can
 ![Document mode](./assets/richtext/document_mode.png)
 </div>
 
-## Supported formats
+## Supported formats {#supported-formats}
 
 The RichText editor supports [parsing](api/methods/set-value.md) and [serialization](api/methods/get-value.md) of content in the **HTML** and plain text formats.
 
-#### HTML format
+#### HTML format {#html-format}
 
 <div className="img_border">
 ![HTML format](./assets/richtext/html_format.png)
 </div>
 
-#### Text format
+#### Text format {#text-format}
 
 <div className="img_border">
 ![Text format](./assets/richtext/text_format.png)
 </div>
 
-## Keyboard shortcuts
+## Keyboard shortcuts {#keyboard-shortcuts}
 
 The RichText editor supports a set of common keyboard shortcuts for faster formatting and editing. The shortcuts follow platform conventions and are available on both **Windows/Linux** (`Ctrl`) and **macOS** (`⌘`).
 
-### Text formatting
+### Text formatting {#text-formatting}
 
 | Action          | Windows/Linux   | macOS         |
 |-----------------|-----------------|---------------|
@@ -98,7 +98,7 @@ The RichText editor supports a set of common keyboard shortcuts for faster forma
 | Underline       | `Ctrl+U`        | `⌘U`          |
 | Strikethrough   | `Ctrl+Shift+X`  | `⌘⇧X`         |
 
-### Editing
+### Editing {#editing}
 
 | Action   | Windows/Linux            | macOS         |
 |----------|--------------------------|---------------|
@@ -108,7 +108,7 @@ The RichText editor supports a set of common keyboard shortcuts for faster forma
 | Copy     | `Ctrl+C`                 | `⌘C`          |
 | Paste    | `Ctrl+V`                 | `⌘V`          |
 
-### Special actions
+### Special actions {#special-actions}
 
 | Action       | Windows/Linux | macOS |
 |--------------|---------------|-------|
diff --git a/docs/news/migration.md b/docs/news/migration.md
index 6797836..b2711eb 100644
--- a/docs/news/migration.md
+++ b/docs/news/migration.md
@@ -6,9 +6,9 @@ description: You can learn about the Migration to Newer Versions in the document
 
 # Migration to newer versions
 
-## 1.2 -> 2.0
+## 1.2 -> 2.0 {#12---20}
 
-### Properties migration
+### Properties migration {#properties-migration}
 
 | Legacy property | Replaced by               | Notes                                     |
 | --------------- | ------------------------- | ----------------------------------------- |
@@ -17,7 +17,7 @@ description: You can learn about the Migration to Newer Versions in the document
 | `defaultStyles` | `defaultStyles` (updated) | Structure is now per-block and CSS-based  |
 | `mode`          | `layoutMode`              | Replaced with stricter enum-based setting |
 
-### - `customStats`
+### - `customStats` {#--customstats}
 
 The `customStats` property has been removed. The current version of RichText no longer supports displaying user-defined statistics (e.g., character count, word count, sentence count).
 
@@ -28,7 +28,7 @@ const content = editor.getValue();
 const wordCount = content.split(/\s+/).length;
 ```
 
-### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md)
+### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) {#--toolbarblocks--toolbar}
 
 Before **2.0**, users were able to specify only blocks with controls
 ```jsx{2} title="Before 2.0"
@@ -47,7 +47,7 @@ new richtext.Richtext("#root", {
 });
 ```
 
-### - [`defaultStyles`](api/config/default-styles.md)
+### - [`defaultStyles`](api/config/default-styles.md) {#--defaultstyles}
 
 Before **2.0**, users were able to define default values for toolbar selection controls
 ```jsx title="Before 2.0"
@@ -75,7 +75,7 @@ defaultStyles: {
 Use `*` to define base defaults for all blocks, then override specific elements (p, h1, blockquote, etc.).
 :::
 
-### - `mode` → [`layoutMode`](api/config/layout-mode.md)
+### - `mode` → [`layoutMode`](api/config/layout-mode.md) {#--mode--layoutmode}
 
 ```jsx{2} title="Before 2.0"
 new dhx.RichText("#root", {
@@ -91,7 +91,7 @@ new Richtext("#root", {
 
 The new [`layoutMode`](api/config/layout-mode.md) strictly supports `"classic"` and `"document"` values.
 
-### Methods migration
+### Methods migration {#methods-migration}
 
 | Legacy method           | New equivalent                       | Notes                                                 |
 | ----------------------- | ------------------------------------ | ----------------------------------------------------- |
@@ -112,7 +112,7 @@ The new [`layoutMode`](api/config/layout-mode.md) strictly supports `"classic"`
 | `intercept()`           | ✅ New                               | Intercept internal actions                            |
 | `exec()`                | ✅ New                               | Execute internal actions                              |
 
-### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md)
+### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) {#--setvalue--getvalue}
 
 ```jsx title="Before 2.0"
 ...
@@ -135,7 +135,7 @@ editor.getValue(toTextEncoder);
 You can still call `getValue()` and `setValue()` without an encoder — HTML is used by default
 :::
 
-### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md)
+### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) {#--on--detach}
 
 ```jsx title="Before 2.0"
 editor.events.on("Change", function(action, canUndo, canRedo){
@@ -153,7 +153,7 @@ editor.api.on("set-font-size", (obj) => {
 editor.api.detach("track");
 ```
 
-### - `fire()` → Use [`exec()`](api/internal/exec.md) and [`intercept()`](api/internal/intercept.md)
+### - `fire()` → Use [`exec()`](api/internal/exec.md) and [`intercept()`](api/internal/intercept.md) {#--fire--use-exec-and-intercept}
 
 ```jsx title="Before 2.0"
 editor.events.fire("some-event", [data]);
diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md
index 27dc4f3..53f2e19 100644
--- a/docs/news/whats_new.md
+++ b/docs/news/whats_new.md
@@ -4,11 +4,11 @@ title: What's new
 description: You can explore what's new in DHTMLX RichText and its release history in the documentation of the DHTMLX JavaScript UI 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.
 ---
 
-## Version 2.0.5 
+## Version 2.0.5 {#version-205}
 
 Released on March 6, 2026
 
-### Fixes
+### Fixes {#fixes}
 
 - IME input is not processed correctly
 - Composition-based input (e.g., Chinese, Japanese, Korean on desktop) is not processed correctly
@@ -28,21 +28,21 @@ Released on March 6, 2026
 - Chrome: cannot insert emojis from context menu
 - Firefox: select all (CTRL+A) is not handled correctly
 
-## Version 2.0.4
+## Version 2.0.4 {#version-204}
 
 Released on October 15, 2025
 
-### Fixes
+### Fixes {#fixes-1}
 
 - Incorrect range selection for paragraphs
 - Link popups are not displayed when adjacent to linked images
 - Initial toolbar values are not accurate relative to actual content
 
-## Version 2.0.3
+## Version 2.0.3 {#version-203}
 
 Released on August 27, 2025
 
-### Fixes
+### Fixes {#fixes-2}
 
 - Clicking on a horizontal line causes a script error
 - The default line height is incorrect
@@ -51,23 +51,23 @@ Released on August 27, 2025
 - The parser ignores escaped font names in HTML
 - The parser ignores `margin-left` and `line-height` properties in HTML
 
-## Version 2.0.2
+## Version 2.0.2 {#version-202}
 
 Released on August 4, 2025
 
-### Fixes
+### Fixes {#fixes-3}
 
 - Updated package content
 
-## Version 2.0.1
+## Version 2.0.1 {#version-201}
 
 Released on July 30, 2025
 
-### Fixes
+### Fixes {#fixes-4}
 
 - Update type definitions for the `defaultStyles` property
 
-## Version 2.0
+## Version 2.0 {#version-20}
 
 Released on July 30, 2025
 
@@ -75,7 +75,7 @@ Released on July 30, 2025
 API of v1.2 is not compatible with v2.0. Refer to the [**migration guide**](news/migration.md) for additional information.
 :::
 
-### New Functionality
+### New Functionality {#new-functionality}
 
 - **Next-gen text rendering**  
   Experience smoother, faster, and more accurate text rendering with our new engine
@@ -116,9 +116,9 @@ API of v1.2 is not compatible with v2.0. Refer to the [**migration guide**](news
 - **Keyboard shortcuts**  
   Expanded support for common formatting and editing shortcuts
 
-###  New API
+###  New API {#new-api}
 
-#### New properties
+#### New properties {#new-properties}
 
 - [`fullscreenMode`](api/config/fullscreen-mode.md)  
 - [`imageUploadUrl`](api/config/image-upload-url.md)  
@@ -128,51 +128,51 @@ API of v1.2 is not compatible with v2.0. Refer to the [**migration guide**](news
 - [`toolbar`](api/config/toolbar.md)  
 - [`value`](api/config/value.md)
 
-####  New methods
+####  New methods {#new-methods}
 
 - [`setConfig()`](api/methods/set-config.md) — Dynamically update configuration  
 - [`setLocale()`](api/methods/set-locale.md) — Change locale on the fly
 
-#### New internal methods
+#### New internal methods {#new-internal-methods}
 
 - [`api.exec()`](api/internal/exec.md)  
 - [`api.intercept()`](api/internal/intercept.md)  
 - [`api.getReactiveState()`](api/internal/get-reactive-state.md)  
 - [`api.getState()`](api/internal/get-state.md)
 
-#### New events
+#### New events {#new-events}
 
 A full list of new events is available [here](api/overview/events_overview.md)
 
-### Updated API
+### Updated API {#updated-api}
 
-#### Updated properties
+#### Updated properties {#updated-properties}
 
 - [`defaultStyles`](api/config/default-styles.md)
 
-#### Updated methods
+#### Updated methods {#updated-methods}
 
 - [`setValue()`](api/methods/set-value.md)  
 - [`getValue()`](api/methods/get-value.md)
 
-#### Updated internal methods
+#### Updated internal methods {#updated-internal-methods}
 
 - [`api.detach()`](api/internal/detach.md)  
 - [`api.on()`](api/internal/on.md)
 
-## Removed API
+## Removed API {#removed-api}
 
 :::warning
 Do not use the removed API in your projects! <br/> Refer to the [Migration](news/migration.md) topic for more information.
 :::
 
-### [Removed properties](news/migration.md#properties-migration)
+### [Removed properties](news/migration.md#properties-migration) {#removed-properties}
 
 - [`customStats`](news/migration.md#--customstats)  
 - [`mode`](news/migration.md#--mode--layoutmode)  
 - [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar)
 
-### [Removed methods](news/migration.md#methods-migration)
+### [Removed methods](news/migration.md#methods-migration) {#removed-methods}
 
 - `exitFullScreen()`  
 - `fullScreen()`  
@@ -180,11 +180,11 @@ Do not use the removed API in your projects! <br/> Refer to the [Migration](news
 - `getStats()`  
 - `paint()`
 
-### Removed internal methods
+### Removed internal methods {#removed-internal-methods}
 
 - [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept)
 
-### Removed events
+### Removed events {#removed-events}
 
 - `Action`  
 - `Change`  
diff --git a/docusaurus.config.js b/docusaurus.config.js
index f14224e..4e5e4cd 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -48,7 +48,7 @@ const onAtNotationMatch = (data, { key }) => {
 
 const onAtNotationFunctionMatch = (data, { key, fullMatch, dir }) => {
 	if (data.indexOf('.md') !== -1 || data.indexOf('.mdx') !== -1 || data.indexOf('.') === -1) {
-		const result = readFile(dir, data);
+		const result = readFileFromPath(dir, data);
 		return result ? /@short: (.*)/g.exec(result)[1] : fullMatch;
 	}
 	return fullMatch;
@@ -88,11 +88,71 @@ const readFile = (workingDir, filePath) => {
 	return fs.readFileSync(path.normalize(finalPath), 'utf8');
 };
 
+const getContentRelativePath = (dir, filePath) => {
+	// Already a docs-root-relative path (no ./ or ../ prefix) — return as-is
+	if (!filePath.startsWith('.')) {
+		return filePath;
+	}
+
+	const absolutePath = path.resolve(dir, filePath).replace(/\\/g, '/');
+	const i18nDir = path.join(__dirname, 'i18n').replace(/\\/g, '/');
+	const docsDir = path.join(__dirname, 'docs').replace(/\\/g, '/');
+
+	if (absolutePath.startsWith(i18nDir + '/')) {
+		const currentIndex = absolutePath.indexOf('/current/');
+		if (currentIndex !== -1) {
+			return absolutePath.substring(currentIndex + '/current/'.length);
+		}
+	}
+
+	if (absolutePath.startsWith(docsDir + '/')) {
+		return absolutePath.substring(docsDir.length + 1);
+	}
+
+	return filePath;
+};
+
+// Returns the content root for i18n files (i18n/XX/.../current), or null for docs/ files.
+const getLocaleContentRoot = (dir) => {
+	const normalizedDir = dir.replace(/\\/g, '/');
+	const currentIndex = normalizedDir.indexOf('/current/');
+	if (currentIndex !== -1 && normalizedDir.includes('/i18n/')) {
+		return normalizedDir.substring(0, currentIndex + '/current'.length);
+	}
+	return null;
+};
+
+// Reads a file by path, supporting both relative (../foo.md) and docs-root-relative (api/foo.md) formats.
+// For i18n files, tries the localized version first before falling back to docs/.
+const readFileFromPath = (dir, filePath) => {
+	const result = readFile(dir, filePath);
+	if (result) return result;
+
+	// If path doesn't start with . it may be docs-root-relative
+	if (!filePath.startsWith('.')) {
+		// For i18n files: try the locale's content root first (localized version)
+		const localeRoot = getLocaleContentRoot(dir);
+		if (localeRoot) {
+			const localeResult = readFile(localeRoot, filePath);
+			if (localeResult) return localeResult;
+		}
+
+		// Fall back to docs/ (English)
+		const docsDir = path.join(__dirname, 'docs').replace(/\\/g, '/');
+		return readFile(docsDir, filePath);
+	}
+
+	return false;
+};
+
 const onEmptyLinkMatch = (data, { key, fullMatch, dir }) => {
 	const filePath = fullMatch.substring(fullMatch.indexOf('(') + 1, fullMatch.length - 1);
 	if (filePath.indexOf('.md') !== -1 || filePath.indexOf('.mdx') !== -1 || filePath.indexOf('.') === -1) {
-		const data = readFile(dir, filePath);
-		return data ? `[${/.*sidebar_label: (.+)/g.exec(data)[1]}]${fullMatch.match(/\(\D+\)/g)[0]}` : fullMatch;
+		const fileData = readFileFromPath(dir, filePath);
+		if (!fileData) return fullMatch;
+		const label = /.*sidebar_label: (.+)/g.exec(fileData)[1];
+		const normalizedPath = getContentRelativePath(dir, filePath);
+		return `[${label}](${normalizedPath})`;
 	}
 	return fullMatch;
 };
@@ -141,6 +201,36 @@ const config = {
     organizationName: 'DHTMLX',
     projectName: 'docs-richtext',
     trailingSlash: true,
+    i18n: {
+        defaultLocale: 'en',
+        locales: ['en', 'de', 'es', 'ru', 'zh', 'ko'],
+        localeConfigs: {
+            en: {
+                label: 'English',
+                direction: 'ltr',
+            },
+            de: {
+                label: 'Deutsch',
+                direction: 'ltr',
+            },
+            es: {
+                label: 'Español',
+                direction: 'ltr',
+            },
+            ru: {
+                label: 'Русский',
+                direction: 'ltr',
+            },
+            zh: {
+                label: '中文（简体）',
+                direction: 'ltr',
+            },
+            ko: {
+                label: '한국어',
+                direction: 'ltr',
+            },
+        },
+    },
     markdown: {
 		hooks: {
 			onBrokenMarkdownLinks: 'warn',
@@ -246,6 +336,10 @@ const config = {
                     label: 'Download',
                     href: 'https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml',
                     position: 'right'
+                },
+                {
+                    type: 'localeDropdown',
+                    position: 'right'
                 }
             ]
         },
diff --git a/i18n/de/code.json b/i18n/de/code.json
new file mode 100644
index 0000000..2a75479
--- /dev/null
+++ b/i18n/de/code.json
@@ -0,0 +1,560 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "Die Seite ist abgestürzt.",
+    "description": "The title of the fallback page when the page crashed"
+  },
+  "theme.BackToTopButton.buttonAriaLabel": {
+    "message": "Zurück nach oben scrollen",
+    "description": "The ARIA label for the back to top button"
+  },
+  "theme.blog.archive.title": {
+    "message": "Archiv",
+    "description": "The page & hero title of the blog archive page"
+  },
+  "theme.blog.archive.description": {
+    "message": "Archiv",
+    "description": "The page & hero description of the blog archive page"
+  },
+  "theme.blog.paginator.navAriaLabel": {
+    "message": "Navigation der Blog-Listenseite",
+    "description": "The ARIA label for the blog pagination"
+  },
+  "theme.blog.paginator.newerEntries": {
+    "message": "Neuere Einträge",
+    "description": "The label used to navigate to the newer blog posts page (previous page)"
+  },
+  "theme.blog.paginator.olderEntries": {
+    "message": "Ältere Einträge",
+    "description": "The label used to navigate to the older blog posts page (next page)"
+  },
+  "theme.blog.post.paginator.navAriaLabel": {
+    "message": "Blog Post Seiten Navigation",
+    "description": "The ARIA label for the blog posts pagination"
+  },
+  "theme.blog.post.paginator.newerPost": {
+    "message": "Neuer Post",
+    "description": "The blog post button label to navigate to the newer/previous post"
+  },
+  "theme.blog.post.paginator.olderPost": {
+    "message": "Älterer Post",
+    "description": "The blog post button label to navigate to the older/next post"
+  },
+  "theme.tags.tagsPageLink": {
+    "message": "Alle Tags anzeigen",
+    "description": "The label of the link targeting the tag list page"
+  },
+  "theme.colorToggle.ariaLabel.mode.system": {
+    "message": "system mode",
+    "description": "The name for the system color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.light": {
+    "message": "heller Modus",
+    "description": "The name for the light color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.dark": {
+    "message": "dunkler Modus",
+    "description": "The name for the dark color mode"
+  },
+  "theme.colorToggle.ariaLabel": {
+    "message": "Umschalten zwischen dunkler und heller Ansicht (momentan {mode})",
+    "description": "The ARIA label for the color mode toggle"
+  },
+  "theme.docs.breadcrumbs.navAriaLabel": {
+    "message": "Breadcrumbs",
+    "description": "The ARIA label for the breadcrumbs"
+  },
+  "theme.docs.DocCard.categoryDescription.plurals": {
+    "message": "1 Eintrag|{count} Einträge",
+    "description": "The default description for a category card in the generated index about how many items this category includes"
+  },
+  "theme.docs.paginator.navAriaLabel": {
+    "message": "Dokumentation Seiten",
+    "description": "The ARIA label for the docs pagination"
+  },
+  "theme.docs.paginator.previous": {
+    "message": "Zurück",
+    "description": "The label used to navigate to the previous doc"
+  },
+  "theme.docs.paginator.next": {
+    "message": "Weiter",
+    "description": "The label used to navigate to the next doc"
+  },
+  "theme.docs.tagDocListPageTitle.nDocsTagged": {
+    "message": "Ein doc getaggt|{count} docs getaggt",
+    "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.docs.tagDocListPageTitle": {
+    "message": "{nDocsTagged} mit \"{tagName}\"",
+    "description": "The title of the page for a docs tag"
+  },
+  "theme.docs.versionBadge.label": {
+    "message": "Version: {versionLabel}"
+  },
+  "theme.docs.versions.unreleasedVersionLabel": {
+    "message": "Das ist die unveröffentlichte Dokumentation für {siteTitle} {versionLabel}.",
+    "description": "The label used to tell the user that he's browsing an unreleased doc version"
+  },
+  "theme.docs.versions.unmaintainedVersionLabel": {
+    "message": "Das ist die Dokumentation für {siteTitle} {versionLabel} und wird nicht weiter gewartet.",
+    "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+  },
+  "theme.docs.versions.latestVersionSuggestionLabel": {
+    "message": "Für die aktuellste Dokumentation bitte auf {latestVersionLink} ({versionLabel}) gehen.",
+    "description": "The label used to tell the user to check the latest version"
+  },
+  "theme.docs.versions.latestVersionLinkLabel": {
+    "message": "letzte Version",
+    "description": "The label used for the latest version suggestion link label"
+  },
+  "theme.common.editThisPage": {
+    "message": "Diese Seite bearbeiten",
+    "description": "The link label to edit the current page"
+  },
+  "theme.common.headingLinkTitle": {
+    "message": "Direkter Link zur {heading}",
+    "description": "Title for link to heading"
+  },
+  "theme.lastUpdated.atDate": {
+    "message": " am {date}",
+    "description": "The words used to describe on which date a page has been last updated"
+  },
+  "theme.lastUpdated.byUser": {
+    "message": " von {user}",
+    "description": "The words used to describe by who the page has been last updated"
+  },
+  "theme.lastUpdated.lastUpdatedAtBy": {
+    "message": "Letztes Update{atDate}{byUser}",
+    "description": "The sentence used to display when a page has been last updated, and by who"
+  },
+  "theme.navbar.mobileVersionsDropdown.label": {
+    "message": "Versionen",
+    "description": "The label for the navbar versions dropdown on mobile view"
+  },
+  "theme.NotFound.title": {
+    "message": "Seite nicht gefunden",
+    "description": "The title of the 404 page"
+  },
+  "theme.tags.tagsListLabel": {
+    "message": "Tags:",
+    "description": "The label alongside a tag list"
+  },
+  "theme.AnnouncementBar.closeButtonAriaLabel": {
+    "message": "Schließen",
+    "description": "The ARIA label for close button of announcement bar"
+  },
+  "theme.admonition.caution": {
+    "message": "vorsicht",
+    "description": "The default label used for the Caution admonition (:::caution)"
+  },
+  "theme.admonition.danger": {
+    "message": "gefahr",
+    "description": "The default label used for the Danger admonition (:::danger)"
+  },
+  "theme.admonition.info": {
+    "message": "info",
+    "description": "The default label used for the Info admonition (:::info)"
+  },
+  "theme.admonition.note": {
+    "message": "hinweis",
+    "description": "The default label used for the Note admonition (:::note)"
+  },
+  "theme.admonition.tip": {
+    "message": "tipp",
+    "description": "The default label used for the Tip admonition (:::tip)"
+  },
+  "theme.admonition.warning": {
+    "message": "warnung",
+    "description": "The default label used for the Warning admonition (:::warning)"
+  },
+  "theme.blog.sidebar.navAriaLabel": {
+    "message": "Navigation der letzten Beiträge im Blog",
+    "description": "The ARIA label for recent posts in the blog sidebar"
+  },
+  "theme.DocSidebarItem.expandCategoryAriaLabel": {
+    "message": "Expand sidebar category '{label}'",
+    "description": "The ARIA label to expand the sidebar category"
+  },
+  "theme.DocSidebarItem.collapseCategoryAriaLabel": {
+    "message": "Collapse sidebar category '{label}'",
+    "description": "The ARIA label to collapse the sidebar category"
+  },
+  "theme.IconExternalLink.ariaLabel": {
+    "message": "(opens in new tab)",
+    "description": "The ARIA label for the external link icon"
+  },
+  "theme.NavBar.navAriaLabel": {
+    "message": "Main",
+    "description": "The ARIA label for the main navigation"
+  },
+  "theme.navbar.mobileLanguageDropdown.label": {
+    "message": "Sprachen",
+    "description": "The label for the mobile language switcher dropdown"
+  },
+  "theme.NotFound.p1": {
+    "message": "Wir konnten nicht finden, wonach Sie gesucht haben.",
+    "description": "The first paragraph of the 404 page"
+  },
+  "theme.NotFound.p2": {
+    "message": "Bitte kontaktieren Sie den Besitzer der Seite, die Sie mit der ursprünglichen URL verlinkt hat, und teilen Sie ihm mit, dass der Link nicht mehr funktioniert.",
+    "description": "The 2nd paragraph of the 404 page"
+  },
+  "theme.TOCCollapsible.toggleButtonLabel": {
+    "message": "Auf dieser Seite",
+    "description": "The label used by the button on the collapsible TOC component"
+  },
+  "theme.blog.post.readMore": {
+    "message": "Mehr lesen",
+    "description": "The label used in blog post item excerpts to link to full blog posts"
+  },
+  "theme.blog.post.readMoreLabel": {
+    "message": "Mehr lesen über {title}",
+    "description": "The ARIA label for the link to full blog posts from excerpts"
+  },
+  "theme.blog.post.readingTime.plurals": {
+    "message": "Eine Minute Lesezeit|{readingTime} Minuten Lesezeit",
+    "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.CodeBlock.copy": {
+    "message": "Kopieren",
+    "description": "The copy button label on code blocks"
+  },
+  "theme.CodeBlock.copied": {
+    "message": "Kopiert",
+    "description": "The copied button label on code blocks"
+  },
+  "theme.CodeBlock.copyButtonAriaLabel": {
+    "message": "In die Zwischenablage kopieren",
+    "description": "The ARIA label for copy code blocks button"
+  },
+  "theme.CodeBlock.wordWrapToggle": {
+    "message": "Toggle word wrap",
+    "description": "The title attribute for toggle word wrapping button of code block lines"
+  },
+  "theme.docs.breadcrumbs.home": {
+    "message": "Home page",
+    "description": "The ARIA label for the home page in the breadcrumbs"
+  },
+  "theme.docs.sidebar.collapseButtonTitle": {
+    "message": "Seitenleiste einklappen",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.collapseButtonAriaLabel": {
+    "message": "Seitenleiste einklappen",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.navAriaLabel": {
+    "message": "Docs sidebar",
+    "description": "The ARIA label for the sidebar navigation"
+  },
+  "theme.docs.sidebar.closeSidebarButtonAriaLabel": {
+    "message": "Close navigation bar",
+    "description": "The ARIA label for close button of mobile sidebar"
+  },
+  "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+    "message": "← Zurück zum Hauptmenü",
+    "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+  },
+  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+    "message": "Toggle navigation bar",
+    "description": "The ARIA label for hamburger menu button of mobile navigation"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": {
+    "message": "Expand the dropdown",
+    "description": "The ARIA label of the button to expand the mobile dropdown navbar item"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": {
+    "message": "Collapse the dropdown",
+    "description": "The ARIA label of the button to collapse the mobile dropdown navbar item"
+  },
+  "theme.docs.sidebar.expandButtonTitle": {
+    "message": "Seitenleiste ausklappen",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.sidebar.expandButtonAriaLabel": {
+    "message": "Seitenleiste ausklappen",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.SearchBar.seeAll": {
+    "message": "Alle {count} Ergebnisse anzeigen"
+  },
+  "theme.SearchPage.documentsFound.plurals": {
+    "message": "Ein Dokument gefunden|{count} Dokumente gefunden",
+    "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.SearchPage.existingResultsTitle": {
+    "message": "Suchergebnisse für \"{query}\"",
+    "description": "The search page title for non-empty query"
+  },
+  "theme.SearchPage.emptyResultsTitle": {
+    "message": "Suche in der Dokumentation",
+    "description": "The search page title for empty query"
+  },
+  "theme.SearchPage.inputPlaceholder": {
+    "message": "Geben Sie hier Ihre Suche ein",
+    "description": "The placeholder for search page input"
+  },
+  "theme.SearchPage.inputLabel": {
+    "message": "Suche",
+    "description": "The ARIA label for search page input"
+  },
+  "theme.SearchPage.algoliaLabel": {
+    "message": "Unterstützt von Algolia",
+    "description": "The description label for Algolia mention"
+  },
+  "theme.SearchPage.noResultsText": {
+    "message": "Es wurden keine Ergebnisse gefunden",
+    "description": "The paragraph for empty search result"
+  },
+  "theme.SearchPage.fetchingNewResults": {
+    "message": "Neue Ergebnisse abrufen...",
+    "description": "The paragraph for fetching new search results"
+  },
+  "theme.SearchBar.label": {
+    "message": "Suche",
+    "description": "The ARIA label and placeholder for search button"
+  },
+  "theme.SearchModal.searchBox.resetButtonTitle": {
+    "message": "Clear the query",
+    "description": "The label and ARIA label for search box reset button"
+  },
+  "theme.SearchModal.searchBox.cancelButtonText": {
+    "message": "Cancel",
+    "description": "The label and ARIA label for search box cancel button"
+  },
+  "theme.SearchModal.searchBox.placeholderText": {
+    "message": "Dokumentation durchsuchen",
+    "description": "The placeholder text for the main search input field"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAi": {
+    "message": "Weitere Frage stellen...",
+    "description": "The placeholder text when in AI question mode"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": {
+    "message": "Antwortet...",
+    "description": "The placeholder text for search box when AI is streaming an answer"
+  },
+  "theme.SearchModal.searchBox.enterKeyHint": {
+    "message": "suchen",
+    "description": "The hint for the search box enter key text"
+  },
+  "theme.SearchModal.searchBox.enterKeyHintAskAi": {
+    "message": "eingeben",
+    "description": "The hint for the Ask AI search box enter key text"
+  },
+  "theme.SearchModal.searchBox.searchInputLabel": {
+    "message": "Suchen",
+    "description": "The ARIA label for search input"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonText": {
+    "message": "Zurück zur Stichwortsuche",
+    "description": "The text for back to keyword search button"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": {
+    "message": "Zurück zur Stichwortsuche",
+    "description": "The ARIA label for back to keyword search button"
+  },
+  "theme.SearchModal.startScreen.recentSearchesTitle": {
+    "message": "Recent",
+    "description": "The title for recent searches"
+  },
+  "theme.SearchModal.startScreen.noRecentSearchesText": {
+    "message": "No recent searches",
+    "description": "The text when there are no recent searches"
+  },
+  "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
+    "message": "Save this search",
+    "description": "The title for save recent search button"
+  },
+  "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
+    "message": "Remove this search from history",
+    "description": "The title for remove recent search button"
+  },
+  "theme.SearchModal.startScreen.favoriteSearchesTitle": {
+    "message": "Favorite",
+    "description": "The title for favorite searches"
+  },
+  "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
+    "message": "Remove this search from favorites",
+    "description": "The title for remove favorite search button"
+  },
+  "theme.SearchModal.startScreen.recentConversationsTitle": {
+    "message": "Letzte Gespräche",
+    "description": "The title for recent conversations"
+  },
+  "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": {
+    "message": "Dieses Gespräch aus dem Verlauf entfernen",
+    "description": "The title for remove recent conversation button"
+  },
+  "theme.SearchModal.errorScreen.titleText": {
+    "message": "Unable to fetch results",
+    "description": "The title for error screen"
+  },
+  "theme.SearchModal.errorScreen.helpText": {
+    "message": "You might want to check your network connection.",
+    "description": "The help text for error screen"
+  },
+  "theme.SearchModal.resultsScreen.askAiPlaceholder": {
+    "message": "KI fragen: ",
+    "description": "The placeholder text for Ask AI input"
+  },
+  "theme.SearchModal.askAiScreen.disclaimerText": {
+    "message": "Antworten werden von KI generiert und können Fehler enthalten. Bitte überprüfen Sie die Antworten.",
+    "description": "The disclaimer text for AI answers"
+  },
+  "theme.SearchModal.askAiScreen.relatedSourcesText": {
+    "message": "Verwandte Quellen",
+    "description": "The text for related sources"
+  },
+  "theme.SearchModal.askAiScreen.thinkingText": {
+    "message": "Denkt nach...",
+    "description": "The text when AI is thinking"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonText": {
+    "message": "Kopieren",
+    "description": "The text for copy button"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonCopiedText": {
+    "message": "Kopiert!",
+    "description": "The text for copy button when copied"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonTitle": {
+    "message": "Kopieren",
+    "description": "The title for copy button"
+  },
+  "theme.SearchModal.askAiScreen.likeButtonTitle": {
+    "message": "Gefällt mir",
+    "description": "The title for like button"
+  },
+  "theme.SearchModal.askAiScreen.dislikeButtonTitle": {
+    "message": "Gefällt mir nicht",
+    "description": "The title for dislike button"
+  },
+  "theme.SearchModal.askAiScreen.thanksForFeedbackText": {
+    "message": "Danke für Ihr Feedback!",
+    "description": "The text for thanks for feedback"
+  },
+  "theme.SearchModal.askAiScreen.preToolCallText": {
+    "message": "Suche...",
+    "description": "The text before tool call"
+  },
+  "theme.SearchModal.askAiScreen.duringToolCallText": {
+    "message": "Suche nach ",
+    "description": "The text during tool call"
+  },
+  "theme.SearchModal.askAiScreen.afterToolCallText": {
+    "message": "Gesucht nach ",
+    "description": "The text after tool call"
+  },
+  "theme.SearchModal.footer.selectText": {
+    "message": "to select",
+    "description": "The select text for footer"
+  },
+  "theme.SearchModal.footer.submitQuestionText": {
+    "message": "Frage absenden",
+    "description": "The submit question text for footer"
+  },
+  "theme.SearchModal.footer.selectKeyAriaLabel": {
+    "message": "Enter key",
+    "description": "The ARIA label for select key in footer"
+  },
+  "theme.SearchModal.footer.navigateText": {
+    "message": "to navigate",
+    "description": "The navigate text for footer"
+  },
+  "theme.SearchModal.footer.navigateUpKeyAriaLabel": {
+    "message": "Arrow up",
+    "description": "The ARIA label for navigate up key in footer"
+  },
+  "theme.SearchModal.footer.navigateDownKeyAriaLabel": {
+    "message": "Arrow down",
+    "description": "The ARIA label for navigate down key in footer"
+  },
+  "theme.SearchModal.footer.closeText": {
+    "message": "to close",
+    "description": "The close text for footer"
+  },
+  "theme.SearchModal.footer.closeKeyAriaLabel": {
+    "message": "Escape key",
+    "description": "The ARIA label for close key in footer"
+  },
+  "theme.SearchModal.footer.searchByText": {
+    "message": "Powered by",
+    "description": "The 'Powered by' text for footer"
+  },
+  "theme.SearchModal.footer.backToSearchText": {
+    "message": "Zurück zur Suche",
+    "description": "The back to search text for footer"
+  },
+  "theme.SearchModal.noResultsScreen.noResultsText": {
+    "message": "No results for",
+    "description": "The text when there are no results"
+  },
+  "theme.SearchModal.noResultsScreen.suggestedQueryText": {
+    "message": "Try searching for",
+    "description": "The text for suggested query"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsText": {
+    "message": "Believe this query should return results?",
+    "description": "The text for reporting missing results"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
+    "message": "Let us know.",
+    "description": "The link text for reporting missing results"
+  },
+  "theme.SearchModal.placeholder": {
+    "message": "Search docs",
+    "description": "The placeholder of the input of the DocSearch pop-up modal"
+  },
+  "theme.blog.post.plurals": {
+    "message": "Ein Post|{count} Posts",
+    "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.tagTitle": {
+    "message": "{nPosts} getaggt mit \"{tagName}\"",
+    "description": "The title of the page for a blog tag"
+  },
+  "theme.blog.author.pageTitle": {
+    "message": "{authorName} - {nPosts}",
+    "description": "The title of the page for a blog author"
+  },
+  "theme.blog.authorsList.pageTitle": {
+    "message": "Authors",
+    "description": "The title of the authors page"
+  },
+  "theme.blog.authorsList.viewAll": {
+    "message": "View All Authors",
+    "description": "The label of the link targeting the blog authors page"
+  },
+  "theme.blog.author.noPosts": {
+    "message": "This author has not written any posts yet.",
+    "description": "The text for authors with 0 blog post"
+  },
+  "theme.contentVisibility.unlistedBanner.title": {
+    "message": "Unlisted page",
+    "description": "The unlisted content banner title"
+  },
+  "theme.contentVisibility.unlistedBanner.message": {
+    "message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.",
+    "description": "The unlisted content banner message"
+  },
+  "theme.contentVisibility.draftBanner.title": {
+    "message": "Draft page",
+    "description": "The draft content banner title"
+  },
+  "theme.contentVisibility.draftBanner.message": {
+    "message": "This page is a draft. It will only be visible in dev and be excluded from the production build.",
+    "description": "The draft content banner message"
+  },
+  "theme.ErrorPageContent.tryAgain": {
+    "message": "Nochmal versuchen",
+    "description": "The label of the button to try again rendering when the React error boundary captures an error"
+  },
+  "theme.common.skipToMainContent": {
+    "message": "Zum Hauptinhalt springen",
+    "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+  },
+  "theme.tags.tagsPageTitle": {
+    "message": "Tags",
+    "description": "The title of the tag list page"
+  }
+}
diff --git a/i18n/de/docusaurus-plugin-content-blog/options.json b/i18n/de/docusaurus-plugin-content-blog/options.json
new file mode 100644
index 0000000..9239ff7
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-blog/options.json
@@ -0,0 +1,14 @@
+{
+  "title": {
+    "message": "Blog",
+    "description": "The title for the blog used in SEO"
+  },
+  "description": {
+    "message": "Blog",
+    "description": "The description for the blog used in SEO"
+  },
+  "sidebar.title": {
+    "message": "Recent posts",
+    "description": "The label for the left sidebar"
+  }
+}
diff --git a/i18n/de/docusaurus-plugin-content-docs/current.json b/i18n/de/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 0000000..d2bbe67
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,62 @@
+{
+  "version.label": {
+    "message": "Next",
+    "description": "The label for version current"
+  },
+  "sidebar.docs.category.What's new and migration": {
+    "message": "Neuigkeiten und Migration",
+    "description": "The label for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.What's new and migration.link.generated-index.title": {
+    "message": "Neuigkeiten und Migration",
+    "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.API": {
+    "message": "API",
+    "description": "The label for category 'API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText methods": {
+    "message": "RichText-Methoden",
+    "description": "The label for category 'RichText methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API": {
+    "message": "Internes API von RichText",
+    "description": "The label for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API.link.generated-index.title": {
+    "message": "Internes API – Übersicht",
+    "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Event Bus methods": {
+    "message": "Event-Bus-Methoden",
+    "description": "The label for category 'Event Bus methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.State methods": {
+    "message": "Zustandsmethoden",
+    "description": "The label for category 'State methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText events": {
+    "message": "RichText-Ereignisse",
+    "description": "The label for category 'RichText events' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText properties": {
+    "message": "RichText-Eigenschaften",
+    "description": "The label for category 'RichText properties' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks": {
+    "message": "Integration mit Frameworks",
+    "description": "The label for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks.link.generated-index.title": {
+    "message": "Integration mit Frameworks",
+    "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides": {
+    "message": "Leitfäden",
+    "description": "The label for category 'Guides' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides.link.generated-index.title": {
+    "message": "Leitfäden",
+    "description": "The generated-index page title for category 'Guides' in sidebar 'docs'"
+  }
+}
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/default-styles.md
new file mode 100644
index 0000000..61ba93c
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/default-styles.md
@@ -0,0 +1,144 @@
+---
+sidebar_label: defaultStyles
+title: defaultStyles Config
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die defaultStyles-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# defaultStyles
+
+### Beschreibung {#description}
+
+@short: Optional. Gibt Standard-Stilwerte für bestimmte Blocktypen an
+
+### Verwendung {#usage}
+
+~~~jsx {}
+defaultStyles?: {
+    "*"?: { // wirkt sich auf alle Blöcke aus und ermöglicht das Festlegen gemeinsamer Eigenschaften für alle diese Blöcke
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+:::important[Wichtig]
+Die Eigenschaft `defaultStyles` setzt KEIN tatsächliches CSS für die betroffenen Blöcke. CSS-Stile müssen separat angewendet werden:
+
+```jsx title="index.js"
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+<style>
+    #root h2 {
+        font-family: Roboto;
+        font-size: 28px;
+        color: purple;
+        background: #FFC0CB;
+    }
+</style>
+```
+
+In diesem Beispiel werden allen `h2`-Blöcken die Schriftfamilie `"Roboto"` mit einer Schriftgröße von 28px zugewiesen und sowohl die Vordergrund- als auch die Hintergrundfarbe geändert. CSS-Stile werden ebenfalls auf `h2`-Blöcke angewendet.
+:::
+
+### Standardkonfiguration {#default-config}
+
+~~~jsx
+const defaultStyles = {
+    "*": { "font-family": "Arial" },
+    p: { "font-size": "14px" },
+    blockquote: { "font-size": "14px" },
+    h1: { "font-size": "32px" },
+    h2: { "font-size": "24px" },
+    h3: { "font-size": "18px" },
+    h4: { "font-size": "16px" },
+    h5: { "font-size": "14px" },
+    h6: { "font-size": "12px" }
+};
+~~~
+
+### Beispiel {#example}
+
+~~~jsx {3-13}
+// RichText initialisieren
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        h5: {
+            "font-family": "Roboto"
+        },
+        h6: {
+            "font-family": "Roboto"
+        }
+    },
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 aktualisiert
+
+**Verwandte Artikel:** [Konfiguration](guides/configuration.md)
+
+**Verwandtes Beispiel:** [RichText. Standardwert für Typografie ändern (Schriftart, Schriftgröße usw.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
new file mode 100644
index 0000000..7ce5686
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: fullscreenMode
+title: fullscreenMode Config
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die fullscreenMode-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# fullscreenMode
+
+### Beschreibung {#description}
+
+@short: Optional. Aktiviert den Vollbildmodus von RichText
+
+### Verwendung {#usage}
+
+~~~jsx {}
+fullscreenMode?: boolean;
+~~~
+
+### Standardkonfiguration {#default-config}
+
+~~~jsx
+fullscreenMode: false;
+~~~
+
+### Beispiel {#example}
+
+~~~jsx {3}
+// RichText initialisieren
+new richtext.Richtext("#root", {
+    fullscreenMode: true
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt
+
+**Verwandte Artikel:** [Konfiguration](guides/configuration.md)
+
+**Verwandtes Beispiel:** [RichText. Vollständige Toolbar](https://snippet.dhtmlx.com/ziynafp7?tag=richtext)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
new file mode 100644
index 0000000..c9bfc98
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: imageUploadUrl
+title: imageUploadUrl Config
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die imageUploadUrl-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# imageUploadUrl
+
+### Beschreibung {#description}
+
+@short: Optional. Gibt die URL an, die für den Bild-Upload verwendet wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+imageUploadUrl?: string;
+~~~
+
+### Beispiel {#example}
+
+~~~jsx {3}
+// RichText initialisieren
+new richtext.Richtext("#root", {
+    imageUploadUrl: "some URL"
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt
+
+**Verwandte Artikel:** [Konfiguration](guides/configuration.md)
+
+**Verwandtes Beispiel:** [RichText. Initialisierung](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
new file mode 100644
index 0000000..c94fa59
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: layoutMode
+title: layoutMode Config
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die layoutMode-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# layoutMode
+
+### Beschreibung {#description}
+
+@short: Optional. Gibt den Layout-Modus für den Haupteditorbereich an
+
+### Verwendung {#usage}
+
+~~~jsx {}
+layoutMode: "classic" | "document";
+~~~
+
+Der Modus `"classic"` stellt den Bearbeitungsbereich dar, der die gesamte Seite ausfüllt. Der Modus `"document"` entspricht den tatsächlichen Dokumentgrößen (verwendete Größen: A4, A5, A6, A7).
+
+### Standardkonfiguration {#default-config}
+
+~~~jsx
+layoutMode: "classic";
+~~~
+
+### Beispiel {#example}
+
+~~~jsx {3}
+// RichText initialisieren
+new richtext.Richtext("#root", {
+    layoutMode: "document"  // initialisiert RichText standardmäßig im "document"-Modus
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 anstelle der entfernten Eigenschaft `mode` hinzugefügt
+
+**Verwandte Artikel:** [Konfiguration](guides/configuration.md)
+
+**Verwandtes Beispiel:** [RichText. Initialisierung](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/locale.md
new file mode 100644
index 0000000..a6f4ab9
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/locale.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: locale
+title: locale Config
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die locale-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# locale
+
+### Beschreibung {#description}
+
+@short: Optional. Ein Objekt, das die Lokalisierungsbezeichnungen von RichText enthält
+
+:::info[Info]
+Das **locale**-Objekt muss alle Bezeichnungen von RichText mit den entsprechenden Übersetzungen enthalten.
+:::
+
+### Verwendung {#usage}
+
+~~~jsx {}
+locale?: object;
+~~~
+
+### Standardkonfiguration {#default-config}
+
+Standardmäßig verwendet RichText die **englische** Locale. Sie können auch eine benutzerdefinierte Locale festlegen.
+
+:::tip[Tipp]
+Um die aktuelle Locale dynamisch zu ändern, können Sie die Methode [**setLocale()**](api/methods/set-locale.md) von RichText verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {3}
+// RichText initialisieren
+const editor = new richtext.RichText("#root", {
+    locale: richtext.locales.cn // die chinesische Locale wird initial gesetzt
+    // locale: richtext.locales.en // die englische Locale wird initial gesetzt
+    // locale: richtext.locales.de // die deutsche Locale wird initial gesetzt
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt
+
+**Verwandte Artikel:** [Lokalisierung](guides/localization.md)
+
+**Verwandtes Beispiel:** [RichText. Lokalisierung](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/menubar.md
new file mode 100644
index 0000000..9444539
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/menubar.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: menubar
+title: menubar Config
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die menubar-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# menubar
+
+### Beschreibung {#description}
+
+@short: Optional. Aktiviert die obere menubar von RichText
+
+### Verwendung {#usage}
+
+~~~jsx {}
+menubar?: boolean;
+~~~
+
+### Beispiel {#example}
+
+~~~jsx {3}
+// RichText initialisieren
+new richtext.Richtext("#root", {
+    menubar: true
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt
+
+**Verwandte Artikel:** [Konfiguration](guides/configuration.md)
+
+**Verwandtes Beispiel:** [RichText. Initialisierung mit menubar](https://snippet.dhtmlx.com/tjryzka7?tag=richtext)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/toolbar.md
new file mode 100644
index 0000000..fac6ac9
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/toolbar.md
@@ -0,0 +1,219 @@
+---
+sidebar_label: toolbar
+title: toolbar Config
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die toolbar-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# toolbar
+
+### Beschreibung {#description}
+
+@short: Optional. Aktiviert die toolbar und ermöglicht das Festlegen/Konfigurieren der darin angezeigten Schaltflächen
+
+### Verwendung {#usage}
+
+~~~jsx {}
+toolbar?: boolean | Array<string | { id: string, type: string, label?: string, tooltip?: string, css?: string, handler?: () => any }>;
+~~~
+
+#### Verfügbare Schaltflächen in der Toolbar {#available-buttons-within-toolbar}
+
+Sie können die folgenden Schaltflächen in der RichText-toolbar angeben:
+
+| Schaltfläche        | Beschreibung                                                                              |
+|---------------------|-------------------------------------------------------------------------------------------|
+| `undo`              | Macht die letzte Benutzeraktion rückgängig.                                               |
+| `redo`              | Stellt die zuvor rückgängig gemachte Aktion wieder her.                                   |
+| `style`             | Ermöglicht die Auswahl von Textstilen (z. B. Überschriften, Absatz usw.).                 |
+| `font-family`       | Ändert die Schriftart des markierten Textes.                                              |
+| `font-size`         | Passt die Größe des markierten Textes an.                                                 |
+| `bold`              | Wendet Fettformatierung auf den markierten Text an.                                       |
+| `italic`            | Wendet Kursivformatierung auf den markierten Text an.                                     |
+| `underline`         | Unterstreicht den markierten Text.                                                        |
+| `strike`            | Wendet Durchstreichformatierung an.                                                       |
+| `subscript`         | Formatiert den Text als tiefgestellten Text.                                              |
+| `superscript`       | Formatiert den Text als hochgestellten Text.                                              |
+| `text-color`        | Ändert die Textfarbe.                                                                     |
+| `background-color`  | Ändert die Hintergrundfarbe (Hervorhebung) des Textes.                                   |
+| `align`             | Legt die Textausrichtung fest (links, zentriert, rechts, Blocksatz).                     |
+| `indent`            | Erhöht den Einzug des Textblocks.                                                        |
+| `outdent`           | Verringert den Absatzeinzug.                                                              |
+| `line-height`       | Passt den Zeilenabstand (Zeilenhöhe) an.                                                 |
+| `quote`             | Formatiert den Text als Blockzitat.                                                       |
+| `bulleted-list`     | Erstellt eine Aufzählungsliste.                                                           |
+| `numbered-list`     | Erstellt eine nummerierte Liste.                                                          |
+| `link`              | Fügt einen Hyperlink ein.                                                                 |
+| `image`             | Fügt ein Bild ein.                                                                        |
+| `line`              | Fügt eine horizontale Linie ein.                                                          |
+| `clear`             | Entfernt alle Formatierungen vom markierten Text.                                         |
+| `print`             | Öffnet den Druckdialog.                                                                   |
+| `fullscreen`        | Schaltet den Vollbildmodus um.                                                            |
+| `mode`              | Wechselt zwischen [Layout-Modi](api/config/layout-mode.md) (classic/document)            |
+| `shortcuts`         | Zeigt eine Liste der verfügbaren Tastaturkürzel an.                                      |
+| `separator`         | Fügt einen visuellen Trenner zwischen toolbar-Gruppen ein.                               |
+
+Sie können diese Zeichenketten verwenden, um toolbar-Schaltflächen wie folgt zu konfigurieren:
+
+~~~jsx {2-7}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // weitere Schaltflächen
+    ],
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+#### Benutzerdefinierte Schaltflächen in der Toolbar {#custom-buttons-within-toolbar}
+
+Sie können benutzerdefinierte Schaltflächen als Objekte mit den folgenden Parametern angeben:
+
+- `type` - (erforderlich) gibt einen benutzerdefinierten Steuerelementtyp an. Folgende Typen sind verfügbar: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` - (optional) eine benutzerdefinierte Steuerelement-ID (darf nicht mit einer vorhandenen Steuerelement-ID übereinstimmen)
+- `label` - (optional) eine Schaltflächenbeschriftung (wird mit dem Symbol kombiniert)
+- `tooltip` - (optional) ein Tooltip, der beim Hovern angezeigt wird (wenn nicht angegeben, wird der Wert von "label" verwendet)
+- `css` - (optional) ein CSS-Klassenname, der dem Steuerelement zugewiesen wird (standardmäßig unterstützte Klassen: wx-primary, wx-secondary)
+- `handler` - (optional) eine Callback-Funktion, die beim Klicken auf die Schaltfläche ausgeführt wird
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // Schaltflächen (Zeichenketten repräsentieren nur Schaltflächen)
+        "bold",
+        "italic",
+        // vordefinierte Schaltflächen (Benutzer können keine weiteren Optionen für diese definieren (keine Beschriftungen, Tooltips, Optionen usw.), daher nur ({ type: "button", id: string })
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // Benutzer müssen den richtigen Typ angeben, wenn sie ein vordefiniertes Steuerelement verwenden möchten (z. B. richselect/colorpicker)
+        // nicht übereinstimmende Typen werden ignoriert (nicht zur toolbar hinzugefügt)
+        {
+            type: "richselect", // type: "button" - falsch, wird ignoriert
+            id: "mode",
+        },
+        // benutzerdefinierte Schaltflächen (unterstützte Optionen sind unten aufgeführt)
+        // Benutzer können nur benutzerdefinierte Schaltflächen definieren (derzeit keine richselect/colorpicker-Unterstützung)
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* benutzerdefinierte Logik */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* benutzerdefinierte Logik */}
+        }
+    ],
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+#### Toolbar ausblenden {#hide-toolbar}
+
+Wenn Sie die toolbar ausblenden möchten, setzen Sie die Eigenschaft `toolbar` wie folgt auf `false`:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+### Standardkonfiguration {#default-config}
+
+~~~jsx
+const defaultToolbarButtons = {
+    "undo",
+    "redo",
+    "separator",
+    "style",
+    "separator",
+    "font-family",
+    "font-size",
+    "separator",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "separator",
+    "text-color",
+    "background-color",
+    "separator",
+    "align",
+    "line-height",
+    "outdent",
+    "indent",
+    "separator",
+    "bulleted-list",
+    "numbered-list",
+    "quote",
+    "separator",
+    "link",
+    "image",
+    "separator",
+    "clear",
+    "separator",
+    "fullscreen",
+    "mode"
+};
+~~~
+
+:::tip[Tipp]
+Die Standard-toolbar-Steuerelemente werden vom RichText-Widget exportiert und sind über `richtext.defaultToolbarButtons` zugänglich.
+
+```jsx{4}
+// RichText initialisieren
+new richtext.Richtext("#root", {
+    toolbar: [
+        ...richtext.defaultToolbarButtons,
+        {
+            type: "button",
+            id: "btn1", // Schaltflächen-ID (darf nicht mit vorhandenen Schaltflächen-IDs übereinstimmen, wenn Sie benutzerdefinierte Logik anwenden möchten)
+            icon: "wxo-help", // Schaltflächensymbol (wird mit der Beschriftung kombiniert)
+            css: "rounded", // CSS-Klassenname, der dem Steuerelement zugewiesen wird (standardmäßig unterstützte Klassen: wx-primary, wx-secondary)
+            label: "Custom button", // Schaltflächenbeschriftung (wird mit dem Symbol kombiniert)
+            tooltip: "Some tooltip", // Tooltip, der beim Hovern angezeigt wird (wenn nicht angegeben, wird der Wert von "label" verwendet)
+        }
+    ]
+    // weitere Konfigurationseigenschaften
+});
+```
+:::
+
+### Beispiel {#example}
+
+~~~jsx {3-18}
+// RichText initialisieren
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // benutzerdefinierte Schaltflächen (alle unterstützten Optionen werden unten verwendet)
+        // Benutzer können nur benutzerdefinierte Schaltflächen definieren (derzeit keine richselect/colorpicker-Unterstützung)
+        {
+            type: "button",
+            id: "btn1", // Schaltflächen-ID (darf nicht mit vorhandenen Schaltflächen-IDs übereinstimmen, wenn Sie benutzerdefinierte Logik anwenden möchten)
+            icon: "wxo-help", // Schaltflächensymbol (wird mit der Beschriftung kombiniert)
+            css: "rounded", // CSS-Klassenname, der dem Steuerelement zugewiesen wird (standardmäßig unterstützte Klassen: wx-primary, wx-secondary)
+            label: "Custom button", // Schaltflächenbeschriftung (wird mit dem Symbol kombiniert)
+            tooltip: "Some tooltip", // Tooltip, der beim Hovern angezeigt wird (wenn nicht angegeben, wird der Wert von "label" verwendet)
+            handler: () => ..., // benutzerdefinierte Logik, die dieser Schaltfläche zugeordnet ist
+        }
+    ]
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt
+
+**Verwandte Artikel:** [Konfiguration](guides/configuration.md)
+
+**Verwandtes Beispiel:** [RichText. Benutzerdefiniertes Steuerelement und vereinfachte Toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/value.md
new file mode 100644
index 0000000..8a7e607
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/value.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: value
+title: value Config
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die value-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# value
+
+### Beschreibung {#description}
+
+@short: Optional. Gibt den Anfangswert (Inhalt) an, der im Editorbereich von RichText angezeigt wird
+
+:::tip[Tipp]
+Wenn Sie den Wert (Inhalt) in einem benutzerdefinierten Format setzen möchten, verwenden Sie die eingebaute Methode [`setValue()`](api/methods/set-value.md).
+:::
+
+### Verwendung {#usage}
+
+~~~jsx {}
+value?: string;
+~~~
+
+### Beispiel {#example}
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    value: "<h1>some value</h1>" // setzt den Standardwert (HTML-Format)
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt
+
+**Verwandte Artikel:** [Konfiguration](guides/configuration.md)
+
+**Verwandtes Beispiel:** [RichText. Initialisierung](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/align.md
new file mode 100644
index 0000000..a4adaab
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/align.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: align
+title: align Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das align-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# align
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn die Textausrichtung über menubar/toolbar oder Event-Bus-Methoden geändert wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"align": ({
+    align: "left" | "center" | "right" | "justify"
+}) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **align**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `align` - eine Textausrichtung. Sie können einen der folgenden Werte angeben: `"left" | "center" | "right" | "justify"`
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-12}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "align"-Ereignis abonnieren
+editor.api.on("align", (obj) => {
+    console.log(`Align to: ${obj.align}`);
+});
+// Text linksbündig ausrichten
+editor.api.exec("align", {
+    align: "left"
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
new file mode 100644
index 0000000..2165df8
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: clear-text-format
+title: clear-text-format Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das clear-text-format-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# clear-text-format
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn eine Textformatierung über menubar/toolbar oder Event-Bus-Methoden entfernt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"clear-text-format": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-10}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "clear-text-format"-Ereignis abonnieren
+editor.api.on("clear-text-format", () => {
+    console.log("Text format was cleared");
+});
+// Textformatierung entfernen
+editor.api.exec("clear-text-format", {});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/copy.md
new file mode 100644
index 0000000..879777e
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/copy.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: copy
+title: copy Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das copy-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# copy
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn markierter Text kopiert wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"copy": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "copy"-Ereignis abonnieren
+editor.api.on("copy", () => {
+    console.log("Selected text was copied");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/create-new.md
new file mode 100644
index 0000000..61fa492
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/create-new.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: create-new
+title: create-new Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das create-new-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# create-new
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn die Option "Neu" in der menubar ausgewählt oder über Event-Bus-Methoden aufgerufen wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"create-new": ({ reset?: boolean }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **create-new**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `reset` - setzt den Verlauf beim Erstellen einer neuen Datei zurück
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-10}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "create-new"-Ereignis abonnieren
+editor.api.on("create-new", ({ reset }) => {
+    console.log(`Document has been cleared. History has ${reset ? "" : "not"} been reset.`);
+});
+// neue Datei erstellen und Verlauf zurücksetzen
+editor.api.exec("create-new", { reset: true });
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/cut.md
new file mode 100644
index 0000000..2e482ad
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/cut.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: cut
+title: cut Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das cut-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# cut
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn markierter Text ausgeschnitten wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"cut": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "cut"-Ereignis abonnieren
+editor.api.on("cut", () => {
+    console.log("Selected text was cut");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/delete-link.md
new file mode 100644
index 0000000..27531cb
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/delete-link.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: delete-link
+title: delete-link Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das delete-link-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# delete-link
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Link gelöscht wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"delete-link": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "delete-link"-Ereignis abonnieren
+editor.api.on("delete-link", () => {
+    console.log("The link was deleted");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/export.md
new file mode 100644
index 0000000..a7ce56a
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/export.md
@@ -0,0 +1,59 @@
+---
+sidebar_label: export
+title: export Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das export-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# export
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, nachdem die Option "Exportieren" in der menubar ausgewählt oder über Event-Bus-Methoden aufgerufen wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"export": ({ options: IExportOptions; result?: any }) => boolean | void;
+
+interface IExportOptions {
+    format?: "docx" | "pdf";
+    url?: string;
+    download?: boolean;
+    fileName?: string;
+}
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **export**-Ereignisses kann ein Objekt mit folgenden Parametern entgegennehmen:
+
+- `format` - ein Dateiformat
+- `url` - eine Basis-URL für den Dateiexport
+- `download` - ermöglicht es dem Benutzer anzugeben, ob die Datei nach Erhalt der Server-Antwort heruntergeladen werden soll. Wenn die Eigenschaft auf `false` gesetzt ist, wird die Datei nicht heruntergeladen, stattdessen kann der Benutzer Blob-Daten aus dem Ereignisobjekt abrufen (siehe die Eigenschaft `result` in der Ereignisdefinition)
+- `fileName` - ein Dateiname für den Export
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-15}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "export"-Ereignis abonnieren
+editor.api.on("export", (obj) => {
+    console.log(obj);
+    console.log("The file was exported");
+});
+// Wert als PDF-Datei exportieren
+editor.api.exec("export", {
+    format: "pdf",
+    download: false,
+    fileName: "some file"
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/import.md
new file mode 100644
index 0000000..d22499e
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/import.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: import
+title: import Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das import-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# import
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, nachdem die Option "Importieren" in der menubar ausgewählt oder über Event-Bus-Methoden aufgerufen wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"import": ({ html?: string }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **import**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `html` - ein Textwert im HTML-Format
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-13}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "import"-Ereignis abonnieren
+editor.api.on("import", (obj) => {
+    console.log(obj.html);
+    console.log("The new value was imported");
+});
+// neuen Wert importieren
+editor.api.exec("import", {
+    html: "<h2>some value</h2>" // ruft einfach setValue auf
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/indent.md
new file mode 100644
index 0000000..4b7a993
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/indent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: indent
+title: indent Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das indent-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# indent
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn der Blockeinzug vergrößert wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"indent": ({ step: number }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **indent**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `step` - der Schritt, um den der Einzug vergrößert wurde
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "indent"-Ereignis abonnieren
+editor.api.on("indent", (obj) => {
+    console.log(obj);
+    console.log("The indention was increased");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-image.md
new file mode 100644
index 0000000..ba41f08
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-image.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: insert-image
+title: insert-image Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das insert-image-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# insert-image
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Bild eingefügt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"insert-image": (IImageContext) => boolean | void;
+
+interface IImageContext {
+    id: TID;
+    value: string;
+    width: number;
+    height: number;
+    // zusätzliche Eigenschaften aus dem Uploader-Kontext, für die eigentliche Aktion nicht erforderlich
+    name?: string;
+    file?: File;
+    status?: string;
+    selected: (ctx: IImageContext) => void;
+    uploaded: (ctx: IImageContext) => void;
+}
+~~~
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "insert-image"-Ereignis abonnieren
+editor.api.on("insert-image", (obj) => {
+    console.log(obj);
+    console.log("The image was inserted");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-line.md
new file mode 100644
index 0000000..5d609a4
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-line.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: insert-line
+title: insert-line Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das insert-line-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# insert-line
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn eine horizontale Linie eingefügt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"insert-line": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "insert-line"-Ereignis abonnieren
+editor.api.on("insert-line", () => {
+    console.log("The horizontal line was inserted");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-link.md
new file mode 100644
index 0000000..efa2c95
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-link.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: insert-link
+title: insert-link Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das insert-link-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# insert-link
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Link eingefügt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"insert-link": ({ url: string }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **update-link**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `url` - die einzufügende URL
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "insert-link"-Ereignis abonnieren
+editor.api.on("insert-link", (obj) => {
+    console.log(obj)
+    console.log("The following link was inserted: " + obj.url);
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-list.md
new file mode 100644
index 0000000..297e41c
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-list.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: insert-list
+title: insert-list Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das insert-list-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# insert-list
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn eine Liste eingefügt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"insert-list": ({ type: TListType }) => boolean | void;
+
+type TListType = "bulleted" | "numbered";
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **insert-list**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `type` - der Typ der eingefügten Liste. Sie können folgende Werte angeben:
+    - `"bulleted"` - Aufzählungsliste
+    - `"numbered"` - nummerierte Liste
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "insert-list"-Ereignis abonnieren
+editor.api.on("insert-list", (obj) => {
+    console.log(obj.type);
+    console.log("The list was inserted");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/outdent.md
new file mode 100644
index 0000000..7bc5dc1
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/outdent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: outdent
+title: outdent Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das outdent-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# outdent
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn der Blockeinzug verringert wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"outdent": ({ step: number }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **outdent**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `step` - der Schritt, um den der Einzug verringert wurde
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "outdent"-Ereignis abonnieren
+editor.api.on("outdent", (obj) => {
+    console.log(obj);
+    console.log("The indention was decreased");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/paste.md
new file mode 100644
index 0000000..3d84abe
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/paste.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: paste
+title: paste Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das paste-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# paste
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn Inhalt eingefügt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"paste": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// das "paste"-Ereignis abonnieren
+editor.api.on("paste", () => {
+    console.log("Content was pasted");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/print.md
new file mode 100644
index 0000000..5714ae9
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/print.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: print
+title: print Ereignis
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das print-Ereignis. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# print
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Dokument gedruckt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"print": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Verarbeitung interner Ereignisse können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+// Konfigurationseigenschaften
+});
+// das "print"-Ereignis abonnieren
+editor.api.on("print", () => {
+    console.log("The document is printing");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/redo.md
new file mode 100644
index 0000000..8aa4595
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/redo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: redo
+title: redo Ereignis
+description: Sie können mehr über das redo-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# redo
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn die Schaltfläche „Redo" in der menubar/toolbar gedrückt oder über Event Bus-Methoden aufgerufen wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"redo": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „redo"-Ereignis abonnieren
+editor.api.on("redo", () => {
+    console.log("Redo operation was performed");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/resize-image.md
new file mode 100644
index 0000000..e446ecc
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/resize-image.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: resize-image
+title: resize-image Ereignis
+description: Sie können mehr über das resize-image-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# resize-image
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Bild in der Größe geändert wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"resize-image": ({ id: number, width: number, height: number }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **resize-image**-Ereignisses kann ein Objekt mit folgenden Parametern entgegennehmen:
+
+- `id` - die Bild-ID
+- `width` - die Bildbreite
+- `height` - die Bildhöhe
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+// Konfigurationseigenschaften
+});
+// Das „resize-image"-Ereignis abonnieren
+editor.api.on("resize-image", (obj) => {
+    console.log(obj);
+    console.log("The image was resized")
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
new file mode 100644
index 0000000..2c5e4d2
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-family
+title: set-font-family Ereignis
+description: Sie können mehr über das set-font-family-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# set-font-family
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn eine Schriftfamilie festgelegt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"set-font-family": ({ fontFamily: string }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **set-font-family**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `fontFamily` - die anzuwendende Schriftfamilie. Folgende Schriftarten sind verfügbar: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"`
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-13}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „set-font-family"-Ereignis abonnieren
+editor.api.on("set-font-family", (obj) => {
+    console.log(obj.fontFamily);
+    console.log("The font family was changed");
+});
+// Neue Schriftfamilie anwenden
+editor.api.exec("set-font-family", {
+    fontFamily: "Roboto"
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
new file mode 100644
index 0000000..39a3388
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-size
+title: set-font-size Ereignis
+description: Sie können mehr über das set-font-size-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# set-font-size
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn eine Schriftgröße festgelegt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"set-font-size": ({ fontSize: string }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **set-font-size**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `fontSize` - die anzuwendende Schriftgröße
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-13}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „set-font-size"-Ereignis abonnieren
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+    console.log("The font size was changed");
+});
+// Neue Schriftgröße anwenden
+editor.api.exec("set-font-size", {
+    fontSize: "11px"
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
new file mode 100644
index 0000000..c403293
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-line-height
+title: set-line-height Ereignis
+description: Sie können mehr über das set-line-height-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# set-line-height
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Zeilenabstand festgelegt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"set-line-height": ({ lineHeight: string }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **set-line-height**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `lineHeight` - ein Zeilenabstand
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-13}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „set-line-height"-Ereignis abonnieren
+editor.api.on("set-line-height", (obj) => {
+    console.log(obj);
+    console.log("The line height was changed");
+});
+// Neuen Zeilenabstand anwenden
+editor.api.exec("set-line-height", {
+   lineHeight: "15px"
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
new file mode 100644
index 0000000..35947ca
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: set-text-color
+title: set-text-color Ereignis
+description: Sie können mehr über das set-text-color-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# set-text-color
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn eine Textfarbe und/oder eine Texthintergrundfarbe festgelegt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"set-text-color": (ITextColor) => boolean | void;
+
+interface ITextColor {
+    color?: string;
+    background?: string;
+}
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **set-text-color**-Ereignisses kann ein Objekt mit folgenden Parametern entgegennehmen:
+
+- `color` - eine Textfarbe
+- `background` - eine Texthintergrundfarbe
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-14}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „set-text-color"-Ereignis abonnieren
+editor.api.on("set-text-color", (obj) => {
+    console.log(obj);
+    console.log("The text color and/or background text color were changed");
+});
+// Textfarbe und Hintergrund anwenden
+editor.api.exec("set-text-color", {
+   color: "red",
+   background: "blue"
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
new file mode 100644
index 0000000..db6e4de
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: set-text-format
+title: set-text-format Ereignis
+description: Sie können mehr über das set-text-format-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# set-text-format
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Textformat festgelegt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"set-text-format": (ITextFormat) => boolean | void;
+
+interface ITextFormat {
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+    underline?: boolean;
+}
+~~~
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Parameter {#parameters}
+
+Der Callback des **set-text-format**-Ereignisses kann ein Objekt mit folgenden Parametern entgegennehmen:
+
+- `bold` - ein fettes Textformat
+- `italic` - ein kursives Textformat
+- `strike` - ein durchgestrichenes Textformat
+- `underline` - ein unterstrichenes Textformat
+
+### Beispiel {#example}
+
+~~~jsx {5-14}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „set-text-format"-Ereignis abonnieren
+editor.api.on("set-text-format", (obj) => {
+    console.log(obj);
+    console.log("The text format was changed");
+});
+// Das „italic"- und fette Textformat anwenden
+editor.api.exec("set-text-format", {
+    italic: true,
+    bold: true
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
new file mode 100644
index 0000000..53f048f
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: set-text-style
+title: set-text-style Ereignis
+description: Sie können mehr über das set-text-style-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# set-text-style
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Textstil festgelegt wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"set-text-style": ({ tag: TBlockType }) => boolean | void;
+
+type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **set-text-style**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `tag` - ein Textstil
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-13}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „set-text-style"-Ereignis abonnieren
+editor.api.on("set-text-style", (obj) => {
+    console.log(obj.tag);
+    console.log("The text style was changed");
+});
+// Neuen Textstil anwenden
+editor.api.exec("set-text-style", {
+    tag: "blockquote"
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/show-popup.md
new file mode 100644
index 0000000..f6d9c34
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/show-popup.md
@@ -0,0 +1,53 @@
+---
+sidebar_label: show-popup
+title: show-popup Ereignis
+description: Sie können mehr über das show-popup-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# show-popup
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Popup ein- oder ausgeblendet wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"show-popup": (IPopupConfig) => boolean | void;
+
+interface IPopupConfig {
+    type: "link" | null;
+    image?: boolean;
+}
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **show-popup**-Ereignisses kann ein Objekt mit folgenden Parametern entgegennehmen:
+
+- `type` - der Typ des Popups
+- `image` - ermöglicht Zugriff auf zusätzlichen Kontext (ob der aktuelle Cursor auf ein Bild zeigt oder nicht)
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-13}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „show-popup"-Ereignis abonnieren
+editor.api.on("show-popup", (obj) => {
+    console.log(obj);
+    console.log("The popup was shown/hidden");
+});
+// Popup für Links anzeigen
+editor.api.exec("show-popup", {
+    type: "link"
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/subscript.md
new file mode 100644
index 0000000..50fa435
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/subscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: subscript
+title: subscript Ereignis
+description: Sie können mehr über das subscript-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# subscript
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn die Schaltfläche „Subscript" in der menubar/toolbar gedrückt oder über Event Bus-Methoden aufgerufen wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"subscript": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-10}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „subscript"-Ereignis abonnieren
+editor.api.on("subscript", () => {
+    console.log("Subscript was applied");
+});
+// Das „subscript"-Ereignis auslösen
+editor.api.exec("subscript", {});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/superscript.md
new file mode 100644
index 0000000..a166302
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/superscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: superscript
+title: superscript Ereignis
+description: Sie können mehr über das superscript-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# superscript
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn die Schaltfläche „Superscript" in der menubar/toolbar gedrückt oder über Event Bus-Methoden aufgerufen wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"superscript": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „superscript"-Ereignis abonnieren
+editor.api.on("superscript", () => {
+    console.log("Superscript was applied");
+});
+// Das „superscript"-Ereignis auslösen
+editor.api.exec("superscript", {});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
new file mode 100644
index 0000000..c705505
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-fullscreen-mode
+title: toggle-fullscreen-mode Ereignis
+description: Sie können mehr über das toggle-fullscreen-mode-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# toggle-fullscreen-mode
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn der Vollbildmodus umgeschaltet wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **toggle-fullscreen-mode**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `mode` - aktiviert den Vollbildmodus
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „toggle-fullscreen-mode"-Ereignis abonnieren
+editor.api.on("toggle-fullscreen-mode", (obj) => {
+    console.log(obj);
+    console.log("The full screen mode was changed");
+});
+// Vollbildmodus aktivieren
+editor.api.exec("toggle-fullscreen-mode", { mode: true });
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
new file mode 100644
index 0000000..062010b
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-layout-mode
+title: toggle-layout-mode Ereignis
+description: Sie können mehr über das toggle-layout-mode-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# toggle-layout-mode
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn der Layout-Modus umgeschaltet wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **toggle-layout-mode**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `mode` - der Layout-Modus. Folgende Modi sind verfügbar: `"classic" | "document"`
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-11}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „toggle-layout-mode"-Ereignis abonnieren
+editor.api.on("toggle-layout-mode", (obj) => {
+    console.log(obj);
+    console.log("The layout mode was changed");
+});
+// Den „document"-Layout-Modus festlegen
+editor.api.exec("toggle-layout-mode", { mode: "document" });
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
new file mode 100644
index 0000000..4d832c0
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-shortcut-info
+title: toggle-shortcut-info Ereignis
+description: Sie können mehr über das toggle-shortcut-info-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# toggle-shortcut-info
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn die Tastenkürzel-Info umgeschaltet wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **toggle-shortcut-info**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen:
+
+- `mode` - aktiviert die Tastenkürzel-Info; `true` zum Anzeigen des Tastenkürzel-Info-Popups, `false` zum Ausblenden des Tastenkürzel-Info-Popups
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „toggle-shortcut-info"-Ereignis abonnieren
+editor.api.on("toggle-shortcut-info", (obj) => {
+    console.log(obj);
+    console.log("The shortcut info was shown");
+});
+// Die Tastenkürzel-Info aktivieren
+editor.api.exec("toggle-shortcut-info", { mode: true });
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/undo.md
new file mode 100644
index 0000000..a707534
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/undo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: undo
+title: undo Ereignis
+description: Sie können mehr über das undo-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# undo
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn die Schaltfläche „Undo" in der menubar/toolbar gedrückt oder über Event Bus-Methoden aufgerufen wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"undo": () => boolean | void;
+~~~
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „undo"-Ereignis abonnieren
+editor.api.on("undo", () => {
+    console.log("Undo operation was performed");
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/update-link.md
new file mode 100644
index 0000000..a265cd0
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/update-link.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: update-link
+title: update-link Ereignis
+description: Sie können mehr über das update-link-Ereignis in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# update-link
+
+### Beschreibung {#description}
+
+@short: Wird ausgelöst, wenn ein Link aktualisiert wird
+
+### Verwendung {#usage}
+
+~~~jsx {}
+"update-link": ({ id: number, url: string }) => boolean | void;
+~~~
+
+### Parameter {#parameters}
+
+Der Callback des **update-link**-Ereignisses kann ein Objekt mit folgenden Parametern entgegennehmen:
+
+- `id` - die Link-ID
+- `url` - die geänderte URL
+
+:::info[Info]
+Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-9}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das „update-link"-Ereignis abonnieren
+editor.api.on("update-link", (obj) => {
+    console.log(obj);
+    console.log("The following link was updated:" + obj.url);
+});
+~~~
+
+**Änderungsprotokoll:** Das Ereignis wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/detach.md
new file mode 100644
index 0000000..334e31b
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/detach.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: api.detach()
+title: Methode on
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die on-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# api.detach()
+
+### Beschreibung {#description}
+
+@short: Ermöglicht das Entfernen/Abtrennen von Ereignis-Handlern
+
+### Verwendung {#usage}
+
+~~~jsx {}
+api.detach( tag: string ): void;
+~~~
+
+### Parameter {#parameters}
+
+- `tag` - (erforderlich) der Name des Aktions-Tags
+
+### Ereignisse {#events}
+
+:::info[Info]
+Die vollständige Liste der internen RichText-Ereignisse finden Sie [**hier**](api/overview/events_overview.md)
+:::
+
+### Beispiel {#example}
+
+~~~jsx {6-8,10}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 aktualisiert. Die Parameter `name` und `context` wurden entfernt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/exec.md
new file mode 100644
index 0000000..699209d
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/exec.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.exec()
+title: Methode exec
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die exec-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# api.exec()
+
+### Beschreibung {#description}
+
+@short: Ermöglicht das Auslösen interner Ereignisse
+
+### Verwendung {#usage}
+
+~~~jsx {}
+api.exec(
+    event: string,
+    config: object
+): void;
+~~~
+
+### Parameter {#parameters}
+
+- `event` - (erforderlich) ein auszulösendes Ereignis
+- `config` - (erforderlich) das Konfigurationsobjekt mit Parametern (siehe das auszulösende Ereignis)
+
+### Ereignisse {#events}
+
+:::info[Info]
+Die vollständige Liste der internen RichText-Ereignisse finden Sie [**hier**](api/overview/events_overview.md)
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Schriftgröße des Textes festlegen
+editor.api.exec("set-font-size", {
+    fontSize: "16px"
+});
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
new file mode 100644
index 0000000..3c58349
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getReactiveState()
+title: Methode getReactiveState
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die getReactiveState-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# api.getReactiveState()
+
+### Beschreibung {#description}
+
+@short: Gibt ein Objekt mit den reaktiven Eigenschaften von RichText zurück
+
+### Verwendung {#usage}
+
+~~~jsx {}
+api.getReactiveState(): object;
+~~~
+
+### Rückgabewert {#returns}
+
+Die Methode gibt ein Objekt mit folgenden Parametern zurück:
+
+~~~jsx {}
+{
+    cursorState: { subscribe: any },
+    defaultStyles {...},
+    document {...},
+    fullscreen {...},
+    history {...},
+    layoutMode {...},
+    popup {...},
+    selection {...}
+}
+~~~
+
+### Beispiel {#example}
+
+~~~jsx {5-7}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Reaktiven Zustand von RichText abrufen
+const reactive_state = editor.api.getReactiveState();
+console.log(reactive_state)
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-state.md
new file mode 100644
index 0000000..c85f97e
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getState()
+title: Methode getState
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die getState-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# api.getState()
+
+### Beschreibung {#description}
+
+@short: Gibt ein Objekt mit den StateStore-Eigenschaften von RichText zurück
+
+### Verwendung {#usage}
+
+~~~jsx {}
+api.getState(): object;
+~~~
+
+### Rückgabewert {#returns}
+
+Die Methode gibt ein Objekt mit folgenden Parametern zurück:
+
+~~~jsx {}
+{
+    cursorState: {},
+    defaultStyles: {},
+    document: {},
+    fullscreen: boolean,
+    history: []
+    layoutMode: string,
+    popup: any,
+    selection: {}
+}
+~~~
+
+### Beispiel {#example}
+
+~~~jsx {5-7}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Zustand von RichText abrufen
+const state = editor.api.getState();
+console.log(state);
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/intercept.md
new file mode 100644
index 0000000..836e596
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/intercept.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.intercept()
+title: Methode intercept
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die intercept-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# api.intercept()
+
+### Beschreibung {#description}
+
+@short: Ermöglicht das Abfangen und Verhindern interner Ereignisse
+
+### Verwendung {#usage}
+
+~~~jsx {}
+api.intercept(
+    event: string,
+    callback: function
+): void;
+~~~
+
+### Parameter {#parameters}
+
+- `event` - (erforderlich) ein auszulösendes Ereignis
+- `callback` - (erforderlich) ein auszuführender Callback (die Callback-Argumente hängen vom auszulösenden Ereignis ab)
+
+### Ereignisse {#events}
+
+:::info[Info]
+Die vollständige Liste der internen RichText-Ereignisse finden Sie [**hier**](api/overview/events_overview.md)
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-10}
+// RichText erstellen
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Ändern der Schriftgröße verbieten
+editor.api.intercept("set-font-size", (obj) => {
+    if(obj.fontSize !== "36px" ){
+        return false;
+    }
+});
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/on.md
new file mode 100644
index 0000000..d34d644
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/on.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.on()
+title: Methode on
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die on-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# api.on()
+
+### Beschreibung {#description}
+
+@short: Ermöglicht das Anhängen eines Handlers an interne Ereignisse
+
+### Verwendung {#usage}
+
+~~~jsx {}
+api.on(
+    event: string,
+    handler: function
+): void;
+~~~
+
+### Parameter {#parameters}
+
+- `event` - (erforderlich) ein auszulösendes Ereignis
+- `handler` - (erforderlich) ein anzuhängender Handler (die Handler-Argumente hängen vom auszulösenden Ereignis ab)
+
+### Ereignisse {#events}
+
+:::info[Info]
+Die vollständige Liste der internen RichText-Ereignisse finden Sie [**hier**](api/overview/events_overview.md)
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-8}
+// RichText initialisieren
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+// Das Ereignis "set-font-size" abonnieren
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+});
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 aktualisiert. Der Parameter `context` wurde entfernt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/set-next.md
new file mode 100644
index 0000000..27444a6
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/set-next.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: api.setNext()
+title: Methode setNext
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die setNext-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# api.setNext()
+
+### Beschreibung {#description}
+
+@short: Ermöglicht das Hinzufügen einer Aktion in die Event-Bus-Reihenfolge
+
+### Verwendung {#usage}
+
+~~~jsx {}
+api.setNext(next: any): void;
+~~~
+
+### Parameter {#parameters}
+
+- `next` - (erforderlich) die Aktion, die in die **Event-Bus**-Reihenfolge aufgenommen werden soll
+
+### Beispiel {#example}
+
+~~~jsx {10-11}
+const server = "https://some-backend-url";
+// Angenommen, Sie haben eine benutzerdefinierte Server-Service-Klasse namens someServerService
+const someServerService = new ServerDataService(server);
+
+fetch(server + "/data").then((res) => res.json()).then((data) => {
+    const editor = new richtext.Richtext("#root", {
+        value: data
+    });
+
+    // someServerService in die Event-Bus-Reihenfolge des Widgets integrieren
+    editor.api.setNext(someServerService);
+});
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/destructor.md
new file mode 100644
index 0000000..d15ddd4
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/destructor.md
@@ -0,0 +1,28 @@
+---
+sidebar_label: destructor()
+title: Methode destructor
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die destructor-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# destructor()
+
+### Beschreibung {#description}
+
+@short: Entfernt alle HTML-Elemente von RichText und trennt alle zugehörigen Ereignisse
+
+### Verwendung {#usage}
+
+~~~jsx {}
+destructor(): void;
+~~~
+
+### Beispiel {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+
+// RichText entfernen
+editor.destructor();
+~~~
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/get-value.md
new file mode 100644
index 0000000..a0acca6
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/get-value.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: getValue()
+title: Methode getValue
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die getValue-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# getValue()
+
+### Beschreibung {#description}
+
+@short: Gibt den RichText-Wert zurück
+
+### Verwendung {#usage}
+
+~~~jsx {}
+getValue(encoder?: any): string;
+~~~
+
+### Parameter {#parameters}
+
+- `encoder` - (optional) ein Parser zum Kodieren des RichText-Inhalts in ein benutzerdefiniertes Format. Folgende Formate sind verfügbar: `html` (Standard) und `text`
+
+Den erforderlichen Encoder erhalten Sie auf folgende Weise:
+
+```jsx
+const toTextEncoder = richtext.text.toText; // text encoder
+const toHTMLEncoder = richtext.html.toHTML; // html encoder
+```
+
+### Beispiel {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // legt den Standardwert fest (HTML-Format)
+    // weitere Konfigurationseigenschaften
+});
+
+const toTextEncoder = richtext.text.toText;
+const editor_value = editor.getValue(toTextEncoder);
+console.log(editor_value);
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 aktualisiert. Der Parameter `mode` wurde entfernt. Der Parameter `encoder` wurde hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-config.md
new file mode 100644
index 0000000..11ce5ca
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-config.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: setConfig()
+title: Methode setConfig
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die setConfig-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# setConfig()
+
+### Beschreibung {#description}
+
+@short: Wendet neue Konfigurationsparameter auf RichText an
+
+### Verwendung {#usage}
+
+~~~jsx {}
+setConfig(config: { [key:any]: any }): void;
+~~~
+
+### Parameter {#parameters}
+
+- `config` - (erforderlich) das Objekt der RichText-Konfigurationsparameter. Die vollständige Liste der Eigenschaften finden Sie [hier](api/overview/properties_overview.md)
+
+:::note[Hinweis]
+Die Methode `setConfig()` behält alle zuvor festgelegten Parameter bei, die im Aufruf der Methode `setConfig()` nicht explizit angegeben werden.
+:::
+
+### Beispiel {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "<h1>Some text</h1>",
+    // weitere Konfigurationseigenschaften
+});
+
+editor.setConfig({
+    layoutMode: "document"
+});
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
new file mode 100644
index 0000000..7d0b0e4
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: setLocale()
+title: Methode setLocale
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die setLocale-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# setLocale()
+
+### Beschreibung {#description}
+
+@short: Wendet eine neue Locale auf RichText an
+
+### Verwendung {#usage}
+
+~~~jsx {}
+setLocale(null | locale?: object): void;
+~~~
+
+### Parameter {#parameters}
+
+- `null` - (optional) setzt auf die Standard-Locale zurück (*Englisch*)
+- `locale` - (optional) das Datenobjekt der anzuwendenden neuen Locale
+
+:::info[Info]
+Verwenden Sie die Methode `setLocale()`, um eine neue Locale auf RichText anzuwenden. Um RichText auf die Standard-Locale zurückzusetzen, rufen Sie die Methode `setLocale()` ohne Argumente (oder mit dem Wert *null*) auf.
+:::
+
+### Beispiel {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+
+// Die Locale "de" auf RichText anwenden
+editor.setLocale(de);
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt
+
+**Verwandte Artikel:** [Lokalisierung](guides/localization.md)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-value.md
new file mode 100644
index 0000000..503d1d2
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-value.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: setValue()
+title: Methode setValue
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die setValue-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# setValue()
+
+### Beschreibung {#description}
+
+@short: Wendet einen neuen Wert auf RichText an
+
+### Verwendung {#usage}
+
+~~~jsx {}
+setValue: (value: string, encoder?: any): void;
+~~~
+
+### Parameter {#parameters}
+
+- `value` - (erforderlich) ein in RichText einzufügender Wert
+- `encoder` - (optional) ein benutzerdefinierter Parser zum Kodieren des RichText-Inhalts in ein benutzerdefiniertes Format. Folgende Formate sind verfügbar: `html` (Standard) und `text`
+
+Den erforderlichen Encoder erhalten Sie auf folgende Weise:
+
+```jsx
+const fromTextEncoder = richtext.text.fromText; // text encoder
+const fromHTMLEncoder = richtext.html.fromHTML; // html encoder
+```
+
+### Beispiel {#example}
+
+~~~jsx {7-8}
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+
+const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
+
+const fromTextEncoder = richtext.text.fromText;
+editor.setValue(editor_value, fromTextEncoder);
+~~~
+
+**Änderungsprotokoll:** Die Methode wurde in v2.0 aktualisiert. Der Parameter `mode` wurde entfernt. Der Parameter `encoder` wurde hinzugefügt
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
new file mode 100644
index 0000000..8555569
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Event Bus-Methoden
+title: Event Bus-Methoden
+description: Sie finden eine Übersicht der internen Event Bus-Methoden von JavaScript RichText in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Event Bus-Methoden {#event-bus-methods}
+
+Diese Seite enthält eine Liste der Methoden des internen Event Bus, der vom DHTMLX RichText-Editor verwendet wird.
+Diese Methoden sind für erweiterte Integrationen und benutzerdefiniertes Verhalten auf Basis des internen Ereignissystems konzipiert.
+
+| Name                                              | Beschreibung                                 |
+| ------------------------------------------------- | -------------------------------------------- |
+| [](api/internal/detach.md)                         | @getshort(api/internal/detach.md)             |
+| [](api/internal/exec.md)                           | @getshort(api/internal/exec.md)               |
+| [](api/internal/intercept.md)                      | @getshort(api/internal/intercept.md)          |
+| [](api/internal/on.md)                             | @getshort(api/internal/on.md)                 |
+| [](api/internal/set-next.md)                       | @getshort(api/internal/set-next.md)           |
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
new file mode 100644
index 0000000..eb69767
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: Ereignisse – Übersicht
+title: Ereignisse – Übersicht
+description: Sie finden eine Übersicht der Ereignisse von JavaScript RichText in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Ereignisse – Übersicht {#events-overview}
+
+Diese Seite listet alle Ereignisse auf, die vom DHTMLX RichText-Editor ausgelöst werden.
+Sie können diese Ereignisse nutzen, um die Funktionalität zu erweitern, Benutzerinteraktionen zu verfolgen oder benutzerdefiniertes Verhalten auszulösen.
+
+| Name                                                   | Beschreibung                                  |
+| ------------------------------------------------------ | --------------------------------------------- |
+| [](api/events/align.md)                                 | @getshort(api/events/align.md)                 |
+| [](api/events/clear-text-format.md)                     | @getshort(api/events/clear-text-format.md)     |
+| [](api/events/copy.md)                                  | @getshort(api/events/copy.md)                  |
+| [](api/events/create-new.md)                            | @getshort(api/events/create-new.md)            |
+| [](api/events/cut.md)                                   | @getshort(api/events/cut.md)                   |
+| [](api/events/delete-link.md)                           | @getshort(api/events/delete-link.md)           |
+| [](api/events/export.md)                                | @getshort(api/events/export.md)                |
+| [](api/events/import.md)                                | @getshort(api/events/import.md)                |
+| [](api/events/indent.md)                                | @getshort(api/events/indent.md)                |
+| [](api/events/insert-image.md)                          | @getshort(api/events/insert-image.md)          |
+| [](api/events/insert-line.md)                           | @getshort(api/events/insert-line.md)           |
+| [](api/events/insert-link.md)                           | @getshort(api/events/insert-link.md)           |
+| [](api/events/insert-list.md)                           | @getshort(api/events/insert-list.md)           |
+| [](api/events/outdent.md)                               | @getshort(api/events/outdent.md)               |
+| [](api/events/paste.md)                                 | @getshort(api/events/paste.md)                 |
+| [](api/events/print.md)                                 | @getshort(api/events/print.md)                 |
+| [](api/events/redo.md)                                  | @getshort(api/events/redo.md)                  |
+| [](api/events/resize-image.md)                          | @getshort(api/events/resize-image.md)          |
+| [](api/events/set-font-family.md)                       | @getshort(api/events/set-font-family.md)       |
+| [](api/events/set-font-size.md)                         | @getshort(api/events/set-font-size.md)         |
+| [](api/events/set-line-height.md)                       | @getshort(api/events/set-line-height.md)       |
+| [](api/events/set-text-color.md)                        | @getshort(api/events/set-text-color.md)        |
+| [](api/events/set-text-format.md)                       | @getshort(api/events/set-text-format.md)       |
+| [](api/events/set-text-style.md)                        | @getshort(api/events/set-text-style.md)        |
+| [](api/events/show-popup.md)                            | @getshort(api/events/show-popup.md)            |
+| [](api/events/subscript.md)                             | @getshort(api/events/subscript.md)             |
+| [](api/events/superscript.md)                           | @getshort(api/events/superscript.md)           |
+| [](api/events/toggle-fullscreen-mode.md)                | @getshort(api/events/toggle-fullscreen-mode.md)|
+| [](api/events/toggle-layout-mode.md)                    | @getshort(api/events/toggle-layout-mode.md)    |
+| [](api/events/toggle-shortcut-info.md)                  | @getshort(api/events/toggle-shortcut-info.md)  |
+| [](api/events/undo.md)                                  | @getshort(api/events/undo.md)                  |
+| [](api/events/update-link.md)                           | @getshort(api/events/update-link.md)           |
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
new file mode 100644
index 0000000..5f55688
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
@@ -0,0 +1,97 @@
+---
+sidebar_label: API-Übersicht
+title: API-Übersicht
+description: Sie finden eine API-Übersicht von JavaScript RichText in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# API-Übersicht {#api-overview}
+
+## RichText-Konstruktor {#richtext-constructor}
+
+~~~js
+new richtext.RichText("#root", {
+    // configuration parameters
+});
+~~~
+
+**Parameter**:
+
+- ein HTML-Container (z. B. CSS-Selektor oder DOM-Element)
+- ein Konfigurationsobjekt ([siehe Eigenschaften](api/overview/properties_overview.md))
+
+## RichText-Methoden {#richtext-methods}
+
+| Name                                          | Beschreibung                              |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/methods/get-value.md)                   | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                   | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                  | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                  | @getshort(api/methods/set-locale.md)       |
+| [](api/methods/destructor.md)                  | @getshort(api/methods/destructor.md)       |
+
+## Event Bus-Methoden {#event-bus-methods}
+
+| Name                                          | Beschreibung                              |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/exec.md)                       | @getshort(api/internal/exec.md)            |
+| [](api/internal/intercept.md)                  | @getshort(api/internal/intercept.md)       |
+| [](api/internal/on.md)                         | @getshort(api/internal/on.md)              |
+| [](api/internal/detach.md)                     | @getshort(api/internal/detach.md)          |
+| [](api/internal/set-next.md)                   | @getshort(api/internal/set-next.md)        |
+
+## Zustandsmethoden {#state-methods}
+
+| Name                                          | Beschreibung                              |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/get-state.md)                  | @getshort(api/internal/get-state.md)       |
+| [](api/internal/get-reactive-state.md)         | @getshort(api/internal/get-reactive-state.md) |
+
+## Ereignisse {#events}
+
+| Name                                           | Beschreibung                              |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/events/align.md)                        | @getshort(api/events/align.md)             |
+| [](api/events/clear-text-format.md)            | @getshort(api/events/clear-text-format.md) |
+| [](api/events/copy.md)                         | @getshort(api/events/copy.md)              |
+| [](api/events/create-new.md)                   | @getshort(api/events/create-new.md)        |
+| [](api/events/cut.md)                          | @getshort(api/events/cut.md)               |
+| [](api/events/delete-link.md)                  | @getshort(api/events/delete-link.md)       |
+| [](api/events/export.md)                       | @getshort(api/events/export.md)            |
+| [](api/events/import.md)                       | @getshort(api/events/import.md)            |
+| [](api/events/indent.md)                       | @getshort(api/events/indent.md)            |
+| [](api/events/insert-image.md)                 | @getshort(api/events/insert-image.md)      |
+| [](api/events/insert-line.md)                  | @getshort(api/events/insert-line.md)       |
+| [](api/events/insert-link.md)                  | @getshort(api/events/insert-link.md)       |
+| [](api/events/insert-list.md)                  | @getshort(api/events/insert-list.md)       |
+| [](api/events/outdent.md)                      | @getshort(api/events/outdent.md)           |
+| [](api/events/paste.md)                        | @getshort(api/events/paste.md)             |
+| [](api/events/print.md)                        | @getshort(api/events/print.md)             |
+| [](api/events/redo.md)                         | @getshort(api/events/redo.md)              |
+| [](api/events/resize-image.md)                 | @getshort(api/events/resize-image.md)      |
+| [](api/events/set-font-family.md)              | @getshort(api/events/set-font-family.md)   |
+| [](api/events/set-font-size.md)                | @getshort(api/events/set-font-size.md)     |
+| [](api/events/set-line-height.md)              | @getshort(api/events/set-line-height.md)   |
+| [](api/events/set-text-color.md)               | @getshort(api/events/set-text-color.md)    |
+| [](api/events/set-text-format.md)              | @getshort(api/events/set-text-format.md)   |
+| [](api/events/set-text-style.md)               | @getshort(api/events/set-text-style.md)    |
+| [](api/events/show-popup.md)                   | @getshort(api/events/show-popup.md)        |
+| [](api/events/subscript.md)                    | @getshort(api/events/subscript.md)         |
+| [](api/events/superscript.md)                  | @getshort(api/events/superscript.md)       |
+| [](api/events/toggle-fullscreen-mode.md)       | @getshort(api/events/toggle-fullscreen-mode.md) |
+| [](api/events/toggle-layout-mode.md)           | @getshort(api/events/toggle-layout-mode.md) |
+| [](api/events/toggle-shortcut-info.md)         | @getshort(api/events/toggle-shortcut-info.md) |
+| [](api/events/undo.md)                         | @getshort(api/events/undo.md)              |
+| [](api/events/update-link.md)                  | @getshort(api/events/update-link.md)       |
+
+## Eigenschaften {#properties}
+
+| Name                                          | Beschreibung                              |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/config/default-styles.md)               | @getshort(api/config/default-styles.md)    |
+| [](api/config/fullscreen-mode.md)              | @getshort(api/config/fullscreen-mode.md)   |
+| [](api/config/image-upload-url.md)             | @getshort(api/config/image-upload-url.md)  |
+| [](api/config/layout-mode.md)                  | @getshort(api/config/layout-mode.md)       |
+| [](api/config/locale.md)                       | @getshort(api/config/locale.md)            |
+| [](api/config/menubar.md)                      | @getshort(api/config/menubar.md)           |
+| [](api/config/toolbar.md)                      | @getshort(api/config/toolbar.md)           |
+| [](api/config/value.md)                        | @getshort(api/config/value.md)             |
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
new file mode 100644
index 0000000..6b03f6b
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Methoden – Übersicht
+title: Methoden – Übersicht
+description: Sie finden eine Übersicht der Methoden von JavaScript RichText in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Methoden – Übersicht {#methods-overview}
+
+Diese Seite bietet eine Zusammenfassung der wichtigsten Methoden des DHTMLX RichText-Editors.
+Nutzen Sie diese Referenz, um schnell zu den detaillierten Beschreibungen der einzelnen Methoden zu navigieren, ihren Zweck zu verstehen und Verwendungsbeispiele einzusehen.
+
+| Name                                                   | Beschreibung                              |
+| ------------------------------------------------------ | ----------------------------------------- |
+| [](api/methods/destructor.md)                           | @getshort(api/methods/destructor.md)       |
+| [](api/methods/get-value.md)                            | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                            | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                           | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                           | @getshort(api/methods/set-locale.md)       |
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
new file mode 100644
index 0000000..4c8d9f8
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: Eigenschaften – Übersicht
+title: Eigenschaften – Übersicht
+description: Sie finden eine Übersicht der Eigenschaften von JavaScript RichText in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Eigenschaften – Übersicht {#properties-overview}
+
+Diese Seite listet alle Konfigurationseigenschaften auf, die bei der Initialisierung des DHTMLX RichText-Editors verwendet werden können.
+Sie ermöglichen die Steuerung von Layout, Toolbar, Inhalt, Lokalisierung und anderen Aspekten des Editors.
+
+| Name                                                    | Beschreibung                                 |
+| --------------------------------------------------------|----------------------------------------------|
+| [](api/config/default-styles.md)                         | @getshort(api/config/default-styles.md)       |
+| [](api/config/fullscreen-mode.md)                        | @getshort(api/config/fullscreen-mode.md)      |
+| [](api/config/image-upload-url.md)                       | @getshort(api/config/image-upload-url.md)     |
+| [](api/config/layout-mode.md)                            | @getshort(api/config/layout-mode.md)          |
+| [](api/config/locale.md)                                 | @getshort(api/config/locale.md)               |
+| [](api/config/menubar.md)                                | @getshort(api/config/menubar.md)              |
+| [](api/config/toolbar.md)                                | @getshort(api/config/toolbar.md)              |
+| [](api/config/value.md)                                  | @getshort(api/config/value.md)                |
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
new file mode 100644
index 0000000..342b2af
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
@@ -0,0 +1,15 @@
+---
+sidebar_label: Zustandsmethoden
+title: Zustandsmethoden
+description: Sie finden eine Übersicht der internen Zustandsmethoden von JavaScript RichText in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Zustandsmethoden {#state-methods}
+
+Diese Seite listet Methoden für den Zugriff auf und die Arbeit mit dem internen Zustand des DHTMLX RichText-Editors auf.
+Diese Methoden sind nützlich für das Debugging, die Integration mit reaktiven Systemen oder die Implementierung erweiterter benutzerdefinierter Logik.
+
+| Name                                                        | Beschreibung                                     |
+| ----------------------------------------------------------- | ------------------------------------------------ |
+| [](api/internal/get-reactive-state.md)                       | @getshort(api/internal/get-reactive-state.md)     |
+| [](api/internal/get-state.md)                                | @getshort(api/internal/get-state.md)              |
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png
new file mode 100644
index 0000000..baeb296
Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png differ
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png
new file mode 100644
index 0000000..bf4312c
Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png differ
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/editor.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/editor.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/editor.png differ
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png differ
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png
new file mode 100644
index 0000000..e6d70b9
Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png differ
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png
new file mode 100644
index 0000000..8b207e6
Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png differ
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png
new file mode 100644
index 0000000..c62be84
Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png differ
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png
new file mode 100644
index 0000000..07410f7
Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png differ
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/trial_richtext.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/trial_richtext.png
new file mode 100644
index 0000000..cdee98c
Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/trial_richtext.png differ
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md
new file mode 100644
index 0000000..8878daf
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md
@@ -0,0 +1,283 @@
+---
+sidebar_label: Konfiguration
+title: Konfiguration
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Konfiguration. Lesen Sie Entwickleranleitungen und API-Referenz, sehen Sie sich Code-Beispiele und Live-Demos an und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Konfiguration
+
+Sie können das Erscheinungsbild und die Funktionalität von RichText über die entsprechende API konfigurieren. Die verfügbaren Parameter ermöglichen Ihnen:
+
+- Die **Menüleiste** ein- oder auszublenden – über die Eigenschaft [`menubar`](api/config/menubar.md)
+- Die **Toolbar** zu konfigurieren – über die Eigenschaft [`toolbar`](api/config/toolbar.md)
+- Den **Vollbildmodus** zu aktivieren – über die Eigenschaft [`fullscreenMode`](api/config/fullscreen-mode.md)
+- Das **Layout** zwischen den Modi „classic" und „document" umzuschalten – über die Eigenschaft [`layoutMode`](api/config/layout-mode.md)
+- Einen **Anfangswert** festzulegen – über die Eigenschaft [`value`](api/config/value.md)
+- Eine **Ausgangssprache** festzulegen – über die Eigenschaft [`locale`](api/config/locale.md)
+- **Standardstile** anzuwenden – über die Eigenschaft [`defaultStyles`](api/config/default-styles.md)
+
+## Layout-Modi {#layout-modes}
+
+Es gibt zwei Layout-Modi des RichText-Editors, zwischen denen Sie wählen können, um den besten Arbeitsbereich für die Erstellung Ihrer Inhalte zu finden:
+
+- **"classic"**
+
+<div className="img_border">
+![Klassischer Modus](./../assets/richtext/classic_mode.png)
+</div>
+
+- **"document"**
+
+<div className="img_border">
+![Dokumentenmodus](./../assets/richtext/document_mode.png)
+</div>
+
+Um den gewünschten Modus festzulegen, müssen Sie ihn in der Eigenschaft [`layoutMode`](api/config/layout-mode.md) des RichText-Konfigurationsobjekts bei der Initialisierung der Komponente definieren:
+
+~~~jsx
+const editor = new richtext.Richtext("#root", {
+    layoutMode: "document"
+});
+~~~
+
+## Toolbar {#toolbar}
+
+Die RichText-Toolbar besteht aus mehreren Steuerungsblöcken, die Sie Ihren Anforderungen entsprechend anpassen können.
+
+### Standard-Toolbar-Steuerelemente {#default-toolbar-controls}
+
+Sie können die folgenden Schaltflächen und Steuerelemente in der RichText-Toolbar angeben:
+
+| Schaltfläche        | Beschreibung                                                                        |
+|---------------------|-------------------------------------------------------------------------------------|
+| `undo`              | Macht die zuletzt ausgeführte Benutzeraktion rückgängig                             |
+| `redo`              | Stellt die zuletzt rückgängig gemachte Aktion wieder her                            |
+| `style`             | Ermöglicht die Auswahl von Textstilen (z. B. Überschriften, Absatz usw.)            |
+| `font-family`       | Ändert die Schriftart des markierten Textes                                         |
+| `font-size`         | Passt die Größe des markierten Textes an                                            |
+| `bold`              | Wendet Fettformatierung auf den markierten Text an                                  |
+| `italic`            | Wendet Kursivformatierung auf den markierten Text an                                |
+| `underline`         | Unterstreicht den markierten Text                                                   |
+| `strike`            | Wendet Durchstreichformatierung an                                                  |
+| `subscript`         | Formatiert den Text als tiefgestellt                                                |
+| `superscript`       | Formatiert den Text als hochgestellt                                                |
+| `text-color`        | Ändert die Textfarbe                                                                |
+| `background-color`  | Ändert die Hintergrundfarbe (Hervorhebung) des Textes                               |
+| `align`             | Legt die Textausrichtung fest (links, zentriert, rechts, Blocksatz)                 |
+| `indent`            | Erhöht den Absatzeinzug                                                             |
+| `outdent`           | Verringert den Absatzeinzug                                                         |
+| `line-height`       | Passt den Zeilenabstand (Zeilenhöhe) an                                             |
+| `quote`             | Formatiert den Text als Blockzitat                                                  |
+| `bulleted-list`     | Erstellt eine Aufzählungsliste                                                      |
+| `numbered-list`     | Erstellt eine nummerierte Liste                                                     |
+| `link`              | Fügt einen Hyperlink ein oder bearbeitet ihn                                        |
+| `image`             | Fügt ein Bild ein                                                                   |
+| `line`              | Fügt eine horizontale Linie ein                                                     |
+| `clear`             | Entfernt alle Formatierungen des markierten Textes                                  |
+| `print`             | Öffnet den Druckdialog                                                              |
+| `fullscreen`        | Schaltet den Vollbildmodus ein oder aus                                             |
+| `mode`              | Wechselt zwischen 2 Anzeigemodi: Classic / Document                                 |
+| `shortcuts`         | Zeigt eine Liste der verfügbaren Tastenkombinationen an                             |
+| `separator`         | Fügt einen visuellen Trenner zwischen Steuerelementen ein                           |
+
+Die Toolbar-Struktur wird über die Eigenschaft [`toolbar`](api/config/toolbar.md) definiert, die ein Array mit Zeichenketten enthält, welche die Namen der Steuerelemente darstellen.
+
+~~~jsx {2-36}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo",
+        "redo",
+        "separator",
+        "style",
+        "separator",
+        "font-family",
+        "font-size",
+        "separator",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "separator",
+        "text-color",
+        "background-color",
+        "separator",
+        "align",
+        "line-height",
+        "outdent",
+        "indent",
+        "separator",
+        "bulleted-list",
+        "numbered-list",
+        "quote",
+        "separator",
+        "link",
+        "image",
+        "separator",
+        "clear",
+        "separator",
+        "fullscreen",
+        "mode"
+        // weitere Schaltflächen
+    ],
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Verwandtes Beispiel:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### Benutzerdefinierte Toolbar-Steuerelemente {#custom-toolbar-controls}
+
+Sie können in der Eigenschaft [`toolbar`](api/config/toolbar.md) auch benutzerdefinierte Steuerelemente als Objekte mit folgenden Parametern angeben:
+
+- `type` – (erforderlich) gibt den Typ des benutzerdefinierten Steuerelements an. Folgende Typen sind verfügbar: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` – (optional) eine benutzerdefinierte Steuerelement-ID (darf nicht mit einer vorhandenen ID übereinstimmen)
+- `label` – (optional) eine Schaltflächenbeschriftung (wird zusammen mit einem Symbol angezeigt)
+- `tooltip` – (optional) ein Tooltip, der beim Darüberfahren angezeigt wird (wenn nicht angegeben, wird der Wert aus „label" verwendet)
+- `css` – (optional) ein CSS-Klassenname, der dem Steuerelement zugewiesen wird (unterstützte Standardklassen: wx-primary, wx-secondary)
+- `handler` – (optional) eine Callback-Funktion, die beim Klicken auf die Schaltfläche ausgeführt wird
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // Schaltflächen (Zeichenketten repräsentieren nur Schaltflächen)
+        "bold",
+        "italic",
+        // vordefinierte Schaltflächen (Benutzer kann keine weiteren Optionen definieren (keine Beschriftungen, Tooltips, Optionen usw.), daher nur ({ type: "button", id: string })
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // Benutzer muss den richtigen Typ angeben, wenn er ein vordefiniertes Steuerelement verwenden möchte (z. B. richselect/colorpicker)
+        // nicht übereinstimmende Typen werden ignoriert (nicht zur Toolbar hinzugefügt)
+        {
+            type: "richselect", // type: "button" - falsch, wird ignoriert
+            id: "mode",
+        },
+        // benutzerdefinierte Schaltflächen (unterstützte Optionen siehe unten)
+        // Benutzer kann nur benutzerdefinierte Schaltflächen definieren (kein richselect/colorpicker-Support derzeit)
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* benutzerdefinierte Logik */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* benutzerdefinierte Logik */}
+        }
+    ],
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+**Verwandtes Beispiel:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### Toolbar ausblenden {#hide-toolbar}
+
+Wenn Sie die Toolbar ausblenden möchten, setzen Sie die Eigenschaft [`toolbar`](api/config/toolbar.md) wie folgt auf `false`:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false,
+    // weitere Konfigurationseigenschaften
+});
+~~~
+
+## Standardstile {#default-styles}
+
+Sie können mithilfe der Eigenschaft [`defaultStyles`](api/config/default-styles.md) Standardstilwerte für bestimmte Blocktypen im Editor festlegen.
+
+~~~jsx {}
+defaultStyles?: boolean | {
+    "*"?: { // betrifft alle Blöcke und ermöglicht das Festlegen gemeinsamer Eigenschaften für alle diese Blöcke
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+Die Eigenschaft `defaultStyles` setzt KEIN tatsächliches CSS auf die betroffenen Blöcke. CSS-Stile müssen separat angewendet werden:
+
+```html title="index.html"
+<div id="root"></div>
+```
+
+```jsx {2-9} title="index.js"
+const editor = new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+#root h2 {
+    font-family: Roboto;
+    font-size: 28px;
+    color: purple;
+    background: #FFC0CB;
+}
+```
+
+In diesem Beispiel werden alle `h2`-Blöcke der Schriftfamilie `"Roboto"` mit einer Schriftgröße von 28px zugewiesen, wobei sowohl die Vordergrund- als auch die Hintergrundfarbe geändert werden. CSS-Stile werden den `h2`-Blöcken ebenfalls zugewiesen.
+
+**Verwandtes Beispiel:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md
new file mode 100644
index 0000000..e129b3b
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md
@@ -0,0 +1,63 @@
+---
+sidebar_label: Initialisierung
+title: Initialisierung
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Initialisierung. Lesen Sie Entwickleranleitungen und API-Referenz, sehen Sie sich Code-Beispiele und Live-Demos an und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Initialisierung
+
+Diese Anleitung enthält detaillierte Anweisungen, wie Sie RichText auf einer Seite einbinden, um Ihre Anwendung mit den Funktionen des RichText-Editors zu erweitern. Führen Sie die folgenden Schritte aus, um eine einsatzbereite Komponente zu erhalten:
+
+1. [RichText-Quelldateien auf einer Seite einbinden](#including-source-files).
+2. [Einen Container für RichText erstellen](#creating-container).
+3. [RichText mit dem Objekt-Konstruktor initialisieren](#initializing-richtext).
+
+## Quelldateien einbinden {#including-source-files}
+
+[Laden Sie das Paket herunter](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) und entpacken Sie es in einen Ordner Ihres Projekts.
+
+Um RichText zu erstellen, müssen Sie 2 Quelldateien auf Ihrer Seite einbinden:
+
+- *richtext.js*
+- *richtext.css*
+
+Stellen Sie sicher, dass Sie korrekte relative Pfade zu den Quelldateien setzen:
+
+~~~html title="index.html"
+<script type="text/javascript" src="./codebase/richtext.js"></script>
+<link rel="stylesheet" href="./codebase/richtext.css">
+~~~
+
+## Container erstellen {#creating-container}
+
+Fügen Sie einen Container für RichText hinzu und geben Sie ihm eine ID, zum Beispiel *"root"*:
+
+~~~jsx title="index.html"
+<div id="root"></div>
+~~~
+
+## RichText initialisieren {#initializing-richtext}
+
+Initialisieren Sie RichText mit dem Konstruktor `richtext.Richtext`. Der Konstruktor nimmt zwei Parameter entgegen:
+
+- einen HTML-Container (die ID des HTML-Containers)
+- ein Objekt mit Konfigurationseigenschaften. [Vollständige Liste hier](#configuration-properties)
+
+~~~jsx title="index.html"
+// RichText erstellen
+const editor = new richtext.Richtext("#root", {
+    // Konfigurationseigenschaften
+});
+~~~
+
+### Konfigurationseigenschaften {#configuration-properties}
+
+:::note[Hinweis]
+Die vollständige Liste der Eigenschaften zur Konfiguration von **RichText** finden Sie [**hier**](api/overview/properties_overview.md).
+:::
+
+## Beispiel {#example}
+
+In diesem Snippet sehen Sie, wie **RichText** mit Anfangsdaten initialisiert wird:
+
+<iframe src="https://snippet.dhtmlx.com/tjryzka7?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
new file mode 100644
index 0000000..249ad4a
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
@@ -0,0 +1,300 @@
+---
+sidebar_label: Integration mit Angular
+title: Integration mit Angular
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Integration mit Angular. Lesen Sie Entwickleranleitungen und API-Referenz, sehen Sie sich Code-Beispiele und Live-Demos an und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Integration mit Angular
+
+:::tip[Tipp]
+Sie sollten mit den grundlegenden Konzepten und Mustern von **Angular** vertraut sein, bevor Sie diese Dokumentation lesen. Zur Auffrischung Ihres Wissens lesen Sie bitte die [**Angular-Dokumentation**](https://v17.angular.io/docs).
+:::
+
+DHTMLX RichText ist mit **Angular** kompatibel. Wir haben Code-Beispiele vorbereitet, wie Sie DHTMLX RichText mit **Angular** verwenden können. Weitere Informationen finden Sie im entsprechenden [**Beispiel auf GitHub**](https://github.com/DHTMLX/angular-richtext-demo).
+
+## Projekt erstellen {#creating-a-project}
+
+:::info[Info]
+Bevor Sie ein neues Projekt erstellen, installieren Sie [**Angular CLI**](https://v17.angular.io/cli) und [**Node.js**](https://nodejs.org/en/).
+:::
+
+Erstellen Sie ein neues **my-angular-richtext-app**-Projekt mit Angular CLI. Führen Sie dazu den folgenden Befehl aus:
+
+~~~json
+ng new my-angular-richtext-app
+~~~
+
+:::note[Hinweis]
+Wenn Sie dieser Anleitung folgen möchten, deaktivieren Sie beim Erstellen der neuen Angular-App Server-Side Rendering (SSR) und Static Site Generation (SSG/Prerendering)!
+:::
+
+Der obige Befehl installiert alle erforderlichen Werkzeuge, sodass Sie keine weiteren Befehle ausführen müssen.
+
+### Abhängigkeiten installieren {#installation-of-dependencies}
+
+Wechseln Sie in das neu erstellte App-Verzeichnis:
+
+~~~json
+cd my-angular-richtext-app
+~~~
+
+Installieren Sie die Abhängigkeiten und starten Sie den dev server. Verwenden Sie dazu den Paketmanager [**yarn**](https://yarnpkg.com/):
+
+~~~json
+yarn
+yarn start
+~~~
+
+Die App sollte auf einem localhost laufen (z. B. `http://localhost:3000`).
+
+## RichText erstellen {#creating-richtext}
+
+Jetzt müssen Sie den DHTMLX RichText-Quellcode besorgen. Stoppen Sie zunächst die App und fahren Sie mit der Installation des RichText-Pakets fort.
+
+### Schritt 1. Paket installieren {#step-1-package-installation}
+
+Laden Sie das [**RichText-Testpaket**](/how_to_start/#installing-richtext-via-npm-or-yarn) herunter und folgen Sie den im README-File beschriebenen Schritten. Beachten Sie, dass das Test-RichText nur 30 Tage lang verfügbar ist.
+
+### Schritt 2. Komponente erstellen {#step-2-component-creation}
+
+Jetzt müssen Sie eine Angular-Komponente erstellen, um RichText in die Anwendung einzubinden. Erstellen Sie den Ordner **richtext** im Verzeichnis **src/app/**, fügen Sie eine neue Datei hinzu und benennen Sie sie **richtext.component.ts**.
+
+#### Quelldateien importieren {#import-source-files}
+
+Öffnen Sie die Datei **richtext.component.ts** und importieren Sie die RichText-Quelldateien. Beachten Sie:
+
+- Wenn Sie die PRO-Version verwenden und das RichText-Paket aus einem lokalen Ordner installieren, sieht der Importpfad wie folgt aus:
+
+~~~jsx
+import { Richtext} from 'dhx-richtext-package';
+~~~
+
+- Wenn Sie die Testversion von RichText verwenden, geben Sie folgenden Pfad an:
+
+~~~jsx
+import { Richtext} from '@dhx/trial-richtext';
+~~~
+
+In diesem Tutorial sehen Sie, wie Sie die **Testversion** von RichText konfigurieren.
+
+#### Container festlegen und RichText initialisieren {#set-containers-and-initialize-the-richtext}
+
+Um RichText auf der Seite anzuzeigen, müssen Sie einen Container für RichText festlegen und die Komponente mit dem entsprechenden Konstruktor initialisieren:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext", // ein Template-Name, der in der Datei "app.component.ts" als <richtext /> verwendet wird
+    styleUrls: ["./richtext.component.css"], // CSS-Datei einbinden
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    // Container für RichText initialisieren
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: Richtext;
+
+    ngOnInit() {
+        // die RichText-Komponente initialisieren
+        this._editor = new Richtext(this.richtext_container.nativeElement, {});
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor(); // RichText zerstören
+    }
+}
+~~~
+
+#### Stile hinzufügen {#adding-styles}
+
+Um RichText korrekt anzuzeigen, müssen Sie die entsprechenden Stile bereitstellen. Erstellen Sie dazu die Datei **richtext.component.css** im Verzeichnis **src/app/richtext/** und legen Sie die wichtigen Stile für RichText und seinen Container fest:
+
+~~~css title="richtext.component.css"
+/* RichText-Stile importieren */
+@import "@dhx/trial-richtext/dist/richtext.css";
+
+/* Stile für die initiale Seite festlegen */
+html,
+body{
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* Stile für den RichText-Container festlegen */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* Stile für das RichText-Widget festlegen */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### Daten laden {#loading-data}
+
+Um Daten in RichText einzufügen, müssen Sie einen Datensatz bereitstellen. Sie können die Datei **data.ts** im Verzeichnis **src/app/richtext/** erstellen und einige Daten hinzufügen:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Öffnen Sie dann die Datei ***richtext.component.ts***. Importieren Sie die Datei mit den Daten und geben Sie die entsprechenden Dateneigenschaften im Konfigurationsobjekt von RichText innerhalb der Methode `ngOnInit()` an, wie unten gezeigt:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // Daten importieren
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // Dateneigenschaft initialisieren
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            value
+            // weitere Konfigurationseigenschaften
+        });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+Sie können auch die Methode [`setValue()`](api/methods/set-value.md) innerhalb der Methode `ngOnInit()` von Angular verwenden, um Daten in RichText zu laden.
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // Daten importieren
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // Dateneigenschaft initialisieren
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            // weitere Konfigurationseigenschaften
+        });
+
+        // Daten über die Methode setValue() anwenden
+        this._editor.setValue({ value });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+Die RichText-Komponente ist nun einsatzbereit. Wenn das Element zur Seite hinzugefügt wird, initialisiert es RichText mit Daten. Sie können auch die erforderlichen Konfigurationseinstellungen vornehmen. Besuchen Sie unsere [RichText-API-Dokumentation](api/overview/main_overview.md), um die vollständige Liste der verfügbaren Eigenschaften zu prüfen.
+
+#### Ereignisse verarbeiten {#handling-events}
+
+Wenn ein Benutzer eine Aktion in RichText ausführt, wird ein Ereignis ausgelöst. Sie können diese Ereignisse nutzen, um die Aktion zu erkennen und den gewünschten Code dafür auszuführen. Siehe die [vollständige Ereignisliste](api/overview/events_overview.md).
+
+Öffnen Sie die Datei **richtext.component.ts** und ergänzen Sie die Methode `ngOnInit()` wie folgt:
+
+~~~jsx {} title="richtext.component.ts"
+// ...
+ngOnInit() {
+    this._editor = new Richtext(this.richtext_container.nativeElement, {});
+
+    this._editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+}
+
+ngOnDestroy(): void {
+    this._editor.destructor();
+}
+~~~
+
+### Schritt 3. RichText zur App hinzufügen {#step-3-adding-richtext-into-the-app}
+
+Um die Komponente ***RichTextComponent*** zu Ihrer App hinzuzufügen, öffnen Sie die Datei ***src/app/app.component.ts*** und ersetzen Sie den Standardcode durch folgenden:
+
+~~~jsx {} title="app.component.ts"
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "app-root",
+    template: `<richtext/>`
+})
+export class AppComponent {
+    name = "";
+}
+~~~
+
+Erstellen Sie dann die Datei ***app.module.ts*** im Verzeichnis ***src/app/*** und geben Sie *RichTextComponent* wie folgt an:
+
+~~~jsx {} title="app.module.ts"
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from "./app.component";
+import { RichTextComponent } from "./richtext/richtext.component";
+
+@NgModule({
+    declarations: [AppComponent, RichTextComponent],
+    imports: [BrowserModule],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}
+~~~
+
+Der letzte Schritt besteht darin, die Datei ***src/main.ts*** zu öffnen und den vorhandenen Code durch folgenden zu ersetzen:
+
+~~~jsx title="main.ts"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
+platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch((err) => console.error(err));
+~~~
+
+Danach können Sie die App starten, um RichText mit Daten auf einer Seite geladen zu sehen.
+
+<div className="img_border">
+![RichText-Initialisierung](../assets/trial_richtext.png)
+</div>
+
+Sie wissen jetzt, wie Sie DHTMLX RichText mit Angular integrieren. Sie können den Code gemäß Ihren spezifischen Anforderungen anpassen. Das endgültige erweiterte Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo).
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
new file mode 100644
index 0000000..34deff1
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
@@ -0,0 +1,253 @@
+---
+sidebar_label: Integration mit React
+title: Integration mit React
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Integration mit React. Lesen Sie Entwickleranleitungen und API-Referenz, sehen Sie sich Code-Beispiele und Live-Demos an und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Integration mit React
+
+:::tip[Tipp]
+Sie sollten mit den grundlegenden Konzepten und Mustern von [**React**](https://react.dev) vertraut sein, bevor Sie diese Dokumentation lesen. Zur Auffrischung Ihres Wissens lesen Sie bitte die [**React-Dokumentation**](https://react.dev/learn).
+:::
+
+DHTMLX RichText ist mit **React** kompatibel. Wir haben Code-Beispiele vorbereitet, wie Sie DHTMLX RichText mit **React** verwenden können. Weitere Informationen finden Sie im entsprechenden [**Beispiel auf GitHub**](https://github.com/DHTMLX/react-richtext-demo).
+
+## Projekt erstellen {#creating-a-project}
+
+:::info[Info]
+Bevor Sie ein neues Projekt erstellen, installieren Sie [**Vite**](https://vite.dev/) (optional) und [**Node.js**](https://nodejs.org/en/).
+:::
+
+Sie können ein einfaches **React**-Projekt erstellen oder **React mit Vite** verwenden. Nennen wir das Projekt **my-react-richtext-app**:
+
+~~~json
+npx create-react-app my-react-richtext-app
+~~~
+
+### Abhängigkeiten installieren {#installation-of-dependencies}
+
+Wechseln Sie in das neu erstellte App-Verzeichnis:
+
+~~~json
+cd my-react-richtext-app
+~~~
+
+Installieren Sie die Abhängigkeiten und starten Sie den dev server. Verwenden Sie dazu einen Paketmanager:
+
+- Wenn Sie [**yarn**](https://yarnpkg.com/) verwenden, führen Sie folgende Befehle aus:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- Wenn Sie [**npm**](https://www.npmjs.com/) verwenden, führen Sie folgende Befehle aus:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+Die App sollte auf einem localhost laufen (z. B. `http://localhost:3000`).
+
+## RichText erstellen {#creating-richtext}
+
+Jetzt müssen Sie den DHTMLX RichText-Quellcode besorgen. Stoppen Sie zunächst die App und fahren Sie mit der Installation des RichText-Pakets fort.
+
+### Schritt 1. Paket installieren {#step-1-package-installation}
+
+Laden Sie das [**RichText-Testpaket**](/how_to_start/#installing-richtext-via-npm-or-yarn) herunter und folgen Sie den im README-File beschriebenen Schritten. Beachten Sie, dass das Test-RichText nur 30 Tage lang verfügbar ist.
+
+### Schritt 2. Komponente erstellen {#step-2-component-creation}
+
+Jetzt müssen Sie eine React-Komponente erstellen, um RichText in die Anwendung einzubinden. Erstellen Sie eine neue Datei im Verzeichnis ***src/*** und benennen Sie sie ***Richtext.jsx***.
+
+#### Quelldateien importieren {#importing-source-files}
+
+Öffnen Sie die Datei ***Richtext.jsx*** und importieren Sie die RichText-Quelldateien. Beachten Sie:
+
+- Wenn Sie die PRO-Version verwenden und das RichText-Paket aus einem lokalen Ordner installieren, sehen die Importpfade wie folgt aus:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+~~~
+
+- Wenn Sie die Testversion von RichText verwenden, geben Sie folgende Pfade an:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from '@dhx/trial-richtext';
+import "@dhx/trial-richtext/dist/richtext.css";
+~~~
+
+In diesem Tutorial sehen Sie, wie Sie die **Testversion** von RichText konfigurieren.
+
+#### Container festlegen und RichText hinzufügen {#setting-containers-and-adding-richtext}
+
+Um RichText auf der Seite anzuzeigen, müssen Sie einen Container für RichText erstellen und die Komponente mit dem entsprechenden Konstruktor initialisieren:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css'; // RichText-Stile einbinden
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef(); // Container für RichText initialisieren
+
+    useEffect(() => {
+        // die RichText-Komponente initialisieren
+        const editor = new Richtext(richtext_container.current, {});
+
+        return () => {
+            editor.destructor(); // RichText zerstören
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+#### Stile hinzufügen {#adding-styles}
+
+Um RichText korrekt anzuzeigen, müssen Sie in der CSS-Hauptdatei des Projekts wichtige Stile für RichText und seinen Container festlegen:
+
+~~~css title="index.css"
+/* Stile für die initiale Seite festlegen */
+html,
+body,
+#root {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* Stile für den RichText-Container festlegen */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* Stile für das RichText-Widget festlegen */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### Daten laden {#loading-data}
+
+Um Daten in RichText einzufügen, müssen Sie einen Datensatz bereitstellen. Sie können die Datei ***data.js*** im Verzeichnis ***src/*** erstellen und einige Daten hinzufügen:
+
+~~~jsx {} title="data.js"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Öffnen Sie dann die Datei ***App.js*** und importieren Sie die Daten. Anschließend können Sie die Daten als **props** an die neu erstellten `<RichText/>`-Komponenten übergeben:
+
+~~~jsx {2,5-6} title="App.js"
+import RichText from "./Richtext";
+import { getData } from "./data";
+
+function App() {
+    const { value } = getData();
+    return <RichText value={value} />;
+}
+
+export default App;
+~~~
+
+Wechseln Sie zur Datei ***Richtext.jsx*** und wenden Sie die übergebenen **props** auf das RichText-Konfigurationsobjekt an:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            value: props.value, // Wert anwenden
+            // weitere Konfigurationseigenschaften
+        });
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+Sie können auch die Methode [`setValue()`](api/methods/set-value.md) innerhalb der Methode `useEffect()` von React verwenden, um Daten in RichText zu laden:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    let value = props.value;
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            // Konfigurationseigenschaften
+        });
+
+        editor.setValue(value);
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+Die RichText-Komponente ist nun bereit. Wenn das Element zur Seite hinzugefügt wird, initialisiert es RichText mit Daten. Sie können auch die erforderlichen Konfigurationseinstellungen vornehmen. Besuchen Sie unsere [RichText-API-Dokumentation](api/overview/main_overview.md), um die vollständige Liste der verfügbaren Eigenschaften zu prüfen.
+
+#### Ereignisse verarbeiten {#handling-events}
+
+Wenn ein Benutzer eine Aktion in RichText ausführt, wird ein Ereignis ausgelöst. Sie können diese Ereignisse nutzen, um die Aktion zu erkennen und den gewünschten Code dafür auszuführen. Siehe die [vollständige Ereignisliste](api/overview/events_overview.md).
+
+Öffnen Sie ***Richtext.jsx*** und ergänzen Sie die Methode `useEffect()` wie folgt:
+
+~~~jsx {} title="Richtext.jsx"
+// ...
+useEffect(() => {
+    const editor = new Richtext(richtext_container.current, {});
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+
+    return () => {
+        editor.destructor();
+    };
+}, []);
+// ...
+~~~
+
+Danach können Sie die App starten, um RichText mit Daten auf einer Seite geladen zu sehen.
+
+<div className="img_border">
+![RichText-Initialisierung](../assets/trial_richtext.png)
+</div>
+
+Sie wissen jetzt, wie Sie DHTMLX RichText mit React integrieren. Sie können den Code gemäß Ihren spezifischen Anforderungen anpassen. Das endgültige erweiterte Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/react-richtext-demo).
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
new file mode 100644
index 0000000..a3f929b
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
@@ -0,0 +1,263 @@
+---
+sidebar_label: Integration mit Svelte
+title: Integration mit Svelte
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Integration mit Svelte. Lesen Sie Entwickleranleitungen und API-Referenz, sehen Sie sich Code-Beispiele und Live-Demos an und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Integration mit Svelte
+
+:::tip[Tipp]
+Sie sollten mit den grundlegenden Konzepten und Mustern von **Svelte** vertraut sein, bevor Sie diese Dokumentation lesen. Zur Auffrischung Ihres Wissens lesen Sie bitte die [**Svelte-Dokumentation**](https://svelte.dev/).
+:::
+
+DHTMLX RichText ist mit **Svelte** kompatibel. Wir haben Code-Beispiele vorbereitet, wie Sie DHTMLX RichText mit **Svelte** verwenden können. Weitere Informationen finden Sie im entsprechenden [**Beispiel auf GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).
+
+## Projekt erstellen {#creating-a-project}
+
+:::info[Info]
+Bevor Sie ein neues Projekt erstellen, installieren Sie [**Vite**](https://vite.dev/) (optional) und [**Node.js**](https://nodejs.org/en/).
+:::
+
+Es gibt mehrere Möglichkeiten, ein **Svelte**-Projekt zu erstellen:
+
+- Sie können [**SvelteKit**](https://kit.svelte.dev/) verwenden
+
+oder
+
+- Sie können auch **Svelte mit Vite** verwenden (aber ohne SvelteKit):
+
+~~~json
+npm create vite@latest
+~~~
+
+Weitere Details finden Sie im [entsprechenden Artikel](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit).
+
+### Abhängigkeiten installieren {#installation-of-dependencies}
+
+Nennen wir das Projekt **my-svelte-richtext-app** und wechseln in das App-Verzeichnis:
+
+~~~json
+cd my-svelte-richtext-app
+~~~
+
+Installieren Sie die Abhängigkeiten und starten Sie den dev server. Verwenden Sie dazu einen Paketmanager:
+
+- Wenn Sie [**yarn**](https://yarnpkg.com/) verwenden, führen Sie folgende Befehle aus:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- Wenn Sie [**npm**](https://www.npmjs.com/) verwenden, führen Sie folgende Befehle aus:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+Die App sollte auf einem localhost laufen (z. B. `http://localhost:3000`).
+
+## RichText erstellen {#creating-richtext}
+
+Jetzt müssen Sie den DHTMLX RichText-Quellcode besorgen. Stoppen Sie zunächst die App und fahren Sie mit der Installation des RichText-Pakets fort.
+
+### Schritt 1. Paket installieren {#step-1-package-installation}
+
+Laden Sie das [**RichText-Testpaket**](/how_to_start/#installing-richtext-via-npm-or-yarn) herunter und folgen Sie den im README-File beschriebenen Schritten. Beachten Sie, dass das Test-RichText nur 30 Tage lang verfügbar ist.
+
+### Schritt 2. Komponente erstellen {#step-2-component-creation}
+
+Jetzt müssen Sie eine Svelte-Komponente erstellen, um RichText in die Anwendung einzubinden. Erstellen Sie eine neue Datei im Verzeichnis ***src/*** und benennen Sie sie ***Richtext.svelte***.
+
+#### Quelldateien importieren {#importing-source-files}
+
+Öffnen Sie die Datei ***Richtext.svelte*** und importieren Sie die RichText-Quelldateien. Beachten Sie:
+
+- Wenn Sie die PRO-Version verwenden und das RichText-Paket aus einem lokalen Ordner installieren, sehen die Importpfade wie folgt aus:
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- Wenn Sie die Testversion von RichText verwenden, geben Sie folgende Pfade an:
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+<script>
+~~~
+
+In diesem Tutorial sehen Sie, wie Sie die **Testversion** von RichText konfigurieren.
+
+#### Container festlegen und RichText hinzufügen {#setting-containers-and-adding-richtext}
+
+Um RichText auf der Seite anzuzeigen, müssen Sie einen Container für RichText erstellen und die Komponente mit dem entsprechenden Konstruktor initialisieren:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+let richtext_container; // Container für RichText initialisieren
+let editor;
+
+onMount(() => {
+    // die RichText-Komponente initialisieren
+    editor = new Richtext(richtext_container, {});
+});
+
+onDestroy(() => {
+    editor?.destructor(); // RichText zerstören
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+#### Daten laden {#loading-data}
+
+Um Daten in RichText einzufügen, müssen wir einen Datensatz bereitstellen. Sie können die Datei ***data.js*** im Verzeichnis ***src/*** erstellen und einige Daten hinzufügen:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Öffnen Sie dann die Datei ***App.svelte***, importieren Sie die Daten und übergeben Sie sie als **props** an die neu erstellten `<RichText/>`-Komponenten:
+
+~~~html {} title="App.svelte"
+<script>
+import RichText from "./Richtext.svelte";
+import { getData } from "./data.js";
+
+const { value } = getData();
+</script>
+
+<RichText value={value} />
+~~~
+
+Wechseln Sie zur Datei ***Richtext.svelte*** und wenden Sie die übergebenen **props** auf das RichText-Konfigurationsobjekt an:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        value
+        // weitere Konfigurationseigenschaften
+    })
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+Sie können auch die Methode [`setValue()`](/api/methods/set-value.md) innerhalb der Methode `onMount()` von Svelte verwenden, um Daten in RichText zu laden:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value;
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        // weitere Konfigurationseigenschaften
+    })
+
+    editor.setValue(value);
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+Die RichText-Komponente ist nun einsatzbereit. Wenn das Element zur Seite hinzugefügt wird, initialisiert es RichText mit Daten. Sie können auch die erforderlichen Konfigurationseinstellungen vornehmen. Besuchen Sie unsere [RichText-API-Dokumentation](api/overview/main_overview.md), um die vollständige Liste der verfügbaren Eigenschaften zu prüfen.
+
+#### Ereignisse verarbeiten {#handling-events}
+
+Wenn ein Benutzer eine Aktion in RichText ausführt, wird ein Ereignis ausgelöst. Sie können diese Ereignisse nutzen, um die Aktion zu erkennen und den gewünschten Code dafür auszuführen. Siehe die [vollständige Ereignisliste](api/overview/events_overview.md).
+
+Öffnen Sie ***Richtext.svelte*** und ergänzen Sie die Methode `onMount()` wie folgt:
+
+~~~html {} title="Richtext.svelte"
+<script>
+// ...
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {})
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+});
+
+onDestroy(() => {
+    editor?.destructor();
+});
+</script>
+
+// ...
+~~~
+
+### Schritt 3. RichText zur App hinzufügen {#step-3-adding-richtext-into-the-app}
+
+Um die Komponente zur App hinzuzufügen, öffnen Sie die Datei **App.svelte** und ersetzen Sie den Standardcode durch folgenden:
+
+~~~html title="App.svelte"
+<script>
+    import RichText from "./Richtext.svelte";
+    import { getData } from "./data.js";
+
+    const { value } = getData();
+</script>
+
+<RichText value={value}  />
+~~~
+
+Danach können Sie die App starten, um RichText mit Daten auf einer Seite geladen zu sehen.
+
+<div className="img_border">
+![RichText-Initialisierung](../assets/trial_richtext.png)
+</div>
+
+Sie wissen jetzt, wie Sie DHTMLX RichText mit Svelte integrieren. Sie können den Code gemäß Ihren spezifischen Anforderungen anpassen. Das endgültige erweiterte Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
new file mode 100644
index 0000000..a99b90d
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
@@ -0,0 +1,279 @@
+---
+sidebar_label: Integration mit Vue
+title: Integration mit Vue
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Integration mit Vue. Lesen Sie Entwickleranleitungen und API-Referenz, sehen Sie sich Code-Beispiele und Live-Demos an und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Integration mit Vue
+
+:::tip[Tipp]
+Sie sollten mit den grundlegenden Konzepten und Mustern von [**Vue**](https://vuejs.org/) vertraut sein, bevor Sie diese Dokumentation lesen. Zur Auffrischung Ihres Wissens lesen Sie bitte die [**Vue 3-Dokumentation**](https://vuejs.org/guide/introduction.html#getting-started).
+:::
+
+DHTMLX RichText ist mit **Vue** kompatibel. Wir haben Code-Beispiele vorbereitet, wie Sie DHTMLX RichText mit **Vue 3** verwenden können. Weitere Informationen finden Sie im entsprechenden [**Beispiel auf GitHub**](https://github.com/DHTMLX/vue-richtext-demo).
+
+## Projekt erstellen {#creating-a-project}
+
+:::info[Info]
+Bevor Sie ein neues Projekt erstellen, installieren Sie [**Node.js**](https://nodejs.org/en/).
+:::
+
+Um ein **Vue**-Projekt zu erstellen, führen Sie folgenden Befehl aus:
+
+~~~json
+npm create vue@latest
+~~~
+
+Dieser Befehl installiert und führt `create-vue` aus, das offizielle **Vue**-Projekt-Scaffolding-Werkzeug. Weitere Details finden Sie im [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application).
+
+Nennen wir das Projekt **my-vue-richtext-app**.
+
+### Abhängigkeiten installieren {#installation-of-dependencies}
+
+Wechseln Sie in das App-Verzeichnis:
+
+~~~json
+cd my-vue-richtext-app
+~~~
+
+Installieren Sie die Abhängigkeiten und starten Sie den dev server. Verwenden Sie dazu einen Paketmanager:
+
+- Wenn Sie [**yarn**](https://yarnpkg.com/) verwenden, führen Sie folgende Befehle aus:
+
+~~~jsx
+yarn
+yarn start // oder yarn dev
+~~~
+
+- Wenn Sie [**npm**](https://www.npmjs.com/) verwenden, führen Sie folgende Befehle aus:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+Die App sollte auf einem localhost laufen (z. B. `http://localhost:3000`).
+
+## RichText erstellen {#creating-richtext}
+
+Jetzt müssen Sie den DHTMLX RichText-Quellcode besorgen. Stoppen Sie zunächst die App und fahren Sie mit der Installation des RichText-Pakets fort.
+
+### Schritt 1. Paket installieren {#step-1-package-installation}
+
+Laden Sie das [**RichText-Testpaket**](/how_to_start/#installing-richtext-via-npm-or-yarn) herunter und folgen Sie den im README-File beschriebenen Schritten. Beachten Sie, dass das Test-RichText nur 30 Tage lang verfügbar ist.
+
+### Schritt 2. Komponente erstellen {#step-2-component-creation}
+
+Jetzt müssen Sie eine Vue-Komponente erstellen, um RichText in die Anwendung einzubinden. Erstellen Sie eine neue Datei im Verzeichnis ***src/components/*** und benennen Sie sie ***Richtext.vue***.
+
+#### Quelldateien importieren {#import-source-files}
+
+Öffnen Sie die Datei ***Richtext.vue*** und importieren Sie die RichText-Quelldateien. Beachten Sie:
+
+- Wenn Sie die PRO-Version verwenden und das RichText-Paket aus einem lokalen Ordner installieren, sehen die Importpfade wie folgt aus:
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- Wenn Sie die Testversion von RichText verwenden, geben Sie folgende Pfade an:
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+</script>
+~~~
+
+In diesem Tutorial sehen Sie, wie Sie die **Testversion** von RichText konfigurieren.
+
+#### Container festlegen und RichText hinzufügen {#setting-containers-and-adding-richtext}
+
+Um RichText auf der Seite anzuzeigen, müssen Sie einen Container für RichText erstellen und die Komponente mit dem entsprechenden Konstruktor initialisieren:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    mounted() {
+        // die RichText-Komponente initialisieren
+        this.editor = new Richtext(this.$refs.richtext_container, {});
+    },
+
+    unmounted() {
+        this.editor.destructor(); // RichText zerstören
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+#### Stile hinzufügen {#adding-styles}
+
+Um RichText korrekt anzuzeigen, müssen Sie in der CSS-Hauptdatei des Projekts wichtige Stile für RichText und seinen Container festlegen:
+
+~~~css title="main.css"
+/* Stile für die initiale Seite festlegen */
+html,
+body,
+#app { /* stellen Sie sicher, dass Sie den Root-Container #app verwenden */
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* Stile für den RichText-Container festlegen */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* Stile für das RichText-Widget festlegen */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### Daten laden {#loading-data}
+
+Um Daten in RichText einzufügen, müssen Sie einen Datensatz bereitstellen. Sie können die Datei ***data.js*** im Verzeichnis ***src/*** erstellen und einige Daten hinzufügen:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Öffnen Sie dann die Datei ***App.vue***, importieren Sie die Daten und initialisieren Sie sie über die interne Methode `data()`. Anschließend können Sie die Daten als **props** an die neu erstellte `<RichText/>`-Komponente übergeben:
+
+~~~html {} title="App.vue"
+<script>
+import RichText from "./components/Richtext.vue";
+import { getData } from "./data";
+
+export default {
+    components: { RichText },
+    data() {
+        const { value } = getData();
+        return { value };
+    }
+};
+</script>
+
+<template>
+    <RichText :value="value" />
+</template>
+~~~
+
+Wechseln Sie zur Datei ***Richtext.vue*** und wenden Sie die übergebenen **props** auf das RichText-Konfigurationsobjekt an:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            value: this.value,
+            // weitere Konfigurationseigenschaften
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+Sie können auch die Methode [`setValue()`](api/methods/set-value.md) innerhalb der Methode `mounted()` von Vue verwenden, um Daten in RichText zu laden:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            // weitere Konfigurationseigenschaften
+        });
+
+        this.editor.setValue(this.value);
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+Die RichText-Komponente ist nun einsatzbereit. Wenn das Element zur Seite hinzugefügt wird, initialisiert es RichText mit Daten. Sie können auch die erforderlichen Konfigurationseinstellungen vornehmen. Besuchen Sie unsere [RichText-API-Dokumentation](api/overview/main_overview.md), um die vollständige Liste der verfügbaren Eigenschaften zu prüfen.
+
+#### Ereignisse verarbeiten {#handling-events}
+
+Wenn ein Benutzer eine Aktion in RichText ausführt, wird ein Ereignis ausgelöst. Sie können diese Ereignisse nutzen, um die Aktion zu erkennen und den gewünschten Code dafür auszuführen. Siehe die [vollständige Ereignisliste](api/overview/events_overview.md).
+
+Öffnen Sie ***Richtext.vue*** und ergänzen Sie die Methode `mounted()`:
+
+~~~html {} title="Richtext.vue"
+<script>
+// ...
+export default {
+    // ...
+    mounted() {
+        this.editor = new Richtext(this.$refs.cont, {});
+
+        this.editor.api.on("print", () => {
+            console.log("The document is printing");
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+}
+</script>
+
+// ...
+~~~
+
+Danach können Sie die App starten, um RichText mit Daten auf einer Seite geladen zu sehen.
+
+<div className="img_border">
+![RichText-Initialisierung](../assets/trial_richtext.png)
+</div>
+
+Sie wissen jetzt, wie Sie DHTMLX RichText mit Vue integrieren. Sie können den Code gemäß Ihren spezifischen Anforderungen anpassen. Das endgültige erweiterte Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo).
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md
new file mode 100644
index 0000000..877cc1f
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md
@@ -0,0 +1,474 @@
+---
+sidebar_label: Lokalisierung
+title: Lokalisierung
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Lokalisierung. Lesen Sie Entwickleranleitungen und API-Referenz, sehen Sie sich Code-Beispiele und Live-Demos an und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Lokalisierung
+
+Sie können alle Beschriftungen in der Oberfläche von JavaScript RichText lokalisieren. Dazu müssen Sie eine neue Sprachumgebung erstellen oder eine integrierte anpassen und auf RichText anwenden.
+
+## Standard-Sprachumgebung {#default-locale}
+
+Die **englische** Sprachumgebung wird standardmäßig verwendet:
+
+~~~jsx
+const en = {
+    richtext: {
+        // Schaltflächen/Aktionen
+        Undo: "Undo",
+        Redo: "Redo",
+        Style: "Style",
+        "Font family": "Font family",
+        "Font size": "Font size",
+        Bold: "Bold",
+        Italic: "Italic",
+        Underline: "Underline",
+        Strikethrough: "Strikethrough",
+        Subscript: "Subscript",
+        Superscript: "Superscript",
+        "Text color": "Text color",
+        "Background color": "Background color",
+        "Left align": "Left align",
+        "Center align": "Center align",
+        "Right align": "Right align",
+        Justify: "Justify",
+        "Line height": "Line height",
+        Outdent: "Outdent",
+        Indent: "Indent",
+        "Insert link": "Insert link",
+        "Insert image": "Insert image",
+        "Insert horizontal line": "Insert horizontal line",
+        "Clear formatting": "Clear formatting",
+        Print: "Print",
+        "Fullscreen mode": "Fullscreen mode",
+        "Layout mode": "Layout mode",
+        "Classic mode": "Classic mode",
+        "Document mode": "Document mode",
+
+        // exklusive Menüleistenoptionen
+        File: "File",
+        Import: "Import",
+        Export: "Export",
+        Edit: "Edit",
+        Cut: "Cut",
+        Copy: "Copy",
+        Paste: "Paste",
+        View: "View",
+        Insert: "Insert",
+        Format: "Format",
+        Help: "Help",
+        New: "New",
+        Link: "Link",
+        Image: "Image",
+        "Horizontal line": "Horizontal line",
+        Text: "Text",
+        "Heading 1": "Heading 1",
+        "Heading 2": "Heading 2",
+        "Heading 3": "Heading 3",
+        "Heading 4": "Heading 4",
+        "Heading 5": "Heading 5",
+        "Heading 6": "Heading 6",
+        Align: "Align",
+        Left: "Left",
+        Center: "Center",
+        Right: "Right",
+        Justified: "Justified",
+        "Keyboard shortcuts": "Keyboard shortcuts",
+
+        // Zwischenablage
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation failed. Please check your browser's clipboard permissions.",
+
+        // Blockstil-Dropdown
+        Heading: "Heading",
+        Quote: "Quote",
+        Paragraph: "Paragraph",
+        "Text style": "Text style",
+        Lists: "Lists",
+
+        normal: "normal",
+        default: "default",
+
+        // Listen
+        "Bulleted list": "Bulleted list",
+        "Numbered list": "Numbered list",
+
+        // Links
+        "Enter text to display": "Enter text to display",
+        "Paste link": "Paste link",
+        "Link copied to clipboard": "Link copied to clipboard",
+
+        // Tastenkombinationsgruppen
+        "Text formatting": "Text formatting",
+        Editing: "Editing",
+        "Special actions": "Special actions",
+
+        // Farben
+        Black: "Black",
+        Gray: "Gray",
+        White: "White",
+        Red: "Red",
+        Orange: "Orange",
+        Yellow: "Yellow",
+        Lime: "Lime",
+        Green: "Green",
+        Teal: "Teal",
+        Cyan: "Cyan",
+        Blue: "Blue",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // Farbtöne
+        "Light gray": "Light gray",
+        "Medium gray": "Medium gray",
+        "Dark gray": "Dark gray",
+        "Light red": "Light red",
+        "Medium red": "Medium red",
+        "Dark red": "Dark red",
+        "Light orange": "Light orange",
+        "Medium orange": "Medium orange",
+        "Dark orange": "Dark orange",
+        "Light yellow": "Light yellow",
+        "Medium yellow": "Medium yellow",
+        "Dark yellow": "Dark yellow",
+        "Light lime": "Light lime",
+        "Medium lime": "Medium lime",
+        "Dark lime": "Dark lime",
+        "Light green": "Light green",
+        "Medium green": "Medium green",
+        "Dark green": "Dark green",
+        "Light teal": "Light teal",
+        "Medium teal": "Medium teal",
+        "Dark teal": "Dark teal",
+        "Light cyan": "Light cyan",
+        "Medium cyan": "Medium cyan",
+        "Dark cyan": "Dark cyan",
+        "Light blue": "Light blue",
+        "Medium blue": "Medium blue",
+        "Dark blue": "Dark blue",
+        "Light indigo": "Light indigo",
+        "Medium indigo": "Medium indigo",
+        "Dark indigo": "Dark indigo",
+        "Light magenta": "Light magenta",
+        "Medium magenta": "Medium magenta",
+        "Dark magenta": "Dark magenta"
+    }
+};
+~~~
+
+:::info[Info]
+Neben der Standard-Sprachumgebung ***en*** (*Englisch*) enthält RichText auch die integrierten Sprachumgebungen ***de*** (*Deutsch*) und ***cn*** (*Chinesisch*).
+:::
+
+<details>
+<summary><b>de</b> locale</summary>
+
+~~~jsx
+const de = {
+    richtext: {
+        // Schaltflächen/Aktionen
+        Undo: "Rückgängig",
+        Redo: "Wiederholen",
+        Style: "Stil",
+        "Font family": "Schriftart",
+        "Font size": "Schriftgröße",
+        Bold: "Fett",
+        Italic: "Kursiv",
+        Underline: "Unterstrichen",
+        Strikethrough: "Durchgestrichen",
+        Subscript: "Tiefgestellt",
+        Superscript: "Hochgestellt",
+        "Text color": "Textfarbe",
+        "Background color": "Hintergrundfarbe",
+        "Left align": "Linksbündig",
+        "Center align": "Zentriert",
+        "Right align": "Rechtsbündig",
+        Justify: "Blocksatz",
+        "Line height": "Zeilenhöhe",
+        Outdent: "Einzug verringern",
+        Indent: "Einzug erhöhen",
+        "Insert link": "Link einfügen",
+        "Insert image": "Bild einfügen",
+        "Insert horizontal line": "Horizontale Linie einfügen",
+        "Clear formatting": "Formatierung löschen",
+        Print: "Drucken",
+        "Fullscreen mode": "Vollbildmodus",
+        "Layout mode": "Layout-Modus",
+        "Classic mode": "Klassischer Modus",
+        "Document mode": "Dokumentenmodus",
+
+        // exklusive Menüleistenoptionen
+        File: "Datei",
+        Import: "Importieren",
+        Export: "Exportieren",
+        Edit: "Bearbeiten",
+        Cut: "Ausschneiden",
+        Copy: "Kopieren",
+        Paste: "Einfügen",
+        View: "Ansicht",
+        Insert: "Einfügen",
+        Format: "Format",
+        Help: "Hilfe",
+        New: "Neu",
+        Link: "Link",
+        Image: "Bild",
+        "Horizontal line": "Horizontale Linie",
+        Text: "Text",
+        "Heading 1": "Überschrift 1",
+        "Heading 2": "Überschrift 2",
+        "Heading 3": "Überschrift 3",
+        "Heading 4": "Überschrift 4",
+        "Heading 5": "Überschrift 5",
+        "Heading 6": "Überschrift 6",
+        Align: "Ausrichten",
+        Left: "Links",
+        Center: "Zentriert",
+        Right: "Rechts",
+        Justified: "Blocksatz",
+        "Keyboard shortcuts": "Tastenkürzel",
+
+        // Zwischenablage
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.",
+
+        // Blockstil-Dropdown
+        Heading: "Überschrift",
+        Quote: "Zitat",
+        Paragraph: "Absatz",
+        "Text style": "Textstil",
+        Lists: "Listen",
+
+        normal: "normal",
+        default: "standard",
+
+        // Listen
+        "Bulleted list": "Liste mit Aufzählungszeichen",
+        "Numbered list": "Nummerierte Liste",
+
+        // Links
+        "Enter text to display": "Text zum Anzeigen eingeben",
+        "Paste link": "Link einfügen",
+        "Link copied to clipboard": "Link in die Zwischenablage kopiert",
+
+        // Tastenkombinationsgruppen
+        "Text formatting": "Textformatierung",
+        Editing: "Bearbeitung",
+        "Special actions": "Spezielle Aktionen",
+
+        // Farben
+        Black: "Schwarz",
+        Gray: "Grau",
+        White: "Weiß",
+        Red: "Rot",
+        Orange: "Orange",
+        Yellow: "Gelb",
+        Lime: "Limette",
+        Green: "Grün",
+        Teal: "Türkis",
+        Cyan: "Cyan",
+        Blue: "Blau",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // Farbtöne
+        "Light gray": "Hellgrau",
+        "Medium gray": "Mittelgrau",
+        "Dark gray": "Dunkelgrau",
+        "Light red": "Hellrot",
+        "Medium red": "Mittelrot",
+        "Dark red": "Dunkelrot",
+        "Light orange": "Hellorange",
+        "Medium orange": "Mittelorange",
+        "Dark orange": "Dunkelorange",
+        "Light yellow": "Hellgelb",
+        "Medium yellow": "Mittleres Gelb",
+        "Dark yellow": "Dunkelgelb",
+        "Light lime": "Hellgrün",
+        "Medium lime": "Mittleres Grün",
+        "Dark lime": "Dunkelgrün",
+        "Light green": "Hellgrün",
+        "Medium green": "Mittleres Grün",
+        "Dark green": "Dunkelgrün",
+        "Light teal": "Hellblau",
+        "Medium teal": "Mittelblau",
+        "Dark teal": "Dunkelblau",
+        "Light cyan": "Hellcyan",
+        "Medium cyan": "Mittleres Cyan",
+        "Dark cyan": "Dunkelcyan",
+        "Light blue": "Hellblau",
+        "Medium blue": "Mittelblau",
+        "Dark blue": "Dunkelblau",
+        "Light indigo": "Hellindigo",
+        "Medium indigo": "Mittelindigo",
+        "Dark indigo": "Dunkelindigo",
+        "Light magenta": "Hellmagenta",
+        "Medium magenta": "Mittleres Magenta",
+        "Dark magenta": "Dunkelmagenta"
+    }
+};
+~~~
+</details>
+
+<details>
+<summary><b>cn</b> locale</summary>
+
+~~~jsx
+const cn = {
+    richtext: {
+        // buttons/actions,
+        Undo: "撤销",
+        Redo: "重做",
+        Style: "样式",
+        "Font family": "字体",
+        "Font size": "字体大小",
+        Bold: "粗体",
+        Italic: "斜体",
+        Underline: "下划线",
+        Strikethrough: "删除线",
+        Subscript: "下标",
+        Superscript: "上标",
+        "Text color": "文本颜色",
+        "Background color": "背景颜色",
+        "Left align": "左对齐",
+        "Center align": "居中对齐",
+        "Right align": "右对齐",
+        Justify: "两端对齐",
+        "Line height": "行高",
+        Outdent: "减少缩进",
+        Indent: "增加缩进",
+        "Insert link": "插入链接",
+        "Insert image": "插入图片",
+        "Insert horizontal line": "插入水平线",
+        "Clear formatting": "清除格式",
+        Print: "打印",
+        "Fullscreen mode": "全屏模式",
+        "Layout mode": "布局模式",
+        "Classic mode": "经典模式",
+        "Document mode": "文档模式",
+
+        // menubar exclusive options
+        File: "文件",
+        Import: "导入",
+        Export: "导出",
+        Edit: "编辑",
+        Cut: "剪切",
+        Copy: "复制",
+        Paste: "粘贴",
+        View: "视图",
+        Insert: "插入",
+        Format: "格式",
+        Help: "帮助",
+        New: "新建",
+        Link: "链接",
+        Image: "图片",
+        "Horizontal line": "水平线",
+        Text: "文本",
+        "Heading 1": "标题 1",
+        "Heading 2": "标题 2",
+        "Heading 3": "标题 3",
+        "Heading 4": "标题 4",
+        "Heading 5": "标题 5",
+        "Heading 6": "标题 6",
+        Align: "对齐",
+        Left: "左",
+        Center: "居中",
+        Right: "右",
+        Justified: "两端对齐",
+        "Keyboard shortcuts": "键盘快捷键",
+
+        // clipboard
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "操作失败。请检查浏览器的剪贴板权限。",
+
+        // block style dropdown
+        Heading: "标题",
+        Quote: "引用",
+        Paragraph: "段落",
+        "Text style": "文本样式",
+        Lists: "列表",
+
+        normal: "普通的",
+        default: "默认",
+
+        // lists
+        "Bulleted list": "项目符号列表",
+        "Numbered list": "编号列表",
+
+        // links
+        "Enter text to display": "输入要显示的文本",
+        "Paste link": "粘贴链接",
+        "Link copied to clipboard": "链接已复制到剪贴板",
+
+        // shortcut groups
+        "Text formatting": "文本格式化",
+        Editing: "编辑",
+        "Special actions": "特殊操作",
+
+        // colors
+        Black: "黑色",
+        Gray: "灰色",
+        White: "白色",
+        Red: "红色",
+        Orange: "橙色",
+        Yellow: "黄色",
+        Lime: "酸橙色",
+        Green: "绿色",
+        Teal: "水鸭色",
+        Cyan: "青色",
+        Blue: "蓝色",
+        Indigo: "靛蓝色",
+        Magenta: "洋红色",
+
+        // shades
+        "Light gray": "浅灰色",
+        "Medium gray": "中灰色",
+        "Dark gray": "深灰色",
+        "Light red": "浅红色",
+        "Medium red": "中红色",
+        "Dark red": "深红色",
+        "Light orange": "浅橙色",
+        "Medium orange": "中橙色",
+        "Dark orange": "深橙色",
+        "Light yellow": "浅黄色",
+        "Medium yellow": "中黄色",
+        "Dark yellow": "深黄色",
+        "Light lime": "浅酸橙色",
+        "Medium lime": "中酸橙色",
+        "Dark lime": "深酸橙色",
+        "Light green": "浅绿色",
+        "Medium green": "中绿色",
+        "Dark green": "深绿色",
+        "Light teal": "浅水鸭色",
+        "Medium teal": "中水鸭色",
+        "Dark teal": "深水鸭色",
+        "Light cyan": "浅青色",
+        "Medium cyan": "中青色",
+        "Dark cyan": "深青色",
+        "Light blue": "浅蓝色",
+        "Medium blue": "中蓝色",
+        "Dark blue": "深蓝色",
+        "Light indigo": "浅靛蓝色",
+        "Medium indigo": "中靛蓝色",
+        "Dark indigo": "深靛蓝色",
+        "Light magenta": "浅洋红色",
+        "Medium magenta": "中洋红色",
+        "Dark magenta": "深洋红色"
+    }
+};
+~~~
+</details>
+
+## Benutzerdefinierte Sprachumgebung {#custom-locale}
+
+Um eine benutzerdefinierte Sprachumgebung anzuwenden, müssen Sie:
+
+- eine benutzerdefinierte Sprachumgebung erstellen (oder die Standard-Sprachumgebung anpassen) und Übersetzungen für alle Textbeschriftungen bereitstellen (es kann jede beliebige Sprache sein)
+
+- die neue Sprachumgebung auf **RichText** über die Eigenschaft [`locale`](api/config/locale.md) anwenden oder die Methode [`setLocale()`](api/methods/set-locale.md) verwenden
+
+## Beispiel {#example}
+
+In diesem Snippet sehen Sie, wie zwischen mehreren Sprachumgebungen gewechselt wird:
+
+<iframe src="https://snippet.dhtmlx.com/zxjrin3i?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/stylization.md
new file mode 100644
index 0000000..ab35ed3
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/stylization.md
@@ -0,0 +1,89 @@
+---
+title: Gestaltung
+sidebar_label: Gestaltung
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Gestaltung. Lesen Sie Entwickleranleitungen und API-Referenz, sehen Sie sich Code-Beispiele und Live-Demos an und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# Gestaltung
+
+Sie können das Erscheinungsbild von DHTMLX RichText vollständig anpassen, indem Sie CSS-Variablen überschreiben und benutzerdefinierte Stile auf bestimmte Teile des Widgets anwenden.
+
+Diese Anleitung zeigt, wie Sie ein **dunkles Theme** anwenden und verfügbare Klassennamen verwenden, um die Menüleiste, Toolbar, Popups und den Inhaltsbereich des Editors zu gestalten.
+
+## Standardstruktur und Klassennamen {#default-structure-and-class-names}
+
+RichText verwendet die folgenden Kernklassen zur Strukturierung seiner Benutzeroberfläche:
+
+| Klassenname            | Beschreibung                                        |
+|------------------------|-----------------------------------------------------|
+| `.wx-richtext`         | Root-Container des RichText-Widgets                 |
+| `.wx-richtext-menubar` | Container für die Menüleiste                        |
+| `.wx-richtext-menu`    | Container für das Dropdown-Menü der Menüleiste      |
+| `.wx-richtext-toolbar` | Container für die Toolbar                           |
+| `.wx-editor-area`      | Container für den Haupt-Bearbeitungsbereich         |
+
+Sie können diese Klassen in Ihren benutzerdefinierten CSS-Selektoren verwenden, um das Erscheinungsbild des RichText-Editors zu überschreiben.
+
+## Standardstile überschreiben {#overriding-default-styles}
+
+Sie können die Standardstile von RichText überschreiben, indem Sie CSS-Variablen am `#root`-Container oder an bestimmten Unterelementen neu definieren:
+
+```html
+<div id="root" style="width: 100%; height: 100%;"></div>
+
+<style>
+  #root,
+  .wx-richtext-menu {
+    --wx-background: #404151;
+    --wx-background-alt: #212329;
+    --wx-color-primary: #14B195;
+    --wx-color-font: #FFFFFF;
+    --wx-border: 1px solid #6B6C79;
+    --wx-color-secondary-hover: rgba(20, 177, 149, 0.12);
+    --wx-button-active: rgba(20, 177, 149, 0.22);
+    --wx-icon-color: var(--wx-color-font);
+    --wx-color-font-alt: #9FA1AE;
+    --wx-color-font-disabled: #9FA1AE;
+    --wx-popup-border: var(--wx-border);
+
+    color-scheme: dark;
+  }
+
+  .wx-richtext-menu {
+    border: var(--wx-border);
+  }
+</style>
+```
+
+:::note[Hinweis]
+Diese Stile wenden einen dunklen Hintergrund an, passen die Schaltflächen- und Symbolfarben an und verbessern die Sichtbarkeit für dunkle UI-Themes.
+:::
+
+## Liste der unterstützten CSS-Variablen {#list-of-supported-css-variables}
+
+| Variablenname                | Beschreibung                                                                                |
+| ---------------------------- | --------------------------------------------------------------------------------------------|
+| `--wx-background`            | Hintergrundfarbe des Editors und der Popups                                                 |
+| `--wx-background-alt`        | Alternativer Hintergrund für die Menüleiste                                                 |
+| `--wx-color-primary`         | Akzentfarbe für Links, Blockzitate und Rahmen beim Skalieren von Bildern                    |
+| `--wx-color-font`            | Hauptschriftfarbe (für Editor, Menüleiste und Toolbar)                                      |
+| `--wx-color-font-alt`        | Alternative Schriftfarbe                                                                    |
+| `--wx-color-font-disabled`   | Schriftfarbe für deaktivierte Elemente (für Menüleisten- und Toolbar-Elemente)              |
+| `--wx-border`                | Rahmenstil für den gesamten Editor                                                          |
+| `--wx-color-secondary-hover` | Hover-Zustand-Hintergrund für Schaltflächen in Menüleiste und Toolbar                      |
+| `--wx-button-active`         | Aktiver-Zustand-Hintergrund für Schaltflächen in Menüleiste und Toolbar                    |
+| `--wx-icon-color`            | Farbe für Toolbar-Pfeilsymbole bei Dropdown-Elementen                                      |
+| `--wx-popup-border`          | Rahmen für Popup-Elemente                                                                   |
+
+## Empfehlungen {#best-practices}
+
+* Verwenden Sie `color-scheme: dark`, um die native Eingabegestaltung im Dunkelmodus zu verbessern
+* Vermeiden Sie das Ändern von Layout-bezogenen Eigenschaften (wie `display`, `position`), sofern nicht erforderlich
+
+## Live-Demo {#live-demo}
+
+In diesem Snippet sehen Sie, wie Sie einen benutzerdefinierten Stil auf RichText anwenden:
+
+<iframe src="https://snippet.dhtmlx.com/q8j4qqq9?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+
+**Verwandte Artikel:** [Konfiguration](guides/configuration.md)
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/typescript_support.md
new file mode 100644
index 0000000..df7af75
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/typescript_support.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: TypeScript-Unterstützung
+title: TypeScript-Unterstützung
+description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Verwendung von TypeScript. Lesen Sie Entwickleranleitungen und API-Referenz, sehen Sie sich Code-Beispiele und Live-Demos an und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter.
+---
+
+# TypeScript-Unterstützung
+
+Ab Version 2.0 bietet die DHTMLX RichText-Bibliothek die Möglichkeit, TypeScript-Definitionen zu verwenden. Die integrierte TypeScript-Unterstützung funktioniert sofort ohne zusätzliche Konfiguration.
+
+:::note[Hinweis]
+Sie können die Funktionalität direkt in unserem <a href="https://snippet.dhtmlx.com/ziynafp7?tag=richtext" target="_blank">Snippet Tool</a> ausprobieren.
+:::
+
+## Vorteile der Verwendung von TypeScript {#advantages-of-using-typescript}
+
+Warum sollten Sie DHTMLX RichText mit TypeScript verwenden?
+
+Der Hauptvorteil von TypeScript besteht darin, dass es Ihnen ermöglicht, die Effizienz des Entwicklungsprozesses erheblich zu steigern.
+
+Die Art und Weise, wie eine Anwendung erstellt wird, wird robuster, da die Typprüfung zusammen mit der automatischen Vervollständigung dabei hilft, potenzielle Fehler zu vermeiden. Darüber hinaus liefert TypeScript Ihnen Informationen über die Datentypen, die Sie bei der Arbeit mit der API der DHTMLX RichText-Bibliothek verwenden sollten.
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md
new file mode 100644
index 0000000..c18f254
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md
@@ -0,0 +1,109 @@
+---
+sidebar_label: Erste Schritte
+title: Erste Schritte
+description: In der Dokumentation der DHTMLX JavaScript-Bibliothek RichText erfahren Sie, wie Sie mit DHTMLX RichText beginnen können. Durchsuchen Sie Entwicklerleitfäden und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# Erste Schritte
+
+Dieses klare und umfassende Tutorial führt Sie durch die Schritte, die Sie ausführen müssen, um einen voll funktionsfähigen RichText auf einer Seite einzurichten.
+
+<div className="img_border">
+![DHTMLX RichText Classic-Modus](./assets/richtext/classic_mode.png)
+</div>
+
+## Schritt 1. Quelldateien einbinden {#step-1-including-source-files}
+
+Beginnen Sie mit der Erstellung einer HTML-Datei und nennen Sie sie *index.html*. Binden Sie anschließend die RichText-Quelldateien in die erstellte Datei ein.
+
+Es werden zwei Dateien benötigt:
+
+- die JS-Datei von RichText
+- die CSS-Datei von RichText
+
+~~~html {5-6} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <script>
+        // Ihr Code kommt hierher
+        </script>
+    </body>
+</html>
+~~~
+
+### RichText über npm oder yarn installieren {#installing-richtext-via-npm-or-yarn}
+
+Sie können JavaScript RichText mit dem Paketmanager **yarn** oder **npm** in Ihr Projekt importieren.
+
+#### Test-Version von RichText über npm oder yarn installieren {#installing-trial-richtext-via-npm-or-yarn}
+
+:::info[Info]
+Wenn Sie die Testversion von RichText verwenden möchten, laden Sie das [**RichText-Testpaket**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) herunter und folgen Sie den Schritten in der *README*-Datei. Beachten Sie, dass die Testversion von RichText nur 30 Tage lang verfügbar ist.
+:::
+
+#### PRO-Version von RichText über npm oder yarn installieren {#installing-pro-richtext-via-npm-or-yarn}
+
+:::info[Info]
+Sie können direkt im [Kundenbereich](https://dhtmlx.com/clients/) auf den privaten DHTMLX-**npm** zugreifen, indem Sie Ihren Login und Ihr Passwort für **npm** generieren. Eine detaillierte Installationsanleitung ist dort ebenfalls verfügbar. Bitte beachten Sie, dass der Zugriff auf den privaten **npm** nur während der Laufzeit Ihrer proprietären RichText-Lizenz möglich ist.
+:::
+
+## Schritt 2. RichText erstellen {#step-2-creating-richtext}
+
+Jetzt können Sie RichText zur Seite hinzufügen. Erstellen Sie zunächst den `<div>`-Container für RichText. Führen Sie dazu folgende Schritte aus:
+
+- Geben Sie einen DIV-Container in der Datei *index.html* an
+- Initialisieren Sie RichText mithilfe des Konstruktors `richtext.Richtext`
+
+Als Parameter akzeptiert der Konstruktor einen beliebigen gültigen CSS-Selektor des HTML-Containers, in den RichText platziert werden soll, sowie die entsprechenden Konfigurationsobjekte.
+
+~~~html {9,12-14} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <div id="root"></div>
+
+        <script>
+            const editor = new richtext.Richtext("#root", {
+                // Konfigurationseigenschaften
+            });
+        </script>
+    </body>
+</html>
+~~~
+
+## Schritt 3. RichText konfigurieren {#step-3-configuring-richtext}
+
+Als Nächstes können Sie die Konfigurationseigenschaften angeben, die die RichText-Komponente bei der Initialisierung haben soll.
+
+Um mit RichText zu beginnen, müssen Sie zunächst die Ausgangsdaten für den Editor über die Eigenschaft [`value`](api/config/value.md) bereitstellen. Darüber hinaus können Sie die [**Menüleiste**](api/config/menubar.md) aktivieren, die [**Toolbar**](api/config/toolbar.md) anpassen, den [**Vollbild**](api/config/fullscreen-mode.md)- und [**Layout**](api/config/layout-mode.md)-Modus festlegen sowie eine neue [**Locale**](api/config/locale.md) und [**Standard-Styles**](api/config/default-styles.md) anwenden.
+
+~~~jsx {2-12}
+const editor = new richtext.Richtext("#root", {
+    menubar: true,
+    toolbar: false,
+    fullscreenMode: true,
+    layoutMode: "document",
+    locale: richtext.locales.cn
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        // weitere Einstellungen
+    }
+});
+~~~
+
+## Wie geht es weiter {#whats-next}
+
+Das war es schon. Mit nur drei einfachen Schritten haben Sie ein praktisches Tool zur Inhaltsbearbeitung. Jetzt können Sie mit Ihrem Inhalt arbeiten oder die innere Welt von JavaScript RichText weiter erkunden.
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/index.md b/i18n/de/docusaurus-plugin-content-docs/current/index.md
new file mode 100644
index 0000000..fab156e
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/index.md
@@ -0,0 +1,126 @@
+---
+sidebar_label: RichText-Übersicht
+title: RichText-Übersicht
+slug: /
+description: Eine Übersicht der DHTMLX JavaScript-Bibliothek RichText finden Sie in der Dokumentation. Durchsuchen Sie Entwicklerleitfäden und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# RichText-Übersicht
+
+**DHTMLX RichText** ist ein flexibler und leichtgewichtiger WYSIWYG-Editor, der in JavaScript entwickelt wurde. RichText wurde für eine nahtlose Bearbeitungserfahrung in modernen Webanwendungen konzipiert und bietet eine übersichtliche Benutzeroberfläche, umfangreiche Formatierungsmöglichkeiten sowie vollständige Kontrolle über das Content-Rendering. Ob Sie ein CMS, ein internes Admin-Tool oder einen eingebetteten Dokumenteneditor entwickeln – RichText lässt sich problemlos integrieren und an Ihre Anforderungen anpassen.
+
+Die **DHTMLX RichText**-Komponente umfasst folgende Funktionen:
+
+- Zwei [**Layout-Modi**](api/config/layout-mode.md)
+
+- Serialisierung von Inhalten in reinen Text und HTML
+
+- Konfigurierbare [**Toolbar**](api/config/toolbar.md) mit integrierten und benutzerdefinierten Schaltflächen
+
+- Statische [**Menüleiste**](api/config/menubar.md), die ein- oder ausgeblendet werden kann
+
+- Bild-Upload, umfangreiche Formatierung, benutzerdefinierte Styles und Vollbildmodus
+
+- [Vollständiger API-Zugriff](api/overview/main_overview.md) für [Ereignisbehandlung](api/overview/event_bus_methods_overview.md), [Inhaltsbearbeitung](api/overview/methods_overview.md) und [reaktives Zustandsmanagement](api/overview/state_methods_overview.md)
+
+RichText ist framework-unabhängig und lässt sich problemlos mit [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md) und [Svelte](guides/integration_with_svelte.md) integrieren, was es für ein breites Spektrum von Frontend-Umgebungen geeignet macht.
+
+Diese Dokumentation bietet detaillierte Anleitungen zu Installation, Konfiguration, Verwendung und Anpassung. Sie finden Beispiele für gängige Szenarien, [vollständige API-Referenzen](api/overview/main_overview.md) und Best Practices für die Einbindung von RichText in Ihre Anwendung.
+
+## RichText-Struktur {#richtext-structure}
+
+### Menüleiste {#menubar}
+
+Die RichText-Menüleiste bietet Zugriff auf Bearbeitungsaktionen wie das Erstellen eines neuen Dokuments, Drucken, Importieren/Exportieren von Inhalten und mehr. Sie ist standardmäßig ausgeblendet.
+
+Verwenden Sie die Eigenschaft [`menubar`](api/config/menubar.md), um ihre Sichtbarkeit zu steuern. Die Menüleiste kann zwar aktiviert oder deaktiviert werden, ihr Inhalt ist jedoch derzeit nicht konfigurierbar.
+
+<div className="img_border">
+![Menüleiste](./assets/richtext/menubar.png)
+</div>
+
+### Toolbar {#toolbar}
+
+Die RichText-Toolbar bietet schnellen Zugriff auf Textformatierungs- und Strukturbearbeitungsfunktionen. Standardmäßig ist die [Toolbar](api/config/toolbar.md#default-config) aktiviert und zeigt eine vordefinierte Auswahl häufig verwendeter Steuerelemente wie Fett, Kursiv, Schriftarteinstellungen, Listenformatierung und mehr an.
+
+Die Eigenschaft [`toolbar`](api/config/toolbar.md) ermöglicht es Ihnen, Inhalt und Layout der Toolbar vollständig anzupassen. Sie können die Toolbar aktivieren oder deaktivieren, Standardsteuerelemente neu anordnen oder eine vollständig benutzerdefinierte Toolbar mithilfe eines Arrays aus vordefinierten Schaltflächenbezeichnern und benutzerdefinierten Schaltflächenobjekten definieren.
+
+<div className="img_border">
+![Toolbar](./assets/richtext/toolbar.png)
+</div>
+
+### Editor {#editor}
+
+Der RichText-Editor ist der zentrale Bereich, in dem Benutzer Inhalte erstellen und formatieren. Sie können Erscheinungsbild und Verhalten des Editors über Konfigurationsoptionen wie [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md) und [`defaultStyles`](api/config/default-styles.md) steuern. RichText unterstützt außerdem benutzerdefinierte Styles, Bildeinbettung und responsive Layout-Anpassungen, um den Anforderungen Ihrer Anwendung gerecht zu werden.
+
+#### Zwei Arbeitsmodi {#two-working-modes}
+
+DHTMLX RichText kann Inhalte im „classic"- und im „document"-Modus verarbeiten. Sie können den am besten geeigneten Modus wählen, um beim Bearbeiten von Text komfortabel zu arbeiten. Verwenden Sie die Eigenschaft [`layoutMode`](api/config/layout-mode.md), um den Modus programmgesteuert zu wechseln.
+
+- **„classic"**
+
+<div className="img_border">
+![Classic-Modus](./assets/richtext/classic_mode.png)
+</div>
+
+- **„document"**
+
+<div className="img_border">
+![Document-Modus](./assets/richtext/document_mode.png)
+</div>
+
+## Unterstützte Formate {#supported-formats}
+
+Der RichText-Editor unterstützt das [Einlesen](api/methods/set-value.md) und die [Serialisierung](api/methods/get-value.md) von Inhalten im **HTML**- und Nur-Text-Format.
+
+#### HTML-Format {#html-format}
+
+<div className="img_border">
+![HTML-Format](./assets/richtext/html_format.png)
+</div>
+
+#### Textformat {#text-format}
+
+<div className="img_border">
+![Textformat](./assets/richtext/text_format.png)
+</div>
+
+## Tastaturkürzel {#keyboard-shortcuts}
+
+Der RichText-Editor unterstützt eine Reihe gängiger Tastaturkürzel für schnellere Formatierung und Bearbeitung. Die Kürzel folgen plattformspezifischen Konventionen und stehen sowohl unter **Windows/Linux** (`Ctrl`) als auch unter **macOS** (`⌘`) zur Verfügung.
+
+### Textformatierung {#text-formatting}
+
+| Aktion          | Windows/Linux   | macOS         |
+|-----------------|-----------------|---------------|
+| Fett*           | `Ctrl+B`        | `⌘B`          |
+| Kursiv          | `Ctrl+I`        | `⌘I`          |
+| Unterstrichen   | `Ctrl+U`        | `⌘U`          |
+| Durchgestrichen | `Ctrl+Shift+X`  | `⌘⇧X`         |
+
+### Bearbeitung {#editing}
+
+| Aktion       | Windows/Linux            | macOS         |
+|--------------|--------------------------|---------------|
+| Rückgängig   | `Ctrl+Z`                 | `⌘Z`          |
+| Wiederholen  | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z`  |
+| Ausschneiden | `Ctrl+X`                 | `⌘X`          |
+| Kopieren     | `Ctrl+C`                 | `⌘C`          |
+| Einfügen     | `Ctrl+V`                 | `⌘V`          |
+
+### Sonderaktionen {#special-actions}
+
+| Aktion        | Windows/Linux | macOS |
+|---------------|---------------|-------|
+| Link einfügen | `Ctrl+K`      | `⌘K`  |
+| Drucken       | `Ctrl+P`      | `⌘P`  |
+
+:::info[Info]
+Weitere Tastaturkürzel können in zukünftigen Updates hinzukommen.
+:::
+
+Um die aktuelle Referenz zu den RichText-Tastaturkürzeln aufzurufen, drücken Sie **Hilfe** und wählen Sie die Option **Tastaturkürzel**:
+
+<div className="img_border">
+![Tastaturkürzel](./assets/richtext/shortcut_reference.png)
+</div>
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/de/docusaurus-plugin-content-docs/current/news/migration.md
new file mode 100644
index 0000000..dc28094
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/news/migration.md
@@ -0,0 +1,167 @@
+---
+sidebar_label: Migration auf neuere Versionen
+title: Migration auf neuere Versionen
+description: In der Dokumentation der DHTMLX JavaScript-Bibliothek RichText erfahren Sie alles über die Migration auf neuere Versionen. Durchsuchen Sie Entwicklerleitfäden und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+# Migration auf neuere Versionen
+
+## 1.2 -> 2.0 {#12---20}
+
+### Eigenschaften-Migration {#properties-migration}
+
+| Veraltete Eigenschaft | Ersetzt durch             | Hinweise                                              |
+| --------------------- | ------------------------- | ----------------------------------------------------- |
+| `customStats`         | *(Entfernt)*              | In der neuen Version 2.0 nicht verfügbar              |
+| `toolbarBlocks`       | `toolbar`                 | Unterstützt jetzt eine detaillierte Toolbar-Struktur  |
+| `defaultStyles`       | `defaultStyles` (updated) | Struktur ist jetzt block- und CSS-basiert             |
+| `mode`                | `layoutMode`              | Ersetzt durch eine strikte Enum-basierte Einstellung  |
+
+### - `customStats` {#--customstats}
+
+Die Eigenschaft `customStats` wurde entfernt. Die aktuelle Version von RichText unterstützt keine benutzerdefinierte Statistikanzeige mehr (z. B. Zeichenanzahl, Wortanzahl, Satzanzahl).
+
+Wenn Sie Textmetriken weiterhin berechnen müssen, können Sie dies extern tun, indem Sie auf den Editor-Inhalt zugreifen und ihn manuell verarbeiten:
+
+```jsx
+const content = editor.getValue();
+const wordCount = content.split(/\s+/).length;
+```
+
+### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) {#--toolbarblocks--toolbar}
+
+Vor **2.0** konnten Benutzer nur Blöcke mit Steuerelementen angeben
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+  toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"]
+});
+```
+
+Ab **2.0** können Benutzer einzelne Steuerelemente angeben
+```jsx{2-4} title="From 2.0"
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo", "style", "bold", "italic", "underline", "text-color",
+        "align", "link"
+    ]
+});
+```
+
+### - [`defaultStyles`](api/config/default-styles.md) {#--defaultstyles}
+
+Vor **2.0** konnten Benutzer Standardwerte für Toolbar-Auswahlsteuerelemente festlegen
+```jsx title="Before 2.0"
+defaultStyles: {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+}
+```
+
+Ab **2.0** können Benutzer Standard-Style-Werte für bestimmte Block-Typen festlegen
+```jsx title="From 2.0"
+defaultStyles: {
+  "*": {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+  },
+  h1: {
+    "font-size": "32px",
+    "color": "#333"
+  }
+}
+```
+
+:::note[Hinweis]
+Verwenden Sie `*`, um Basis-Standardwerte für alle Blöcke festzulegen, und überschreiben Sie dann spezifische Elemente (p, h1, blockquote usw.).
+:::
+
+### - `mode` → [`layoutMode`](api/config/layout-mode.md) {#--mode--layoutmode}
+
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+    mode: "document"
+});
+```
+
+```jsx{2} title="From 2.0"
+new Richtext("#root", {
+    layoutMode: "document" // oder "classic"
+});
+```
+
+Der neue [`layoutMode`](api/config/layout-mode.md) unterstützt ausschließlich die Werte `"classic"` und `"document"`.
+
+### Methoden-Migration {#methods-migration}
+
+| Veraltete Methode       | Neues Äquivalent                     | Hinweise                                                                   |
+| ----------------------- | ------------------------------------ | -------------------------------------------------------------------------- |
+| `getValue(mode)`        | `getValue(encoder)`                  | Encoder ersetzen String-Modi; separater Import für Encoder erforderlich    |
+| `setValue(value, mode)` | `setValue(value, encoder)`           | Encoder ersetzen String-Modi; separater Import für Encoder erforderlich    |
+| `getStats()`            | *Entfernt*                           | Kein Ersatz; manuelle Logik erforderlich                                   |
+| `getEditorAPI()`        | *Entfernt*                           | Intern; stattdessen öffentliches API verwenden                             |
+| `fire()`                | *Entfernt*                           | Ersetzt durch `exec()` und `intercept()`                                   |
+| `on()`, `detach()`      | ✅ Erhalten (`api.on`, `api.detach`) | Jetzt über `richtext.api` zugänglich                                       |
+| `fullScreen()`          | *Entfernt*                           | Konfigurationseigenschaft `fullscreenMode` verwenden                       |
+| `exitFullScreen()`      | *Entfernt*                           | Konfigurationseigenschaft `fullscreenMode` verwenden                       |
+| `paint()`               | *Entfernt*                           | Nicht mehr erforderlich                                                    |
+| `destructor()`          | ✅ Weiterhin verfügbar               | Unverändert                                                                |
+| `setConfig()`           | ✅ Neu                               | Ermöglicht Live-Konfigurationsaktualisierungen                             |
+| `setLocale()`           | ✅ Neu                               | Ermöglicht dynamisches Wechseln der Locale                                 |
+| `getReactiveState()`    | ✅ Neu                               | Ermöglicht reaktives Zustands-Tracking                                     |
+| `getState()`            | ✅ Neu                               | Liefert den aktuellen statischen Konfigurationszustand                     |
+| `intercept()`           | ✅ Neu                               | Interne Aktionen abfangen                                                  |
+| `exec()`                | ✅ Neu                               | Interne Aktionen ausführen                                                 |
+
+### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) {#--setvalue--getvalue}
+
+```jsx title="Before 2.0"
+...
+editor.setValue("<p>Hello</p>", "html");
+editor.getValue("text");
+```
+
+```jsx title="From 2.0"
+const fromTextEncoder = richtext.text.fromText;
+const fromHTMLEncoder = richtext.html.fromHTML;
+
+const toTextEncoder = richtext.text.toText;
+const toHTMLEncoder = richtext.html.toHTML;
+...
+editor.setValue("<p>Hello</p>", fromHTMLEncoder);
+editor.getValue(toTextEncoder);
+```
+
+:::note[Hinweis]
+Sie können `getValue()` und `setValue()` weiterhin ohne Encoder aufrufen — HTML wird standardmäßig verwendet
+:::
+
+### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) {#--on--detach}
+
+```jsx title="Before 2.0"
+editor.events.on("Change", function(action, canUndo, canRedo){
+  // Ihr Code hier
+});
+
+editor.events.detach("Change");
+```
+
+```jsx title="From 2.0"
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+```
+
+### - `fire()` → [`exec()`](api/internal/exec.md) und [`intercept()`](api/internal/intercept.md) verwenden {#--fire--use-exec-and-intercept}
+
+```jsx title="Before 2.0"
+editor.events.fire("some-event", [data]);
+```
+
+```jsx title="From 2.0"
+editor.api.exec("some-event", obj);
+
+// Ausführung verhindern
+editor.api.intercept("some-event", (obj) => false);
+```
diff --git a/i18n/de/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/de/docusaurus-plugin-content-docs/current/news/whats_new.md
new file mode 100644
index 0000000..666e0b5
--- /dev/null
+++ b/i18n/de/docusaurus-plugin-content-docs/current/news/whats_new.md
@@ -0,0 +1,192 @@
+---
+sidebar_label: Was ist neu
+title: Was ist neu
+description: In der Dokumentation der DHTMLX JavaScript-UI-Bibliothek erfahren Sie, was in DHTMLX RichText neu ist und können die Versionshistorie einsehen. Durchsuchen Sie Entwicklerleitfäden und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.
+---
+
+## Version 2.0.5 {#version-205}
+
+Veröffentlicht am 6. März 2026
+
+### Fehlerbehebungen {#fixes}
+
+- IME-Eingabe wird nicht korrekt verarbeitet
+- Kompositionsbasierte Eingabe (z. B. Chinesisch, Japanisch, Koreanisch auf dem Desktop) wird nicht korrekt verarbeitet
+- Die Eigenschaften `margin-left` und `line-height` werden beim HTML-Parsing ignoriert
+- Inline-Elemente erben Eigenschaften von übergeordneten Block-Elementen
+- Text kann nicht zwischen zwei Editor-Instanzen kopiert werden
+- Die Auswahl wird bei zwei (oder mehr) aktiven Editor-Instanzen nicht korrekt behandelt
+- Der Cursor wird falsch positioniert, wenn der einzige Inhalt eines Absatzes ein Bild ist
+- Unbegrenzte Verschachtelung von Subscript- und Superscript-Elementen
+- Beim Einfügen von Bildern werden diese inline eingefügt, anstatt sie zunächst hochzuladen
+- Leere Inline-Blöcke können an bestimmten Positionen (erste oder letzte Zeile) nicht entfernt werden
+- Der Editor scrollt beim Tippen nicht zum Cursor
+- Eingabe auf Android wird nicht korrekt verarbeitet
+- Fehlerhafte Auswahlbehandlung für HR-Elemente
+- Fehlerhafte Darstellung bei leeren Anfangswerten
+- Das Kopieren von Inhalten kann fehlschlagen, wenn diese selbstschließende Blöcke enthalten
+- Chrome: Emojis können nicht über das Kontextmenü eingefügt werden
+- Firefox: Alles auswählen (CTRL+A) wird nicht korrekt behandelt
+
+## Version 2.0.4 {#version-204}
+
+Veröffentlicht am 15. Oktober 2025
+
+### Fehlerbehebungen {#fixes-1}
+
+- Fehlerhafte Bereichsauswahl für Absätze
+- Link-Popups werden nicht angezeigt, wenn sie an verlinkte Bilder angrenzen
+- Anfängliche Toolbar-Werte stimmen nicht mit dem tatsächlichen Inhalt überein
+
+## Version 2.0.3 {#version-203}
+
+Veröffentlicht am 27. August 2025
+
+### Fehlerbehebungen {#fixes-2}
+
+- Ein Klick auf eine horizontale Linie verursacht einen Skriptfehler
+- Der Standard-Zeilenabstand ist falsch
+- Content-Styles enthalten doppelte Selektoren
+- Nur-Text-Blöcke ignorieren Style-Änderungen beim HTML-Parsing
+- Der Parser ignoriert maskierte Schriftartnamen in HTML
+- Der Parser ignoriert die Eigenschaften `margin-left` und `line-height` in HTML
+
+## Version 2.0.2 {#version-202}
+
+Veröffentlicht am 4. August 2025
+
+### Fehlerbehebungen {#fixes-3}
+
+- Paketinhalt aktualisiert
+
+## Version 2.0.1 {#version-201}
+
+Veröffentlicht am 30. Juli 2025
+
+### Fehlerbehebungen {#fixes-4}
+
+- Typdefinitionen für die Eigenschaft `defaultStyles` aktualisiert
+
+## Version 2.0 {#version-20}
+
+Veröffentlicht am 30. Juli 2025
+
+:::note[Hinweis]
+Das API von v1.2 ist nicht kompatibel mit v2.0. Weitere Informationen finden Sie in der [**Migrationsanleitung**](news/migration.md).
+:::
+
+### Neue Funktionen {#new-functionality}
+
+- **Neuartige Text-Darstellung**
+  Erleben Sie eine flüssigere, schnellere und präzisere Textdarstellung mit unserer neuen Engine
+
+- **Detaillierte Toolbar-Konfiguration**
+  Übernehmen Sie die vollständige Kontrolle über die Toolbar:
+  - [Einzelne Toolbar-Steuerelemente](guides/configuration.md/#default-toolbar-controls) und deren Reihenfolge festlegen
+  - [Benutzerdefinierte Steuerelemente](guides/configuration.md/#custom-toolbar-controls) hinzufügen
+
+- **Optionale [Menüleiste](api/config/menubar.md)**
+  Aktivieren Sie eine klassische Menüoberfläche am oberen Rand des Editors
+
+- **Erweiterter [Dokumentenmodus](guides/configuration.md/#layout-modes)**
+  Unterstützung für verschiedene Dokumentgrößen hinzugefügt
+
+- **Bildunterstützung**
+  - Bilder mit [Upload-Funktionen](api/config/image-upload-url.md) einfügen
+  - [Bildgröße](api/events/resize-image.md) interaktiv ändern
+
+- **Verbesserte Link-Erfahrung**
+  Neu gestaltete [Popup-Interaktionen](api/events/show-popup.md) für bessere Benutzerfreundlichkeit
+
+- **Neue Formatierungswerkzeuge**
+  - Textausrichtung: **Blocksatz**
+  - [Horizontale Linien](api/events/insert-line.md) einfügen
+  - [Einzug](api/events/indent.md) / [Ausrücken](api/events/outdent.md)
+  - [Zeilenabstand](api/events/set-line-height.md) festlegen
+  - [Subscript](api/events/subscript.md) / [Superscript](api/events/superscript.md) anwenden
+
+- **Listenverwaltung**
+  [Listen einfügen und verwalten](api/events/insert-list.md) Sie problemlos in Ihren Inhalten
+
+- **Import/Export & Drucken**
+  - [DOCX](api/events/import.md)-Dateien importieren
+  - Inhalte als DOCX oder PDF [exportieren](api/events/export.md)
+  - Dokumente direkt aus dem Editor [drucken](api/events/print.md)
+
+- **Tastaturkürzel**
+  Erweiterter Support für gängige Formatierungs- und Bearbeitungskürzel
+
+### Neues API {#new-api}
+
+#### Neue Eigenschaften {#new-properties}
+
+- [`fullscreenMode`](api/config/fullscreen-mode.md)
+- [`imageUploadUrl`](api/config/image-upload-url.md)
+- [`layoutMode`](api/config/layout-mode.md)
+- [`locale`](api/config/locale.md)
+- [`menubar`](api/config/menubar.md)
+- [`toolbar`](api/config/toolbar.md)
+- [`value`](api/config/value.md)
+
+#### Neue Methoden {#new-methods}
+
+- [`setConfig()`](api/methods/set-config.md) — Konfiguration dynamisch aktualisieren
+- [`setLocale()`](api/methods/set-locale.md) — Locale zur Laufzeit ändern
+
+#### Neue interne Methoden {#new-internal-methods}
+
+- [`api.exec()`](api/internal/exec.md)
+- [`api.intercept()`](api/internal/intercept.md)
+- [`api.getReactiveState()`](api/internal/get-reactive-state.md)
+- [`api.getState()`](api/internal/get-state.md)
+
+#### Neue Ereignisse {#new-events}
+
+Eine vollständige Liste der neuen Ereignisse finden Sie [hier](api/overview/events_overview.md)
+
+### Aktualisiertes API {#updated-api}
+
+#### Aktualisierte Eigenschaften {#updated-properties}
+
+- [`defaultStyles`](api/config/default-styles.md)
+
+#### Aktualisierte Methoden {#updated-methods}
+
+- [`setValue()`](api/methods/set-value.md)
+- [`getValue()`](api/methods/get-value.md)
+
+#### Aktualisierte interne Methoden {#updated-internal-methods}
+
+- [`api.detach()`](api/internal/detach.md)
+- [`api.on()`](api/internal/on.md)
+
+## Entferntes API {#removed-api}
+
+:::warning[Warnung]
+Verwenden Sie das entfernte API nicht in Ihren Projekten! <br/> Weitere Informationen finden Sie im Thema [Migration](news/migration.md).
+:::
+
+### [Entfernte Eigenschaften](news/migration.md#properties-migration) {#removed-properties}
+
+- [`customStats`](news/migration.md#--customstats)
+- [`mode`](news/migration.md#--mode--layoutmode)
+- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar)
+
+### [Entfernte Methoden](news/migration.md#methods-migration) {#removed-methods}
+
+- `exitFullScreen()`
+- `fullScreen()`
+- `getEditorAPI()`
+- `getStats()`
+- `paint()`
+
+### Entfernte interne Methoden {#removed-internal-methods}
+
+- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept)
+
+### Entfernte Ereignisse {#removed-events}
+
+- `Action`
+- `Change`
+- `selectionChange`
+- `selectionRefresh`
diff --git a/i18n/de/docusaurus-theme-classic/footer.json b/i18n/de/docusaurus-theme-classic/footer.json
new file mode 100644
index 0000000..cb5c883
--- /dev/null
+++ b/i18n/de/docusaurus-theme-classic/footer.json
@@ -0,0 +1,62 @@
+{
+  "link.title.Development center": {
+    "message": "Development center",
+    "description": "The title of the footer links column with title=Development center in the footer"
+  },
+  "link.title.Community": {
+    "message": "Community",
+    "description": "The title of the footer links column with title=Community in the footer"
+  },
+  "link.title.Company": {
+    "message": "Company",
+    "description": "The title of the footer links column with title=Company in the footer"
+  },
+  "link.item.label.Download RichText": {
+    "message": "Download RichText",
+    "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml"
+  },
+  "link.item.label.Examples": {
+    "message": "Examples",
+    "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext"
+  },
+  "link.item.label.Blog": {
+    "message": "Blog",
+    "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/"
+  },
+  "link.item.label.Forum": {
+    "message": "Forum",
+    "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/"
+  },
+  "link.item.label.GitHub": {
+    "message": "GitHub",
+    "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX"
+  },
+  "link.item.label.Youtube": {
+    "message": "Youtube",
+    "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx"
+  },
+  "link.item.label.Facebook": {
+    "message": "Facebook",
+    "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx"
+  },
+  "link.item.label.Twitter": {
+    "message": "Twitter",
+    "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx"
+  },
+  "link.item.label.Linkedin": {
+    "message": "Linkedin",
+    "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/"
+  },
+  "link.item.label.About us": {
+    "message": "About us",
+    "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml"
+  },
+  "link.item.label.Contact us": {
+    "message": "Contact us",
+    "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml"
+  },
+  "link.item.label.Licensing": {
+    "message": "Licensing",
+    "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses"
+  }
+}
diff --git a/i18n/de/docusaurus-theme-classic/navbar.json b/i18n/de/docusaurus-theme-classic/navbar.json
new file mode 100644
index 0000000..cdc91aa
--- /dev/null
+++ b/i18n/de/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,26 @@
+{
+  "title": {
+    "message": "JavaScript RichText Documentation",
+    "description": "The title in the navbar"
+  },
+  "logo.alt": {
+    "message": "DHTMLX RichText Documentation",
+    "description": "The alt text of navbar logo"
+  },
+  "item.label.Examples": {
+    "message": "Examples",
+    "description": "Navbar item with label Examples"
+  },
+  "item.label.Forum": {
+    "message": "Forum",
+    "description": "Navbar item with label Forum"
+  },
+  "item.label.Support": {
+    "message": "Support",
+    "description": "Navbar item with label Support"
+  },
+  "item.label.Download": {
+    "message": "Download",
+    "description": "Navbar item with label Download"
+  }
+}
diff --git a/i18n/es/code.json b/i18n/es/code.json
new file mode 100644
index 0000000..480bb4b
--- /dev/null
+++ b/i18n/es/code.json
@@ -0,0 +1,560 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "Esta página ha fallado.",
+    "description": "The title of the fallback page when the page crashed"
+  },
+  "theme.BackToTopButton.buttonAriaLabel": {
+    "message": "Volver al principio",
+    "description": "The ARIA label for the back to top button"
+  },
+  "theme.blog.archive.title": {
+    "message": "Archivo",
+    "description": "The page & hero title of the blog archive page"
+  },
+  "theme.blog.archive.description": {
+    "message": "Archivo",
+    "description": "The page & hero description of the blog archive page"
+  },
+  "theme.blog.paginator.navAriaLabel": {
+    "message": "Navegación por la página de la lista de blogs ",
+    "description": "The ARIA label for the blog pagination"
+  },
+  "theme.blog.paginator.newerEntries": {
+    "message": "Entradas más recientes",
+    "description": "The label used to navigate to the newer blog posts page (previous page)"
+  },
+  "theme.blog.paginator.olderEntries": {
+    "message": "Entradas más antiguas",
+    "description": "The label used to navigate to the older blog posts page (next page)"
+  },
+  "theme.blog.post.paginator.navAriaLabel": {
+    "message": "Barra de paginación de publicaciones del blog",
+    "description": "The ARIA label for the blog posts pagination"
+  },
+  "theme.blog.post.paginator.newerPost": {
+    "message": "Publicación más reciente",
+    "description": "The blog post button label to navigate to the newer/previous post"
+  },
+  "theme.blog.post.paginator.olderPost": {
+    "message": "Publicación más antigua",
+    "description": "The blog post button label to navigate to the older/next post"
+  },
+  "theme.tags.tagsPageLink": {
+    "message": "Ver Todas las Etiquetas",
+    "description": "The label of the link targeting the tag list page"
+  },
+  "theme.colorToggle.ariaLabel.mode.system": {
+    "message": "system mode",
+    "description": "The name for the system color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.light": {
+    "message": "modo claro",
+    "description": "The name for the light color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.dark": {
+    "message": "modo oscuro",
+    "description": "The name for the dark color mode"
+  },
+  "theme.colorToggle.ariaLabel": {
+    "message": "Cambiar entre modo oscuro y claro (actualmente {mode})",
+    "description": "The ARIA label for the color mode toggle"
+  },
+  "theme.docs.breadcrumbs.navAriaLabel": {
+    "message": "Rastro de navegación",
+    "description": "The ARIA label for the breadcrumbs"
+  },
+  "theme.docs.DocCard.categoryDescription.plurals": {
+    "message": "1 artículo|{count} artículos",
+    "description": "The default description for a category card in the generated index about how many items this category includes"
+  },
+  "theme.docs.paginator.navAriaLabel": {
+    "message": "Página del documento",
+    "description": "The ARIA label for the docs pagination"
+  },
+  "theme.docs.paginator.previous": {
+    "message": "Anterior",
+    "description": "The label used to navigate to the previous doc"
+  },
+  "theme.docs.paginator.next": {
+    "message": "Siguiente",
+    "description": "The label used to navigate to the next doc"
+  },
+  "theme.docs.tagDocListPageTitle.nDocsTagged": {
+    "message": "Un documento etiquetado|{count} documentos etiquetados",
+    "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.docs.tagDocListPageTitle": {
+    "message": "{nDocsTagged} con \"{tagName}\"",
+    "description": "The title of the page for a docs tag"
+  },
+  "theme.docs.versionBadge.label": {
+    "message": "Version: {versionLabel}"
+  },
+  "theme.docs.versions.unreleasedVersionLabel": {
+    "message": "Esta es la documentación sin publicar para {siteTitle}, versión {versionLabel}.",
+    "description": "The label used to tell the user that he's browsing an unreleased doc version"
+  },
+  "theme.docs.versions.unmaintainedVersionLabel": {
+    "message": "Esta es la documentación para {siteTitle} {versionLabel}, que ya no se mantiene activamente.",
+    "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+  },
+  "theme.docs.versions.latestVersionSuggestionLabel": {
+    "message": "Para la documentación actualizada, vea {latestVersionLink} ({versionLabel}).",
+    "description": "The label used to tell the user to check the latest version"
+  },
+  "theme.docs.versions.latestVersionLinkLabel": {
+    "message": "última versión",
+    "description": "The label used for the latest version suggestion link label"
+  },
+  "theme.common.headingLinkTitle": {
+    "message": "Enlace directo al {heading}",
+    "description": "Title for link to heading"
+  },
+  "theme.common.editThisPage": {
+    "message": "Editar esta página",
+    "description": "The link label to edit the current page"
+  },
+  "theme.lastUpdated.atDate": {
+    "message": " en {date}",
+    "description": "The words used to describe on which date a page has been last updated"
+  },
+  "theme.lastUpdated.byUser": {
+    "message": " por {user}",
+    "description": "The words used to describe by who the page has been last updated"
+  },
+  "theme.lastUpdated.lastUpdatedAtBy": {
+    "message": "Última actualización{atDate}{byUser}",
+    "description": "The sentence used to display when a page has been last updated, and by who"
+  },
+  "theme.navbar.mobileVersionsDropdown.label": {
+    "message": "Versiones",
+    "description": "The label for the navbar versions dropdown on mobile view"
+  },
+  "theme.NotFound.title": {
+    "message": "Página No Encontrada",
+    "description": "The title of the 404 page"
+  },
+  "theme.tags.tagsListLabel": {
+    "message": "Etiquetas:",
+    "description": "The label alongside a tag list"
+  },
+  "theme.AnnouncementBar.closeButtonAriaLabel": {
+    "message": "Cerrar",
+    "description": "The ARIA label for close button of announcement bar"
+  },
+  "theme.admonition.caution": {
+    "message": "precaución",
+    "description": "The default label used for the Caution admonition (:::caution)"
+  },
+  "theme.admonition.danger": {
+    "message": "peligro",
+    "description": "The default label used for the Danger admonition (:::danger)"
+  },
+  "theme.admonition.info": {
+    "message": "info",
+    "description": "The default label used for the Info admonition (:::info)"
+  },
+  "theme.admonition.note": {
+    "message": "nota",
+    "description": "The default label used for the Note admonition (:::note)"
+  },
+  "theme.admonition.tip": {
+    "message": "tip",
+    "description": "The default label used for the Tip admonition (:::tip)"
+  },
+  "theme.admonition.warning": {
+    "message": "aviso",
+    "description": "The default label used for the Warning admonition (:::warning)"
+  },
+  "theme.blog.sidebar.navAriaLabel": {
+    "message": "Navegación de publicaciones recientes",
+    "description": "The ARIA label for recent posts in the blog sidebar"
+  },
+  "theme.DocSidebarItem.expandCategoryAriaLabel": {
+    "message": "Ampliar la categoría '{label}' de la barra lateral",
+    "description": "The ARIA label to expand the sidebar category"
+  },
+  "theme.DocSidebarItem.collapseCategoryAriaLabel": {
+    "message": "Colapsar categoría '{label}' de la barra lateral",
+    "description": "The ARIA label to collapse the sidebar category"
+  },
+  "theme.IconExternalLink.ariaLabel": {
+    "message": "(opens in new tab)",
+    "description": "The ARIA label for the external link icon"
+  },
+  "theme.NavBar.navAriaLabel": {
+    "message": "Principal",
+    "description": "The ARIA label for the main navigation"
+  },
+  "theme.navbar.mobileLanguageDropdown.label": {
+    "message": "Idiomas",
+    "description": "The label for the mobile language switcher dropdown"
+  },
+  "theme.NotFound.p1": {
+    "message": "No pudimos encontrar lo que buscaba.",
+    "description": "The first paragraph of the 404 page"
+  },
+  "theme.NotFound.p2": {
+    "message": "Comuníquese con el dueño del sitio que le proporcionó la URL original y hágale saber que su vínculo está roto.",
+    "description": "The 2nd paragraph of the 404 page"
+  },
+  "theme.TOCCollapsible.toggleButtonLabel": {
+    "message": "En esta página",
+    "description": "The label used by the button on the collapsible TOC component"
+  },
+  "theme.blog.post.readMore": {
+    "message": "Leer Más",
+    "description": "The label used in blog post item excerpts to link to full blog posts"
+  },
+  "theme.blog.post.readMoreLabel": {
+    "message": "Leer más acerca de {title}",
+    "description": "The ARIA label for the link to full blog posts from excerpts"
+  },
+  "theme.blog.post.readingTime.plurals": {
+    "message": "Lectura de un minuto|{readingTime} min de lectura",
+    "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.CodeBlock.copy": {
+    "message": "Copiar",
+    "description": "The copy button label on code blocks"
+  },
+  "theme.CodeBlock.copied": {
+    "message": "Copiado",
+    "description": "The copied button label on code blocks"
+  },
+  "theme.CodeBlock.copyButtonAriaLabel": {
+    "message": "Copiar código",
+    "description": "The ARIA label for copy code blocks button"
+  },
+  "theme.CodeBlock.wordWrapToggle": {
+    "message": "Alternar ajuste de palabras",
+    "description": "The title attribute for toggle word wrapping button of code block lines"
+  },
+  "theme.docs.breadcrumbs.home": {
+    "message": "Página de Inicio",
+    "description": "The ARIA label for the home page in the breadcrumbs"
+  },
+  "theme.docs.sidebar.collapseButtonTitle": {
+    "message": "Colapsar barra lateral",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.collapseButtonAriaLabel": {
+    "message": "Colapsar barra lateral",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.navAriaLabel": {
+    "message": "Barra lateral de Documentos",
+    "description": "The ARIA label for the sidebar navigation"
+  },
+  "theme.docs.sidebar.closeSidebarButtonAriaLabel": {
+    "message": "Cerrar barra de lateral",
+    "description": "The ARIA label for close button of mobile sidebar"
+  },
+  "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+    "message": "← Volver al menú principal",
+    "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+  },
+  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+    "message": "Alternar barra lateral",
+    "description": "The ARIA label for hamburger menu button of mobile navigation"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": {
+    "message": "Expand the dropdown",
+    "description": "The ARIA label of the button to expand the mobile dropdown navbar item"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": {
+    "message": "Collapse the dropdown",
+    "description": "The ARIA label of the button to collapse the mobile dropdown navbar item"
+  },
+  "theme.docs.sidebar.expandButtonTitle": {
+    "message": "Expandir barra lateral",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.sidebar.expandButtonAriaLabel": {
+    "message": "Expandir barra lateral",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.SearchBar.seeAll": {
+    "message": "Ver todos los {count} resultados"
+  },
+  "theme.SearchPage.documentsFound.plurals": {
+    "message": "Un documento encontrado|{count} documentos encontrados",
+    "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.SearchPage.existingResultsTitle": {
+    "message": "Resultados de búsqueda para \"{query}\"",
+    "description": "The search page title for non-empty query"
+  },
+  "theme.SearchPage.emptyResultsTitle": {
+    "message": "Búsqueda en la documentación",
+    "description": "The search page title for empty query"
+  },
+  "theme.SearchPage.inputPlaceholder": {
+    "message": "Escribe tu búsqueda aquí",
+    "description": "The placeholder for search page input"
+  },
+  "theme.SearchPage.inputLabel": {
+    "message": "Buscar",
+    "description": "The ARIA label for search page input"
+  },
+  "theme.SearchPage.algoliaLabel": {
+    "message": "Con tecnología de Algolia",
+    "description": "The description label for Algolia mention"
+  },
+  "theme.SearchPage.noResultsText": {
+    "message": "No se encontraron resultados",
+    "description": "The paragraph for empty search result"
+  },
+  "theme.SearchPage.fetchingNewResults": {
+    "message": "Obteniendo nuevos resultados...",
+    "description": "The paragraph for fetching new search results"
+  },
+  "theme.SearchBar.label": {
+    "message": "Buscar",
+    "description": "The ARIA label and placeholder for search button"
+  },
+  "theme.SearchModal.searchBox.resetButtonTitle": {
+    "message": "Limpiar la búsqueda",
+    "description": "The label and ARIA label for search box reset button"
+  },
+  "theme.SearchModal.searchBox.cancelButtonText": {
+    "message": "Cancelar",
+    "description": "The label and ARIA label for search box cancel button"
+  },
+  "theme.SearchModal.searchBox.placeholderText": {
+    "message": "Buscar documentos",
+    "description": "The placeholder text for the main search input field"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAi": {
+    "message": "Hacer otra pregunta...",
+    "description": "The placeholder text when in AI question mode"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": {
+    "message": "Respondiendo...",
+    "description": "The placeholder text for search box when AI is streaming an answer"
+  },
+  "theme.SearchModal.searchBox.enterKeyHint": {
+    "message": "buscar",
+    "description": "The hint for the search box enter key text"
+  },
+  "theme.SearchModal.searchBox.enterKeyHintAskAi": {
+    "message": "enviar",
+    "description": "The hint for the Ask AI search box enter key text"
+  },
+  "theme.SearchModal.searchBox.searchInputLabel": {
+    "message": "Buscar",
+    "description": "The ARIA label for search input"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonText": {
+    "message": "Volver a búsqueda por palabras clave",
+    "description": "The text for back to keyword search button"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": {
+    "message": "Volver a búsqueda por palabras clave",
+    "description": "The ARIA label for back to keyword search button"
+  },
+  "theme.SearchModal.startScreen.recentSearchesTitle": {
+    "message": "Reciente",
+    "description": "The title for recent searches"
+  },
+  "theme.SearchModal.startScreen.noRecentSearchesText": {
+    "message": "Sin búsquedas recientes",
+    "description": "The text when there are no recent searches"
+  },
+  "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
+    "message": "Guardar esta búsqueda",
+    "description": "The title for save recent search button"
+  },
+  "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
+    "message": "Eliminar esta búsqueda del historial",
+    "description": "The title for remove recent search button"
+  },
+  "theme.SearchModal.startScreen.favoriteSearchesTitle": {
+    "message": "Favorito",
+    "description": "The title for favorite searches"
+  },
+  "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
+    "message": "Eliminar esta búsqueda de favoritos",
+    "description": "The title for remove favorite search button"
+  },
+  "theme.SearchModal.startScreen.recentConversationsTitle": {
+    "message": "Conversaciones recientes",
+    "description": "The title for recent conversations"
+  },
+  "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": {
+    "message": "Eliminar esta conversación del historial",
+    "description": "The title for remove recent conversation button"
+  },
+  "theme.SearchModal.errorScreen.titleText": {
+    "message": "No se pueden obtener resultados",
+    "description": "The title for error screen"
+  },
+  "theme.SearchModal.errorScreen.helpText": {
+    "message": "Quizás quieras comprobar tu conexión de red.",
+    "description": "The help text for error screen"
+  },
+  "theme.SearchModal.resultsScreen.askAiPlaceholder": {
+    "message": "Preguntar a la IA: ",
+    "description": "The placeholder text for Ask AI input"
+  },
+  "theme.SearchModal.askAiScreen.disclaimerText": {
+    "message": "Las respuestas son generadas por IA y pueden contener errores. Verifique las respuestas.",
+    "description": "The disclaimer text for AI answers"
+  },
+  "theme.SearchModal.askAiScreen.relatedSourcesText": {
+    "message": "Fuentes relacionadas",
+    "description": "The text for related sources"
+  },
+  "theme.SearchModal.askAiScreen.thinkingText": {
+    "message": "Pensando...",
+    "description": "The text when AI is thinking"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonText": {
+    "message": "Copiar",
+    "description": "The text for copy button"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonCopiedText": {
+    "message": "¡Copiado!",
+    "description": "The text for copy button when copied"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonTitle": {
+    "message": "Copiar",
+    "description": "The title for copy button"
+  },
+  "theme.SearchModal.askAiScreen.likeButtonTitle": {
+    "message": "Me gusta",
+    "description": "The title for like button"
+  },
+  "theme.SearchModal.askAiScreen.dislikeButtonTitle": {
+    "message": "No me gusta",
+    "description": "The title for dislike button"
+  },
+  "theme.SearchModal.askAiScreen.thanksForFeedbackText": {
+    "message": "¡Gracias por tu opinión!",
+    "description": "The text for thanks for feedback"
+  },
+  "theme.SearchModal.askAiScreen.preToolCallText": {
+    "message": "Buscando...",
+    "description": "The text before tool call"
+  },
+  "theme.SearchModal.askAiScreen.duringToolCallText": {
+    "message": "Buscando ",
+    "description": "The text during tool call"
+  },
+  "theme.SearchModal.askAiScreen.afterToolCallText": {
+    "message": "Se buscó ",
+    "description": "The text after tool call"
+  },
+  "theme.SearchModal.footer.selectText": {
+    "message": "seleccionar",
+    "description": "The select text for footer"
+  },
+  "theme.SearchModal.footer.submitQuestionText": {
+    "message": "Enviar pregunta",
+    "description": "The submit question text for footer"
+  },
+  "theme.SearchModal.footer.selectKeyAriaLabel": {
+    "message": "tecla Enter",
+    "description": "The ARIA label for select key in footer"
+  },
+  "theme.SearchModal.footer.navigateText": {
+    "message": "navegar",
+    "description": "The navigate text for footer"
+  },
+  "theme.SearchModal.footer.navigateUpKeyAriaLabel": {
+    "message": "Flecha arriba",
+    "description": "The ARIA label for navigate up key in footer"
+  },
+  "theme.SearchModal.footer.navigateDownKeyAriaLabel": {
+    "message": "Flecha abajo",
+    "description": "The ARIA label for navigate down key in footer"
+  },
+  "theme.SearchModal.footer.closeText": {
+    "message": "cerrar",
+    "description": "The close text for footer"
+  },
+  "theme.SearchModal.footer.closeKeyAriaLabel": {
+    "message": "tecla Escape",
+    "description": "The ARIA label for close key in footer"
+  },
+  "theme.SearchModal.footer.searchByText": {
+    "message": "Buscar por",
+    "description": "The 'Powered by' text for footer"
+  },
+  "theme.SearchModal.footer.backToSearchText": {
+    "message": "Volver a la búsqueda",
+    "description": "The back to search text for footer"
+  },
+  "theme.SearchModal.noResultsScreen.noResultsText": {
+    "message": "Sin resultados para",
+    "description": "The text when there are no results"
+  },
+  "theme.SearchModal.noResultsScreen.suggestedQueryText": {
+    "message": "Intenta buscando por",
+    "description": "The text for suggested query"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsText": {
+    "message": "Crees que esta consulta debería devolver resultados?",
+    "description": "The text for reporting missing results"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
+    "message": "Háganos saber.",
+    "description": "The link text for reporting missing results"
+  },
+  "theme.SearchModal.placeholder": {
+    "message": "Buscar documentos",
+    "description": "The placeholder of the input of the DocSearch pop-up modal"
+  },
+  "theme.blog.post.plurals": {
+    "message": "Una publicación|{count} publicaciones",
+    "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.tagTitle": {
+    "message": "{nPosts} etiquetados con \"{tagName}\"",
+    "description": "The title of the page for a blog tag"
+  },
+  "theme.blog.author.pageTitle": {
+    "message": "{authorName} - {nPosts}",
+    "description": "The title of the page for a blog author"
+  },
+  "theme.blog.authorsList.pageTitle": {
+    "message": "Authors",
+    "description": "The title of the authors page"
+  },
+  "theme.blog.authorsList.viewAll": {
+    "message": "View All Authors",
+    "description": "The label of the link targeting the blog authors page"
+  },
+  "theme.blog.author.noPosts": {
+    "message": "This author has not written any posts yet.",
+    "description": "The text for authors with 0 blog post"
+  },
+  "theme.contentVisibility.unlistedBanner.title": {
+    "message": "Página sin clasificar",
+    "description": "The unlisted content banner title"
+  },
+  "theme.contentVisibility.unlistedBanner.message": {
+    "message": "Esta página está sin clasificar. Los motores de búsqueda no la indexaran, y solo los usuarios con el enlace directo podrán acceder a esta.",
+    "description": "The unlisted content banner message"
+  },
+  "theme.contentVisibility.draftBanner.title": {
+    "message": "Draft page",
+    "description": "The draft content banner title"
+  },
+  "theme.contentVisibility.draftBanner.message": {
+    "message": "This page is a draft. It will only be visible in dev and be excluded from the production build.",
+    "description": "The draft content banner message"
+  },
+  "theme.ErrorPageContent.tryAgain": {
+    "message": "Intente de nuevo",
+    "description": "The label of the button to try again rendering when the React error boundary captures an error"
+  },
+  "theme.common.skipToMainContent": {
+    "message": "Saltar al contenido principal",
+    "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+  },
+  "theme.tags.tagsPageTitle": {
+    "message": "Etiquetas",
+    "description": "The title of the tag list page"
+  }
+}
diff --git a/i18n/es/docusaurus-plugin-content-blog/options.json b/i18n/es/docusaurus-plugin-content-blog/options.json
new file mode 100644
index 0000000..9239ff7
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-blog/options.json
@@ -0,0 +1,14 @@
+{
+  "title": {
+    "message": "Blog",
+    "description": "The title for the blog used in SEO"
+  },
+  "description": {
+    "message": "Blog",
+    "description": "The description for the blog used in SEO"
+  },
+  "sidebar.title": {
+    "message": "Recent posts",
+    "description": "The label for the left sidebar"
+  }
+}
diff --git a/i18n/es/docusaurus-plugin-content-docs/current.json b/i18n/es/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 0000000..7664591
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,62 @@
+{
+  "version.label": {
+    "message": "Next",
+    "description": "The label for version current"
+  },
+  "sidebar.docs.category.What's new and migration": {
+    "message": "Novedades y migración",
+    "description": "The label for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.What's new and migration.link.generated-index.title": {
+    "message": "Novedades y migración",
+    "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.API": {
+    "message": "API",
+    "description": "The label for category 'API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText methods": {
+    "message": "Métodos de RichText",
+    "description": "The label for category 'RichText methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API": {
+    "message": "API interna de RichText",
+    "description": "The label for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API.link.generated-index.title": {
+    "message": "Descripción general de la API interna",
+    "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Event Bus methods": {
+    "message": "Métodos del Event Bus",
+    "description": "The label for category 'Event Bus methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.State methods": {
+    "message": "Métodos de estado",
+    "description": "The label for category 'State methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText events": {
+    "message": "Eventos de RichText",
+    "description": "The label for category 'RichText events' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText properties": {
+    "message": "Propiedades de RichText",
+    "description": "The label for category 'RichText properties' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks": {
+    "message": "Integración con frameworks",
+    "description": "The label for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks.link.generated-index.title": {
+    "message": "Integración con frameworks",
+    "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides": {
+    "message": "Guías",
+    "description": "The label for category 'Guides' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides.link.generated-index.title": {
+    "message": "Guías",
+    "description": "The generated-index page title for category 'Guides' in sidebar 'docs'"
+  }
+}
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/es/docusaurus-plugin-content-docs/current/api/config/default-styles.md
new file mode 100644
index 0000000..f76a0bd
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/config/default-styles.md
@@ -0,0 +1,144 @@
+---
+sidebar_label: defaultStyles
+title: defaultStyles Config
+description: Aprenda sobre la configuración defaultStyles en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# defaultStyles
+
+### Descripción {#description}
+
+@short: Opcional. Especifica los valores de estilo predeterminados para tipos de bloque específicos
+
+### Uso {#usage}
+
+~~~jsx {}
+defaultStyles?: {
+    "*"?: { // afecta a todos los bloques, permitiendo establecer propiedades comunes para todos ellos
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+:::important[Importante]
+La propiedad `defaultStyles` NO aplica el CSS real a los bloques afectados. Los estilos CSS deben aplicarse por separado:
+
+```jsx title="index.js"
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+<style>
+    #root h2 {
+        font-family: Roboto;
+        font-size: 28px;
+        color: purple;
+        background: #FFC0CB;
+    }
+</style>
+```
+
+En este ejemplo, a todos los bloques `h2` se les asigna la familia de fuente `"Roboto"` con un tamaño de fuente de 28px, y también se modifican tanto el color de primer plano como el de fondo. Los estilos CSS también se asignan a los bloques `h2`.
+:::
+
+### Configuración predeterminada {#default-config}
+
+~~~jsx
+const defaultStyles = {
+    "*": { "font-family": "Arial" },
+    p: { "font-size": "14px" },
+    blockquote: { "font-size": "14px" },
+    h1: { "font-size": "32px" },
+    h2: { "font-size": "24px" },
+    h3: { "font-size": "18px" },
+    h4: { "font-size": "16px" },
+    h5: { "font-size": "14px" },
+    h6: { "font-size": "12px" }
+};
+~~~
+
+### Ejemplo {#example}
+
+~~~jsx {3-13}
+// inicializar RichText
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        h5: {
+            "font-family": "Roboto"
+        },
+        h6: {
+            "font-family": "Roboto"
+        }
+    },
+    // otras propiedades de configuración
+});
+~~~
+
+**Historial de cambios:** La propiedad fue actualizada en v2.0
+
+**Artículos relacionados:** [Configuración](guides/configuration.md)
+
+**Ejemplo relacionado:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/es/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
new file mode 100644
index 0000000..f47fcbd
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: fullscreenMode
+title: fullscreenMode Config
+description: Aprenda sobre la configuración fullscreenMode en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# fullscreenMode
+
+### Descripción {#description}
+
+@short: Opcional. Habilita el modo de pantalla completa de RichText
+
+### Uso {#usage}
+
+~~~jsx {}
+fullscreenMode?: boolean;
+~~~
+
+### Configuración predeterminada {#default-config}
+
+~~~jsx
+fullscreenMode: false;
+~~~
+
+### Ejemplo {#example}
+
+~~~jsx {3}
+// inicializar RichText
+new richtext.Richtext("#root", {
+    fullscreenMode: true
+    // otras propiedades de configuración
+});
+~~~
+
+**Historial de cambios:** La propiedad fue añadida en v2.0
+
+**Artículos relacionados:** [Configuración](guides/configuration.md)
+
+**Ejemplo relacionado:** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7?tag=richtext)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/es/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
new file mode 100644
index 0000000..7f61360
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: imageUploadUrl
+title: imageUploadUrl Config
+description: Aprenda sobre la configuración imageUploadUrl en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# imageUploadUrl
+
+### Descripción {#description}
+
+@short: Opcional. Especifica la URL que se utilizará para la carga de imágenes
+
+### Uso {#usage}
+
+~~~jsx {}
+imageUploadUrl?: string;
+~~~
+
+### Ejemplo {#example}
+
+~~~jsx {3}
+// inicializar RichText
+new richtext.Richtext("#root", {
+    imageUploadUrl: "some URL"
+    // otras propiedades de configuración
+});
+~~~
+
+**Historial de cambios:** La propiedad fue añadida en v2.0
+
+**Artículos relacionados:** [Configuración](guides/configuration.md)
+
+**Ejemplo relacionado:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/es/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
new file mode 100644
index 0000000..c80494c
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: layoutMode
+title: layoutMode Config
+description: Aprenda sobre la configuración layoutMode en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# layoutMode
+
+### Descripción {#description}
+
+@short: Opcional. Especifica el modo de diseño para el área principal del editor
+
+### Uso {#usage}
+
+~~~jsx {}
+layoutMode: "classic" | "document";
+~~~
+
+El modo `"classic"` representa el área de edición que ocupa toda la página. El modo `"document"` representa fielmente los tamaños reales de un documento (tamaños utilizados: A4, A5, A6, A7).
+
+### Configuración predeterminada {#default-config}
+
+~~~jsx
+layoutMode: "classic";
+~~~
+
+### Ejemplo {#example}
+
+~~~jsx {3}
+// inicializar RichText
+new richtext.Richtext("#root", {
+    layoutMode: "document"  // inicializa RichText con el modo "document" por defecto
+    // otras propiedades de configuración
+});
+~~~
+
+**Historial de cambios:** La propiedad fue añadida en v2.0 en lugar de la propiedad eliminada `mode`
+
+**Artículos relacionados:** [Configuración](guides/configuration.md)
+
+**Ejemplo relacionado:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/es/docusaurus-plugin-content-docs/current/api/config/locale.md
new file mode 100644
index 0000000..c834270
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/config/locale.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: locale
+title: locale Config
+description: Aprenda sobre la configuración locale en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# locale
+
+### Descripción {#description}
+
+@short: Opcional. Un objeto que incluye las etiquetas de localización de RichText
+
+:::info[Información]
+El objeto **locale** debe incluir todas las etiquetas de RichText con sus traducciones correspondientes.
+:::
+
+### Uso {#usage}
+
+~~~jsx {}
+locale?: object;
+~~~
+
+### Configuración predeterminada {#default-config}
+
+De manera predeterminada, RichText utiliza la configuración regional **inglesa**. También puede establecerla en una configuración regional personalizada.
+
+:::tip[Consejo]
+Para cambiar la configuración regional actual de forma dinámica, puede utilizar el método [**setLocale()**](api/methods/set-locale.md) de RichText
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {3}
+// inicializar RichText
+const editor = new richtext.RichText("#root", {
+    locale: richtext.locales.cn // la configuración regional china se establecerá inicialmente
+    // locale: richtext.locales.en // la configuración regional inglesa se establecerá inicialmente
+    // locale: richtext.locales.de // la configuración regional alemana se establecerá inicialmente
+    // otras propiedades de configuración
+});
+~~~
+
+**Historial de cambios:** La propiedad fue añadida en v2.0
+
+**Artículos relacionados:** [Localización](guides/localization.md)
+
+**Ejemplo relacionado:** [RichText. Localization](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/es/docusaurus-plugin-content-docs/current/api/config/menubar.md
new file mode 100644
index 0000000..a2d991b
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/config/menubar.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: menubar
+title: menubar Config
+description: Aprenda sobre la configuración menubar en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# menubar
+
+### Descripción {#description}
+
+@short: Opcional. Habilita el menubar superior de RichText
+
+### Uso {#usage}
+
+~~~jsx {}
+menubar?: boolean;
+~~~
+
+### Ejemplo {#example}
+
+~~~jsx {3}
+// inicializar RichText
+new richtext.Richtext("#root", {
+    menubar: true
+    // otras propiedades de configuración
+});
+~~~
+
+**Historial de cambios:** La propiedad fue añadida en v2.0
+
+**Artículos relacionados:** [Configuración](guides/configuration.md)
+
+**Ejemplo relacionado:** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7?tag=richtext)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/es/docusaurus-plugin-content-docs/current/api/config/toolbar.md
new file mode 100644
index 0000000..b6baf12
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/config/toolbar.md
@@ -0,0 +1,219 @@
+---
+sidebar_label: toolbar
+title: toolbar Config
+description: Aprenda sobre la configuración toolbar en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# toolbar
+
+### Descripción {#description}
+
+@short: Opcional. Habilita el toolbar y permite a los usuarios especificar/configurar los botones que se muestran en él
+
+### Uso {#usage}
+
+~~~jsx {}
+toolbar?: boolean | Array<string | { id: string, type: string, label?: string, tooltip?: string, css?: string, handler?: () => any }>;
+~~~
+
+#### Botones disponibles en el Toolbar {#available-buttons-within-toolbar}
+
+Puede especificar los siguientes botones en el toolbar de RichText:
+
+| Botón               | Descripción                                                                      |
+|---------------------|----------------------------------------------------------------------------------|
+| `undo`              | Revierte la acción más reciente del usuario.                                     |
+| `redo`              | Vuelve a aplicar la acción deshecha anteriormente.                               |
+| `style`             | Permite seleccionar estilos de texto (p. ej., encabezados, párrafo, etc.).       |
+| `font-family`       | Cambia la fuente del texto seleccionado.                                         |
+| `font-size`         | Ajusta el tamaño del texto seleccionado.                                         |
+| `bold`              | Aplica formato negrita al texto seleccionado.                                    |
+| `italic`            | Aplica formato cursiva al texto seleccionado.                                    |
+| `underline`         | Subraya el texto seleccionado.                                                   |
+| `strike`            | Aplica formato de tachado.                                                       |
+| `subscript`         | Formatea el texto como subíndice.                                                |
+| `superscript`       | Formatea el texto como superíndice.                                              |
+| `text-color`        | Cambia el color del texto.                                                       |
+| `background-color`  | Cambia el color de fondo (resaltado) del texto.                                  |
+| `align`             | Establece la alineación del texto (izquierda, centro, derecha, justificado).     |
+| `indent`            | Aumenta la sangría del bloque de texto.                                          |
+| `outdent`           | Reduce la sangría del párrafo.                                                   |
+| `line-height`       | Ajusta el interlineado (altura de línea).                                        |
+| `quote`             | Formatea el texto como cita en bloque.                                           |
+| `bulleted-list`     | Crea una lista con viñetas.                                                      |
+| `numbered-list`     | Crea una lista numerada.                                                         |
+| `link`              | Inserta un hipervínculo.                                                         |
+| `image`             | Inserta una imagen.                                                              |
+| `line`              | Inserta una línea horizontal.                                                    |
+| `clear`             | Elimina todo el formato del texto seleccionado.                                  |
+| `print`             | Abre el cuadro de diálogo de impresión.                                          |
+| `fullscreen`        | Activa o desactiva el modo de pantalla completa.                                 |
+| `mode`              | Cambia entre [modos de diseño](api/config/layout-mode.md) (classic/document)    |
+| `shortcuts`         | Muestra una lista de atajos de teclado disponibles.                              |
+| `separator`         | Añade un separador visual entre grupos del toolbar.                              |
+
+Puede usar estas cadenas para configurar los botones del toolbar de la siguiente manera:
+
+~~~jsx {2-7}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // otros botones
+    ],
+    // otras propiedades de configuración
+});
+~~~
+
+#### Botones personalizados en el Toolbar {#custom-buttons-within-toolbar}
+
+Puede especificar botones personalizados como objetos con los siguientes parámetros:
+
+- `type` - (requerido) especifica el tipo de control personalizado. Los tipos disponibles son: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` - (opcional) un ID de control personalizado (no puede coincidir con un ID de control existente)
+- `label` - (opcional) una etiqueta del botón (se combina con el icono)
+- `tooltip` - (opcional) un tooltip que se muestra al pasar el cursor (si no se especifica, usa el valor de "label")
+- `css` - (opcional) un nombre de clase CSS asignado al control (clases compatibles por defecto: wx-primary, wx-secondary)
+- `handler` - (opcional) una función callback que se ejecuta al hacer clic en el botón
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // botones (las cadenas representan solo botones)
+        "bold",
+        "italic",
+        // botones predefinidos (el usuario no puede definir otras opciones para estos (sin etiquetas, tooltips, opciones, etc.), solo ({ type: "button", id: string })
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // el usuario debe especificar el tipo correcto si desea usar un control predefinido (p. ej. richselect/colorpicker)
+        // los tipos que no coincidan se ignorarán (no se añadirán al toolbar)
+        {
+            type: "richselect", // type: "button" - incorrecto, se ignorará
+            id: "mode",
+        },
+        // botones personalizados (las opciones compatibles se detallan a continuación)
+        // el usuario solo puede definir botones personalizados (sin soporte de richselect/colorpicker por ahora)
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* lógica personalizada */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* lógica personalizada */}
+        }
+    ],
+    // otras propiedades de configuración
+});
+~~~
+
+#### Ocultar el Toolbar {#hide-toolbar}
+
+Si necesita ocultar el toolbar, establezca la propiedad `toolbar` en `false` de la siguiente manera:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false
+    // otras propiedades de configuración
+});
+~~~
+
+### Configuración predeterminada {#default-config}
+
+~~~jsx
+const defaultToolbarButtons = {
+    "undo",
+    "redo",
+    "separator",
+    "style",
+    "separator",
+    "font-family",
+    "font-size",
+    "separator",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "separator",
+    "text-color",
+    "background-color",
+    "separator",
+    "align",
+    "line-height",
+    "outdent",
+    "indent",
+    "separator",
+    "bulleted-list",
+    "numbered-list",
+    "quote",
+    "separator",
+    "link",
+    "image",
+    "separator",
+    "clear",
+    "separator",
+    "fullscreen",
+    "mode"
+};
+~~~
+
+:::tip[Consejo]
+Los controles predeterminados del toolbar son exportados por el widget RichText y se pueden acceder mediante `richtext.defaultToolbarButtons`.
+
+```jsx{4}
+// inicializar RichText
+new richtext.Richtext("#root", {
+    toolbar: [
+        ...richtext.defaultToolbarButtons,
+        {
+            type: "button",
+            id: "btn1", // id del botón (no puede coincidir con ids de botones existentes si desea aplicar lógica personalizada)
+            icon: "wxo-help", // icono del botón (se combina con la etiqueta)
+            css: "rounded", // nombre de clase CSS asignado al control (clases compatibles por defecto: wx-primary, wx-secondary)
+            label: "Custom button", // etiqueta del botón (se combina con el icono)
+            tooltip: "Some tooltip", // tooltip que se muestra al pasar el cursor (si no se especifica, usa el valor de "label")
+        }
+    ]
+    // otras propiedades de configuración
+});
+```
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {3-18}
+// inicializar RichText
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // botones personalizados (todas las opciones compatibles se usan a continuación)
+        // el usuario solo puede definir botones personalizados (sin soporte de richselect/colorpicker en este momento)
+        {
+            type: "button",
+            id: "btn1", // id del botón (no puede coincidir con ids de botones existentes si desea aplicar lógica personalizada)
+            icon: "wxo-help", // icono del botón (se combina con la etiqueta)
+            css: "rounded", // nombre de clase CSS asignado al control (clases compatibles por defecto: wx-primary, wx-secondary)
+            label: "Custom button", // etiqueta del botón (se combina con el icono)
+            tooltip: "Some tooltip", // tooltip que se muestra al pasar el cursor (si no se especifica, usa el valor de "label")
+            handler: () => ..., // lógica personalizada asociada a este botón
+        }
+    ]
+    // otras propiedades de configuración
+});
+~~~
+
+**Historial de cambios:** La propiedad fue añadida en v2.0
+
+**Artículos relacionados:** [Configuración](guides/configuration.md)
+
+**Ejemplo relacionado:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/es/docusaurus-plugin-content-docs/current/api/config/value.md
new file mode 100644
index 0000000..ed4b207
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/config/value.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: value
+title: value Config
+description: Aprenda sobre la configuración value en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# value
+
+### Descripción {#description}
+
+@short: Opcional. Especifica el valor (contenido) inicial que se muestra en el área del editor de RichText
+
+:::tip[Consejo]
+Si desea establecer el valor (contenido) usando un formato personalizado, utilice el método integrado [`setValue()`](api/methods/set-value.md).
+:::
+
+### Uso {#usage}
+
+~~~jsx {}
+value?: string;
+~~~
+
+### Ejemplo {#example}
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    value: "<h1>some value</h1>" // establece el valor predeterminado (formato HTML)
+    // otras propiedades de configuración
+});
+~~~
+
+**Historial de cambios:** La propiedad fue añadida en v2.0
+
+**Artículos relacionados:** [Configuración](guides/configuration.md)
+
+**Ejemplo relacionado:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/align.md
new file mode 100644
index 0000000..50c702b
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/align.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: align
+title: Evento align
+description: Puede consultar información sobre el evento align en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# align
+
+### Descripción {#description}
+
+@short: Se activa cuando se cambia la alineación del texto mediante el menubar/toolbar o los métodos del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+"align": ({
+    align: "left" | "center" | "right" | "justify"
+}) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **align** puede recibir un objeto con el siguiente parámetro:
+
+- `align` - la alineación del texto. Puede especificar uno de los siguientes valores: `"left" | "center" | "right" | "justify"`
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-12}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "align"
+editor.api.on("align", (obj) => {
+    console.log(`Align to: ${obj.align}`);
+});
+// alinear el texto a la izquierda
+editor.api.exec("align", {
+    align: "left"
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
new file mode 100644
index 0000000..f8a72e7
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: clear-text-format
+title: Evento clear-text-format
+description: Puede consultar información sobre el evento clear-text-format en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# clear-text-format
+
+### Descripción {#description}
+
+@short: Se activa cuando se borra el formato de un texto mediante el menubar/toolbar o los métodos del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+"clear-text-format": () => boolean | void;
+~~~
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-10}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "clear-text-format"
+editor.api.on("clear-text-format", () => {
+    console.log("Text format was cleared");
+});
+// borrar el formato del texto
+editor.api.exec("clear-text-format", {});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/copy.md
new file mode 100644
index 0000000..9500db8
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/copy.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: copy
+title: Evento copy
+description: Puede consultar información sobre el evento copy en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# copy
+
+### Descripción {#description}
+
+@short: Se activa cuando se copia el texto seleccionado
+
+### Uso {#usage}
+
+~~~jsx {}
+"copy": () => boolean | void;
+~~~
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "copy"
+editor.api.on("copy", () => {
+    console.log("Selected text was copied");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/create-new.md
new file mode 100644
index 0000000..bc217c3
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/create-new.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: create-new
+title: Evento create-new
+description: Puede consultar información sobre el evento create-new en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# create-new
+
+### Descripción {#description}
+
+@short: Se activa cuando se pulsa la opción "New" en el menubar o mediante los métodos del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+"create-new": ({ reset?: boolean }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **create-new** puede recibir un objeto con el siguiente parámetro:
+
+- `reset` - restablece el historial al crear un nuevo archivo
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-10}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "create-new"
+editor.api.on("create-new", ({ reset }) => {
+    console.log(`Document has been cleared. History has ${reset ? "" : "not"} been reset.`);
+});
+// crear nuevo archivo y restablecer el historial
+editor.api.exec("create-new", { reset: true });
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/cut.md
new file mode 100644
index 0000000..c9a9a06
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/cut.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: cut
+title: Evento cut
+description: Puede consultar información sobre el evento cut en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# cut
+
+### Descripción {#description}
+
+@short: Se activa cuando se corta el texto seleccionado
+
+### Uso {#usage}
+
+~~~jsx {}
+"cut": () => boolean | void;
+~~~
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "cut"
+editor.api.on("cut", () => {
+    console.log("Selected text was cut");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/delete-link.md
new file mode 100644
index 0000000..5eb7f55
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/delete-link.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: delete-link
+title: Evento delete-link
+description: Puede consultar información sobre el evento delete-link en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# delete-link
+
+### Descripción {#description}
+
+@short: Se activa cuando se elimina un enlace
+
+### Uso {#usage}
+
+~~~jsx {}
+"delete-link": () => boolean | void;
+~~~
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "delete-link"
+editor.api.on("delete-link", () => {
+    console.log("The link was deleted");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/export.md
new file mode 100644
index 0000000..3b17924
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/export.md
@@ -0,0 +1,59 @@
+---
+sidebar_label: export
+title: Evento export
+description: Puede consultar información sobre el evento export en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# export
+
+### Descripción {#description}
+
+@short: Se activa después de pulsar la opción "Export" en el menubar o mediante los métodos del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+"export": ({ options: IExportOptions; result?: any }) => boolean | void;
+
+interface IExportOptions {
+    format?: "docx" | "pdf";
+    url?: string;
+    download?: boolean;
+    fileName?: string;
+}
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **export** puede recibir un objeto con los siguientes parámetros:
+
+- `format` - el formato del archivo
+- `url` - la URL base para la exportación del archivo
+- `download` - permite al usuario especificar si desea descargar el archivo tras recibir la respuesta del servidor. Si la propiedad se establece en "false", el archivo no se descargará, pero el usuario podrá obtener los datos blob desde el objeto del evento (véase la propiedad `result` en la definición del evento)
+- `fileName` - el nombre del archivo a exportar
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-15}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "export"
+editor.api.on("export", (obj) => {
+    console.log(obj);
+    console.log("The file was exported");
+});
+// exportar el valor como archivo pdf
+editor.api.exec("export", {
+    format: "pdf",
+    download: false,
+    fileName: "some file"
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/import.md
new file mode 100644
index 0000000..0f31e69
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/import.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: import
+title: Evento import
+description: Puede consultar información sobre el evento import en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# import
+
+### Descripción {#description}
+
+@short: Se activa después de pulsar la opción "Import" en el menubar o mediante los métodos del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+"import": ({ html?: string }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **import** puede recibir un objeto con el siguiente parámetro:
+
+- `html` - un valor de texto en formato html
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-13}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "import"
+editor.api.on("import", (obj) => {
+    console.log(obj.html);
+    console.log("The new value was imported");
+});
+// importar nuevo valor
+editor.api.exec("import", {
+    html: "<h2>some value</h2>" // simplemente llama a setValue
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/indent.md
new file mode 100644
index 0000000..93dcb1f
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/indent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: indent
+title: Evento indent
+description: Puede consultar información sobre el evento indent en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# indent
+
+### Descripción {#description}
+
+@short: Se activa cuando se aumenta la sangría de un bloque
+
+### Uso {#usage}
+
+~~~jsx {}
+"indent": ({ step: number }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **indent** puede recibir un objeto con los siguientes parámetros:
+
+- `step` - el paso con el que se aumentó la sangría
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "indent"
+editor.api.on("indent", (obj) => {
+    console.log(obj);
+    console.log("The indention was increased");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-image.md
new file mode 100644
index 0000000..13f6855
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-image.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: insert-image
+title: Evento insert-image
+description: Puede consultar información sobre el evento insert-image en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# insert-image
+
+### Descripción {#description}
+
+@short: Se activa cuando se inserta una imagen
+
+### Uso {#usage}
+
+~~~jsx {}
+"insert-image": (IImageContext) => boolean | void;
+
+interface IImageContext {
+    id: TID;
+    value: string;
+    width: number;
+    height: number;
+    // props adicionales del ctx del uploader, no requeridas para la acción real
+    name?: string;
+    file?: File;
+    status?: string;
+    selected: (ctx: IImageContext) => void;
+    uploaded: (ctx: IImageContext) => void;
+}
+~~~
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "insert-image"
+editor.api.on("insert-image", (obj) => {
+    console.log(obj);
+    console.log("The image was inserted");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-line.md
new file mode 100644
index 0000000..460f7ad
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-line.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: insert-line
+title: Evento insert-line
+description: Puede consultar información sobre el evento insert-line en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# insert-line
+
+### Descripción {#description}
+
+@short: Se activa cuando se inserta una línea horizontal
+
+### Uso {#usage}
+
+~~~jsx {}
+"insert-line": () => boolean | void;
+~~~
+
+:::info[Información]
+Para gestionar los eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "insert-line"
+editor.api.on("insert-line", () => {
+    console.log("The horizontal line was inserted");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-link.md
new file mode 100644
index 0000000..00f8181
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-link.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: insert-link
+title: Evento insert-link
+description: Puede consultar información sobre el evento insert-link en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# insert-link
+
+### Descripción {#description}
+
+@short: Se activa cuando se inserta un enlace
+
+### Uso {#usage}
+
+~~~jsx {}
+"insert-link": ({ url: string }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **update-link** puede recibir un objeto con el siguiente parámetro:
+
+- `url` - la URL a insertar
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "insert-link"
+editor.api.on("insert-link", (obj) => {
+    console.log(obj)
+    console.log("The following link was inserted: " + obj.url);
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-list.md
new file mode 100644
index 0000000..08840a0
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/insert-list.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: insert-list
+title: Evento insert-list
+description: Puede consultar información sobre el evento insert-list en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# insert-list
+
+### Descripción {#description}
+
+@short: Se activa cuando se inserta una lista
+
+### Uso {#usage}
+
+~~~jsx {}
+"insert-list": ({ type: TListType }) => boolean | void;
+
+type TListType = "bulleted" | "numbered";
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **insert-list** puede recibir un objeto con el siguiente parámetro:
+
+- `type` - el tipo de lista insertada. Puede especificar los siguientes valores:
+    - `"bulleted"` - lista con viñetas
+    - `"numbered"` - lista numerada
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "insert-list"
+editor.api.on("insert-list", (obj) => {
+    console.log(obj.type);
+    console.log("The list was inserted");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/outdent.md
new file mode 100644
index 0000000..358ded9
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/outdent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: outdent
+title: Evento outdent
+description: Puede consultar información sobre el evento outdent en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# outdent
+
+### Descripción {#description}
+
+@short: Se activa cuando se reduce la sangría de un bloque
+
+### Uso {#usage}
+
+~~~jsx {}
+"outdent": ({ step: number }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **outdent** puede recibir un objeto con los siguientes parámetros:
+
+- `step` - el paso con el que se redujo la sangría
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "outdent"
+editor.api.on("outdent", (obj) => {
+    console.log(obj);
+    console.log("The indention was decreased");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/paste.md
new file mode 100644
index 0000000..aa3be1f
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/paste.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: paste
+title: Evento paste
+description: Puede consultar información sobre el evento paste en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# paste
+
+### Descripción {#description}
+
+@short: Se activa cuando se pega contenido
+
+### Uso {#usage}
+
+~~~jsx {}
+"paste": () => boolean | void;
+~~~
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "paste"
+editor.api.on("paste", () => {
+    console.log("Content was pasted");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/print.md
new file mode 100644
index 0000000..14b7011
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/print.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: print
+title: Evento print
+description: Puede consultar información sobre el evento print en la documentación de la biblioteca JavaScript DHTMLX RichText. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# print
+
+### Descripción {#description}
+
+@short: Se activa cuando se imprime el documento
+
+### Uso {#usage}
+
+~~~jsx {}
+"print": () => boolean | void;
+~~~
+
+:::info[Información]
+Para gestionar eventos internos puede usar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+// propiedades de configuración
+});
+// suscribirse al evento "print"
+editor.api.on("print", () => {
+    console.log("The document is printing");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/redo.md
new file mode 100644
index 0000000..a41fb1d
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/redo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: redo
+title: Evento redo
+description: Puede obtener información sobre el evento redo en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# redo
+
+### Descripción {#description}
+
+@short: Se activa cuando se presiona el botón "Redo" en el menubar/toolbar o mediante los métodos del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+"redo": () => boolean | void;
+~~~
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "redo"
+editor.api.on("redo", () => {
+    console.log("Redo operation was performed");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/resize-image.md
new file mode 100644
index 0000000..0189b3c
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/resize-image.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: resize-image
+title: Evento resize-image
+description: Puede obtener información sobre el evento resize-image en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# resize-image
+
+### Descripción {#description}
+
+@short: Se activa cuando se redimensiona una imagen
+
+### Uso {#usage}
+
+~~~jsx {}
+"resize-image": ({ id: number, width: number, height: number }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **resize-image** puede recibir un objeto con los siguientes parámetros:
+
+- `id` - el ID de la imagen
+- `width` - el ancho de la imagen
+- `height` - el alto de la imagen
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+// propiedades de configuración
+});
+// suscribirse al evento "resize-image"
+editor.api.on("resize-image", (obj) => {
+    console.log(obj);
+    console.log("The image was resized")
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
new file mode 100644
index 0000000..fff09ed
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-family
+title: Evento set-font-family
+description: Puede obtener información sobre el evento set-font-family en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# set-font-family
+
+### Descripción {#description}
+
+@short: Se activa cuando se establece una familia de fuente
+
+### Uso {#usage}
+
+~~~jsx {}
+"set-font-family": ({ fontFamily: string }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **set-font-family** puede recibir un objeto con el siguiente parámetro:
+
+- `fontFamily` - la familia de fuente a aplicar. Las siguientes fuentes están disponibles: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"`
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-13}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "set-font-family"
+editor.api.on("set-font-family", (obj) => {
+    console.log(obj.fontFamily);
+    console.log("The font family was changed");
+});
+// aplicar nueva familia de fuente
+editor.api.exec("set-font-family", {
+    fontFamily: "Roboto"
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
new file mode 100644
index 0000000..1379f73
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-size
+title: Evento set-font-size
+description: Puede obtener información sobre el evento set-font-size en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# set-font-size
+
+### Descripción {#description}
+
+@short: Se activa cuando se establece un tamaño de fuente
+
+### Uso {#usage}
+
+~~~jsx {}
+"set-font-size": ({ fontSize: string }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **set-font-size** puede recibir un objeto con el siguiente parámetro:
+
+- `fontSize` - el tamaño de fuente a aplicar
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-13}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "set-font-size"
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+    console.log("The font size was changed");
+});
+// aplicar nuevo tamaño de fuente
+editor.api.exec("set-font-size", {
+    fontSize: "11px"
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
new file mode 100644
index 0000000..600c570
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-line-height
+title: Evento set-line-height
+description: Puede obtener información sobre el evento set-line-height en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# set-line-height
+
+### Descripción {#description}
+
+@short: Se activa cuando se establece un interlineado
+
+### Uso {#usage}
+
+~~~jsx {}
+"set-line-height": ({ lineHeight: string }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **set-line-height** puede recibir un objeto con el siguiente parámetro:
+
+- `lineHeight` - el interlineado
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-13}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "set-line-height"
+editor.api.on("set-line-height", (obj) => {
+    console.log(obj);
+    console.log("The line height was changed");
+});
+// aplicar un nuevo interlineado
+editor.api.exec("set-line-height", {
+   lineHeight: "15px"
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
new file mode 100644
index 0000000..40c5d26
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: set-text-color
+title: Evento set-text-color
+description: Puede obtener información sobre el evento set-text-color en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# set-text-color
+
+### Descripción {#description}
+
+@short: Se activa cuando se establece un color de texto y/o un color de fondo del texto
+
+### Uso {#usage}
+
+~~~jsx {}
+"set-text-color": (ITextColor) => boolean | void;
+
+interface ITextColor {
+    color?: string;
+    background?: string;
+}
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **set-text-color** puede recibir un objeto con los siguientes parámetros:
+
+- `color` - un color de texto
+- `background` - un color de fondo del texto
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-14}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "set-text-color"
+editor.api.on("set-text-color", (obj) => {
+    console.log(obj);
+    console.log("The text color and/or background text color were changed");
+});
+// aplicar color de texto y fondo
+editor.api.exec("set-text-color", {
+   color: "red",
+   background: "blue"
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
new file mode 100644
index 0000000..df778fb
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: set-text-format
+title: Evento set-text-format
+description: Puede obtener información sobre el evento set-text-format en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# set-text-format
+
+### Descripción {#description}
+
+@short: Se activa cuando se establece un formato de texto
+
+### Uso {#usage}
+
+~~~jsx {}
+"set-text-format": (ITextFormat) => boolean | void;
+
+interface ITextFormat {
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+    underline?: boolean;
+}
+~~~
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Parámetros {#parameters}
+
+El callback del evento **set-text-format** puede recibir un objeto con los siguientes parámetros:
+
+- `bold` - formato de texto negrita
+- `italic` - formato de texto cursiva
+- `strike` - formato de texto tachado
+- `underline` - formato de texto subrayado
+
+### Ejemplo {#example}
+
+~~~jsx {5-14}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "set-text-format"
+editor.api.on("set-text-format", (obj) => {
+    console.log(obj);
+    console.log("The text format was changed");
+});
+// aplicar el formato de texto "italic" y bold
+editor.api.exec("set-text-format", {
+    italic: true,
+    bold: true
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
new file mode 100644
index 0000000..e8f7423
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: set-text-style
+title: Evento set-text-style
+description: Puede obtener información sobre el evento set-text-style en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# set-text-style
+
+### Descripción {#description}
+
+@short: Se activa cuando se establece un estilo de texto
+
+### Uso {#usage}
+
+~~~jsx {}
+"set-text-style": ({ tag: TBlockType }) => boolean | void;
+
+type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **set-text-style** puede recibir un objeto con los siguientes parámetros:
+
+- `tag` - un estilo de texto
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-13}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "set-text-style"
+editor.api.on("set-text-style", (obj) => {
+    console.log(obj.tag);
+    console.log("The text style was changed");
+});
+// aplicar nuevo estilo de texto
+editor.api.exec("set-text-style", {
+    tag: "blockquote"
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/show-popup.md
new file mode 100644
index 0000000..4309919
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/show-popup.md
@@ -0,0 +1,53 @@
+---
+sidebar_label: show-popup
+title: Evento show-popup
+description: Puede obtener información sobre el evento show-popup en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# show-popup
+
+### Descripción {#description}
+
+@short: Se activa cuando se muestra u oculta un popup
+
+### Uso {#usage}
+
+~~~jsx {}
+"show-popup": (IPopupConfig) => boolean | void;
+
+interface IPopupConfig {
+    type: "link" | null;
+    image?: boolean;
+}
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **show-popup** puede recibir un objeto con los siguientes parámetros:
+
+- `type` - el tipo de popup
+- `image` - proporciona acceso a contexto adicional (si el cursor actual apunta a una imagen o no)
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-13}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "show-popup"
+editor.api.on("show-popup", (obj) => {
+    console.log(obj);
+    console.log("The popup was shown/hidden");
+});
+// mostrar el popup de enlace
+editor.api.exec("show-popup", {
+    type: "link"
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/subscript.md
new file mode 100644
index 0000000..8600600
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/subscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: subscript
+title: Evento subscript
+description: Puede obtener información sobre el evento subscript en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# subscript
+
+### Descripción {#description}
+
+@short: Se activa cuando se presiona el botón "Subscript" en el menubar/toolbar o mediante los métodos del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+"subscript": () => boolean | void;
+~~~
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-10}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "subscript"
+editor.api.on("subscript", () => {
+    console.log("Subscript was applied");
+});
+// disparar el evento "subscript"
+editor.api.exec("subscript", {});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/superscript.md
new file mode 100644
index 0000000..ad8b279
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/superscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: superscript
+title: Evento superscript
+description: Puede obtener información sobre el evento superscript en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# superscript
+
+### Descripción {#description}
+
+@short: Se activa cuando se presiona el botón "Superscript" en el menubar/toolbar o mediante los métodos del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+"superscript": () => boolean | void;
+~~~
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "superscript"
+editor.api.on("superscript", () => {
+    console.log("Superscript was applied");
+});
+// disparar el evento "superscript"
+editor.api.exec("superscript", {});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
new file mode 100644
index 0000000..cb531f4
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-fullscreen-mode
+title: Evento toggle-fullscreen-mode
+description: Puede obtener información sobre el evento toggle-fullscreen-mode en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# toggle-fullscreen-mode
+
+### Descripción {#description}
+
+@short: Se activa cuando se cambia el modo de pantalla completa
+
+### Uso {#usage}
+
+~~~jsx {}
+"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **toggle-fullscreen-mode** puede recibir un objeto con el siguiente parámetro:
+
+- `mode` - activa el modo de pantalla completa
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "toggle-fullscreen-mode"
+editor.api.on("toggle-fullscreen-mode", (obj) => {
+    console.log(obj);
+    console.log("The full screen mode was changed");
+});
+// activar el modo de pantalla completa
+editor.api.exec("toggle-fullscreen-mode", { mode: true });
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
new file mode 100644
index 0000000..af2eb99
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-layout-mode
+title: Evento toggle-layout-mode
+description: Puede obtener información sobre el evento toggle-layout-mode en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# toggle-layout-mode
+
+### Descripción {#description}
+
+@short: Se activa cuando se cambia el modo de diseño
+
+### Uso {#usage}
+
+~~~jsx {}
+"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **toggle-layout-mode** puede recibir un objeto con los siguientes parámetros:
+
+- `mode` - el modo de diseño. Los siguientes modos están disponibles: `"classic" | "document"`
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-11}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "toggle-layout-mode"
+editor.api.on("toggle-layout-mode", (obj) => {
+    console.log(obj);
+    console.log("The layout mode was changed");
+});
+// establecer el modo de diseño "document"
+editor.api.exec("toggle-layout-mode", { mode: "document" });
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
new file mode 100644
index 0000000..3db63e2
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-shortcut-info
+title: Evento toggle-shortcut-info
+description: Puede obtener información sobre el evento toggle-shortcut-info en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# toggle-shortcut-info
+
+### Descripción {#description}
+
+@short: Se activa cuando se cambia la información de atajos de teclado
+
+### Uso {#usage}
+
+~~~jsx {}
+"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **toggle-shortcut-info** puede recibir un objeto con el siguiente parámetro:
+
+- `mode` - activa la información de atajos de teclado; `true` para mostrar el popup de información de atajos, `false` para ocultarlo
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "toggle-shortcut-info"
+editor.api.on("toggle-shortcut-info", (obj) => {
+    console.log(obj);
+    console.log("The shortcut info was shown");
+});
+// activar la información de atajos de teclado
+editor.api.exec("toggle-shortcut-info", { mode: true });
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/undo.md
new file mode 100644
index 0000000..f2ff126
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/undo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: undo
+title: Evento undo
+description: Puede obtener información sobre el evento undo en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# undo
+
+### Descripción {#description}
+
+@short: Se activa cuando se presiona el botón "Undo" en el menubar/toolbar o mediante los métodos del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+"undo": () => boolean | void;
+~~~
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "undo"
+editor.api.on("undo", () => {
+    console.log("Undo operation was performed");
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/es/docusaurus-plugin-content-docs/current/api/events/update-link.md
new file mode 100644
index 0000000..89f9288
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/events/update-link.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: update-link
+title: Evento update-link
+description: Puede obtener información sobre el evento update-link en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías de desarrollo y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# update-link
+
+### Descripción {#description}
+
+@short: Se activa cuando se actualiza un enlace
+
+### Uso {#usage}
+
+~~~jsx {}
+"update-link": ({ id: number, url: string }) => boolean | void;
+~~~
+
+### Parámetros {#parameters}
+
+El callback del evento **update-link** puede recibir un objeto con los siguientes parámetros:
+
+- `id` - el ID del enlace
+- `url` - la URL modificada
+
+:::info[Información]
+Para manejar eventos internos puede utilizar los [**métodos del Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-9}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "update-link"
+editor.api.on("update-link", (obj) => {
+    console.log(obj);
+    console.log("The following link was updated:" + obj.url);
+});
+~~~
+
+**Historial de cambios:** El evento fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/detach.md
new file mode 100644
index 0000000..9a94c9f
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/detach.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: api.detach()
+title: Método detach
+description: Puede obtener información sobre el método detach en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# api.detach()
+
+### Descripción {#description}
+
+@short: Permite eliminar/desconectar manejadores de eventos
+
+### Uso {#usage}
+
+~~~jsx {}
+api.detach( tag: string ): void;
+~~~
+
+### Parámetros {#parameters}
+
+- `tag` - (obligatorio) el nombre de la etiqueta de acción
+
+### Eventos {#events}
+
+:::info[Información]
+La lista completa de eventos internos de RichText se puede encontrar [**aquí**](api/overview/events_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {6-8,10}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+~~~
+
+**Historial de cambios:** El método fue actualizado en v2.0. Los parámetros `name` y `context` fueron eliminados
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/exec.md
new file mode 100644
index 0000000..4521e09
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/exec.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.exec()
+title: Método exec
+description: Puede obtener información sobre el método exec en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# api.exec()
+
+### Descripción {#description}
+
+@short: Permite disparar eventos internos
+
+### Uso {#usage}
+
+~~~jsx {}
+api.exec(
+    event: string,
+    config: object
+): void;
+~~~
+
+### Parámetros {#parameters}
+
+- `event` - (obligatorio) un evento a disparar
+- `config` - (obligatorio) el objeto de configuración con parámetros (véase el evento a disparar)
+
+### Eventos {#events}
+
+:::info[Información]
+La lista completa de eventos internos de RichText se puede encontrar [**aquí**](api/overview/events_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// establecer el tamaño de fuente del texto
+editor.api.exec("set-font-size", {
+    fontSize: "16px"
+});
+~~~
+
+**Historial de cambios:** El método fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
new file mode 100644
index 0000000..f21039f
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getReactiveState()
+title: Método getReactiveState
+description: Puede obtener información sobre el método getReactiveState en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# api.getReactiveState()
+
+### Descripción {#description}
+
+@short: Devuelve un objeto con las propiedades reactivas de RichText
+
+### Uso {#usage}
+
+~~~jsx {}
+api.getReactiveState(): object;
+~~~
+
+### Valor de retorno {#returns}
+
+El método devuelve un objeto con los siguientes parámetros:
+
+~~~jsx {}
+{
+    cursorState: { subscribe: any },
+    defaultStyles {...},
+    document {...},
+    fullscreen {...},
+    history {...},
+    layoutMode {...},
+    popup {...},
+    selection {...}
+}
+~~~
+
+### Ejemplo {#example}
+
+~~~jsx {5-7}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// obtener el estado reactivo de RichText
+const reactive_state = editor.api.getReactiveState();
+console.log(reactive_state)
+~~~
+
+**Historial de cambios:** El método fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/get-state.md
new file mode 100644
index 0000000..728d5d3
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/get-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getState()
+title: Método getState
+description: Puede obtener información sobre el método getState en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# api.getState()
+
+### Descripción {#description}
+
+@short: Devuelve un objeto con las propiedades del StateStore de RichText
+
+### Uso {#usage}
+
+~~~jsx {}
+api.getState(): object;
+~~~
+
+### Valor de retorno {#returns}
+
+El método devuelve un objeto con los siguientes parámetros:
+
+~~~jsx {}
+{
+    cursorState: {},
+    defaultStyles: {},
+    document: {},
+    fullscreen: boolean,
+    history: []
+    layoutMode: string,
+    popup: any,
+    selection: {}
+}
+~~~
+
+### Ejemplo {#example}
+
+~~~jsx {5-7}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// obtener el estado de RichText
+const state = editor.api.getState();
+console.log(state);
+~~~
+
+**Historial de cambios:** El método fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/intercept.md
new file mode 100644
index 0000000..bbd2b4e
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/intercept.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.intercept()
+title: Método intercept
+description: Puede obtener información sobre el método intercept en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# api.intercept()
+
+### Descripción {#description}
+
+@short: Permite interceptar y prevenir los eventos internos
+
+### Uso {#usage}
+
+~~~jsx {}
+api.intercept(
+    event: string,
+    callback: function
+): void;
+~~~
+
+### Parámetros {#parameters}
+
+- `event` - (obligatorio) un evento a disparar
+- `callback` - (obligatorio) un callback a ejecutar (los argumentos del callback dependerán del evento a disparar)
+
+### Eventos {#events}
+
+:::info[Información]
+La lista completa de eventos internos de RichText se puede encontrar [**aquí**](api/overview/events_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-10}
+// crear RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// prohibir el cambio del tamaño de fuente
+editor.api.intercept("set-font-size", (obj) => {
+    if(obj.fontSize !== "36px" ){
+        return false;
+    }
+});
+~~~
+
+**Historial de cambios:** El método fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/on.md
new file mode 100644
index 0000000..358de3a
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/on.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.on()
+title: Método on
+description: Puede obtener información sobre el método on en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# api.on()
+
+### Descripción {#description}
+
+@short: Permite adjuntar un manejador a los eventos internos
+
+### Uso {#usage}
+
+~~~jsx {}
+api.on(
+    event: string,
+    handler: function
+): void;
+~~~
+
+### Parámetros {#parameters}
+
+- `event` - (obligatorio) un evento a disparar
+- `handler` - (obligatorio) un manejador a adjuntar (los argumentos del manejador dependerán del evento a disparar)
+
+### Eventos {#events}
+
+:::info[Información]
+La lista completa de eventos internos de RichText se puede encontrar [**aquí**](api/overview/events_overview.md)
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-8}
+// inicializar RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+// suscribirse al evento "set-font-size"
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+});
+~~~
+
+**Historial de cambios:** El método fue actualizado en v2.0. El parámetro `context` fue eliminado
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/set-next.md
new file mode 100644
index 0000000..9c10b6f
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/internal/set-next.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: api.setNext()
+title: Método setNext
+description: Puede obtener información sobre el método setNext en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# api.setNext()
+
+### Descripción {#description}
+
+@short: Permite añadir una acción en el orden del Event Bus
+
+### Uso {#usage}
+
+~~~jsx {}
+api.setNext(next: any): void;
+~~~
+
+### Parámetros {#parameters}
+
+- `next` - (obligatorio) la acción a incluir en el orden del **Event Bus**
+
+### Ejemplo {#example}
+
+~~~jsx {10-11}
+const server = "https://some-backend-url";
+// Asuma que tiene una clase de servicio de servidor personalizada llamada someServerService
+const someServerService = new ServerDataService(server);
+
+fetch(server + "/data").then((res) => res.json()).then((data) => {
+    const editor = new richtext.Richtext("#root", {
+        value: data
+    });
+
+    // Integrar someServerService en el orden del Event Bus del widget
+    editor.api.setNext(someServerService);
+});
+~~~
+
+**Historial de cambios:** El método fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/destructor.md
new file mode 100644
index 0000000..6fcf3ae
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/destructor.md
@@ -0,0 +1,28 @@
+---
+sidebar_label: destructor()
+title: Método destructor
+description: Puede obtener información sobre el método destructor en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# destructor()
+
+### Descripción {#description}
+
+@short: Elimina todos los elementos HTML de RichText y desconecta todos los eventos relacionados
+
+### Uso {#usage}
+
+~~~jsx {}
+destructor(): void;
+~~~
+
+### Ejemplo {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+
+// eliminar RichText
+editor.destructor();
+~~~
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/get-value.md
new file mode 100644
index 0000000..49467d0
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/get-value.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: getValue()
+title: Método getValue
+description: Puede obtener información sobre el método getValue en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# getValue()
+
+### Descripción {#description}
+
+@short: Devuelve el valor de RichText
+
+### Uso {#usage}
+
+~~~jsx {}
+getValue(encoder?: any): string;
+~~~
+
+### Parámetros {#parameters}
+
+- `encoder` - (opcional) un analizador usado para codificar el contenido de RichText en un formato personalizado. Los siguientes formatos están disponibles: `html` (predeterminado) y `text`
+
+Puede obtener el encoder requerido de la siguiente manera:
+
+```jsx
+const toTextEncoder = richtext.text.toText; // encoder de texto
+const toHTMLEncoder = richtext.html.toHTML; // encoder html
+```
+
+### Ejemplo {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // establece el valor predeterminado (formato HTML)
+    // otras propiedades de configuración
+});
+
+const toTextEncoder = richtext.text.toText;
+const editor_value = editor.getValue(toTextEncoder);
+console.log(editor_value);
+~~~
+
+**Historial de cambios:** El método fue actualizado en v2.0. El parámetro `mode` fue eliminado. El parámetro `encoder` fue añadido
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/set-config.md
new file mode 100644
index 0000000..ba1ba1f
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/set-config.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: setConfig()
+title: Método setConfig
+description: Puede obtener información sobre el método setConfig en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# setConfig()
+
+### Descripción {#description}
+
+@short: Aplica nuevos parámetros de configuración a RichText
+
+### Uso {#usage}
+
+~~~jsx {}
+setConfig(config: { [key:any]: any }): void;
+~~~
+
+### Parámetros {#parameters}
+
+- `config` - (obligatorio) el objeto de parámetros de configuración de RichText. Consulte la lista completa de propiedades [aquí](api/overview/properties_overview.md)
+
+:::note[Nota]
+El método `setConfig()` preserva todos los parámetros previamente establecidos que no se proporcionan explícitamente en la llamada al método `setConfig()`.
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "<h1>Some text</h1>",
+    // otras propiedades de configuración
+});
+
+editor.setConfig({
+    layoutMode: "document"
+});
+~~~
+
+**Historial de cambios:** El método fue añadido en v2.0
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
new file mode 100644
index 0000000..60e4190
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: setLocale()
+title: Método setLocale
+description: Puede obtener información sobre el método setLocale en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# setLocale()
+
+### Descripción {#description}
+
+@short: Aplica una nueva configuración regional a RichText
+
+### Uso {#usage}
+
+~~~jsx {}
+setLocale(null | locale?: object): void;
+~~~
+
+### Parámetros {#parameters}
+
+- `null` - (opcional) restablece la configuración regional predeterminada (*inglés*)
+- `locale` - (opcional) el objeto de datos de la nueva configuración regional a aplicar
+
+:::info[Información]
+Use el método `setLocale()` para aplicar una nueva configuración regional a RichText. Para restablecer RichText a la configuración regional predeterminada, llame al método `setLocale()` sin argumentos (o con un valor *null*).
+:::
+
+### Ejemplo {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+
+// aplicar la configuración regional "de" a RichText
+editor.setLocale(de);
+~~~
+
+**Historial de cambios:** El método fue añadido en v2.0
+
+**Artículos relacionados:** [Localización](guides/localization.md)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/set-value.md
new file mode 100644
index 0000000..519be47
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/methods/set-value.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: setValue()
+title: Método setValue
+description: Puede obtener información sobre el método setValue en la documentación de la biblioteca JavaScript RichText de DHTMLX. Consulte guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# setValue()
+
+### Descripción {#description}
+
+@short: Aplica un nuevo valor a RichText
+
+### Uso {#usage}
+
+~~~jsx {}
+setValue: (value: string, encoder?: any): void;
+~~~
+
+### Parámetros {#parameters}
+
+- `value` - (obligatorio) un valor a insertar en RichText
+- `encoder` - (opcional) un analizador personalizado usado para codificar el contenido de RichText en un formato personalizado. Los siguientes formatos están disponibles: `html` (predeterminado) y `text`
+
+Puede obtener el encoder requerido de la siguiente manera:
+
+```jsx
+const fromTextEncoder = richtext.text.fromText; // encoder de texto
+const fromHTMLEncoder = richtext.html.fromHTML; // encoder html
+```
+
+### Ejemplo {#example}
+
+~~~jsx {7-8}
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+
+const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
+
+const fromTextEncoder = richtext.text.fromText;
+editor.setValue(editor_value, fromTextEncoder);
+~~~
+
+**Historial de cambios:** El método fue actualizado en v2.0. El parámetro `mode` fue eliminado. El parámetro `encoder` fue añadido
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
new file mode 100644
index 0000000..26ec65b
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Métodos del Event Bus
+title: Métodos del Event Bus
+description: Puede consultar la descripción general de los métodos del Event Bus interno de JavaScript RichText en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Métodos del Event Bus {#event-bus-methods}
+
+Esta página proporciona una lista de métodos relacionados con el Event Bus interno utilizado por el editor DHTMLX RichText.
+Estos métodos están diseñados para integraciones avanzadas y comportamiento personalizado basado en el sistema de eventos interno.
+
+| Nombre                                            | Descripción                                  |
+| ------------------------------------------------- | -------------------------------------------- |
+| [](api/internal/detach.md)                         | @getshort(api/internal/detach.md)             |
+| [](api/internal/exec.md)                           | @getshort(api/internal/exec.md)               |
+| [](api/internal/intercept.md)                      | @getshort(api/internal/intercept.md)          |
+| [](api/internal/on.md)                             | @getshort(api/internal/on.md)                 |
+| [](api/internal/set-next.md)                       | @getshort(api/internal/set-next.md)           |
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
new file mode 100644
index 0000000..2ed5244
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: Descripción general de eventos
+title: Descripción general de eventos
+description: Puede consultar la descripción general de los eventos de JavaScript RichText en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Descripción general de eventos {#events-overview}
+
+Esta página lista todos los eventos emitidos por el editor DHTMLX RichText.
+Puede usar estos eventos para extender la funcionalidad, rastrear la interacción del usuario o activar comportamiento personalizado.
+
+| Nombre                                                 | Descripción                                   |
+| ------------------------------------------------------ | --------------------------------------------- |
+| [](api/events/align.md)                                 | @getshort(api/events/align.md)                 |
+| [](api/events/clear-text-format.md)                     | @getshort(api/events/clear-text-format.md)     |
+| [](api/events/copy.md)                                  | @getshort(api/events/copy.md)                  |
+| [](api/events/create-new.md)                            | @getshort(api/events/create-new.md)            |
+| [](api/events/cut.md)                                   | @getshort(api/events/cut.md)                   |
+| [](api/events/delete-link.md)                           | @getshort(api/events/delete-link.md)           |
+| [](api/events/export.md)                                | @getshort(api/events/export.md)                |
+| [](api/events/import.md)                                | @getshort(api/events/import.md)                |
+| [](api/events/indent.md)                                | @getshort(api/events/indent.md)                |
+| [](api/events/insert-image.md)                          | @getshort(api/events/insert-image.md)          |
+| [](api/events/insert-line.md)                           | @getshort(api/events/insert-line.md)           |
+| [](api/events/insert-link.md)                           | @getshort(api/events/insert-link.md)           |
+| [](api/events/insert-list.md)                           | @getshort(api/events/insert-list.md)           |
+| [](api/events/outdent.md)                               | @getshort(api/events/outdent.md)               |
+| [](api/events/paste.md)                                 | @getshort(api/events/paste.md)                 |
+| [](api/events/print.md)                                 | @getshort(api/events/print.md)                 |
+| [](api/events/redo.md)                                  | @getshort(api/events/redo.md)                  |
+| [](api/events/resize-image.md)                          | @getshort(api/events/resize-image.md)          |
+| [](api/events/set-font-family.md)                       | @getshort(api/events/set-font-family.md)       |
+| [](api/events/set-font-size.md)                         | @getshort(api/events/set-font-size.md)         |
+| [](api/events/set-line-height.md)                       | @getshort(api/events/set-line-height.md)       |
+| [](api/events/set-text-color.md)                        | @getshort(api/events/set-text-color.md)        |
+| [](api/events/set-text-format.md)                       | @getshort(api/events/set-text-format.md)       |
+| [](api/events/set-text-style.md)                        | @getshort(api/events/set-text-style.md)        |
+| [](api/events/show-popup.md)                            | @getshort(api/events/show-popup.md)            |
+| [](api/events/subscript.md)                             | @getshort(api/events/subscript.md)             |
+| [](api/events/superscript.md)                           | @getshort(api/events/superscript.md)           |
+| [](api/events/toggle-fullscreen-mode.md)                | @getshort(api/events/toggle-fullscreen-mode.md)|
+| [](api/events/toggle-layout-mode.md)                    | @getshort(api/events/toggle-layout-mode.md)    |
+| [](api/events/toggle-shortcut-info.md)                  | @getshort(api/events/toggle-shortcut-info.md)  |
+| [](api/events/undo.md)                                  | @getshort(api/events/undo.md)                  |
+| [](api/events/update-link.md)                           | @getshort(api/events/update-link.md)           |
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
new file mode 100644
index 0000000..dd564aa
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
@@ -0,0 +1,97 @@
+---
+sidebar_label: Descripción general de la API
+title: Descripción general de la API
+description: Puede consultar la descripción general de la API de JavaScript RichText en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Descripción general de la API {#api-overview}
+
+## Constructor de RichText {#richtext-constructor}
+
+~~~js
+new richtext.RichText("#root", {
+    // configuration parameters
+});
+~~~
+
+**Parámetros**:
+
+- un contenedor HTML (por ejemplo, selector CSS o elemento DOM)
+- un objeto de configuración ([ver propiedades](api/overview/properties_overview.md))
+
+## Métodos de RichText {#richtext-methods}
+
+| Nombre                                        | Descripción                               |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/methods/get-value.md)                   | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                   | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                  | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                  | @getshort(api/methods/set-locale.md)       |
+| [](api/methods/destructor.md)                  | @getshort(api/methods/destructor.md)       |
+
+## Métodos del Event Bus {#event-bus-methods}
+
+| Nombre                                        | Descripción                               |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/exec.md)                       | @getshort(api/internal/exec.md)            |
+| [](api/internal/intercept.md)                  | @getshort(api/internal/intercept.md)       |
+| [](api/internal/on.md)                         | @getshort(api/internal/on.md)              |
+| [](api/internal/detach.md)                     | @getshort(api/internal/detach.md)          |
+| [](api/internal/set-next.md)                   | @getshort(api/internal/set-next.md)        |
+
+## Métodos de estado {#state-methods}
+
+| Nombre                                        | Descripción                               |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/get-state.md)                  | @getshort(api/internal/get-state.md)       |
+| [](api/internal/get-reactive-state.md)         | @getshort(api/internal/get-reactive-state.md) |
+
+## Eventos {#events}
+
+| Nombre                                         | Descripción                               |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/events/align.md)                        | @getshort(api/events/align.md)             |
+| [](api/events/clear-text-format.md)            | @getshort(api/events/clear-text-format.md) |
+| [](api/events/copy.md)                         | @getshort(api/events/copy.md)              |
+| [](api/events/create-new.md)                   | @getshort(api/events/create-new.md)        |
+| [](api/events/cut.md)                          | @getshort(api/events/cut.md)               |
+| [](api/events/delete-link.md)                  | @getshort(api/events/delete-link.md)       |
+| [](api/events/export.md)                       | @getshort(api/events/export.md)            |
+| [](api/events/import.md)                       | @getshort(api/events/import.md)            |
+| [](api/events/indent.md)                       | @getshort(api/events/indent.md)            |
+| [](api/events/insert-image.md)                 | @getshort(api/events/insert-image.md)      |
+| [](api/events/insert-line.md)                  | @getshort(api/events/insert-line.md)       |
+| [](api/events/insert-link.md)                  | @getshort(api/events/insert-link.md)       |
+| [](api/events/insert-list.md)                  | @getshort(api/events/insert-list.md)       |
+| [](api/events/outdent.md)                      | @getshort(api/events/outdent.md)           |
+| [](api/events/paste.md)                        | @getshort(api/events/paste.md)             |
+| [](api/events/print.md)                        | @getshort(api/events/print.md)             |
+| [](api/events/redo.md)                         | @getshort(api/events/redo.md)              |
+| [](api/events/resize-image.md)                 | @getshort(api/events/resize-image.md)      |
+| [](api/events/set-font-family.md)              | @getshort(api/events/set-font-family.md)   |
+| [](api/events/set-font-size.md)                | @getshort(api/events/set-font-size.md)     |
+| [](api/events/set-line-height.md)              | @getshort(api/events/set-line-height.md)   |
+| [](api/events/set-text-color.md)               | @getshort(api/events/set-text-color.md)    |
+| [](api/events/set-text-format.md)              | @getshort(api/events/set-text-format.md)   |
+| [](api/events/set-text-style.md)               | @getshort(api/events/set-text-style.md)    |
+| [](api/events/show-popup.md)                   | @getshort(api/events/show-popup.md)        |
+| [](api/events/subscript.md)                    | @getshort(api/events/subscript.md)         |
+| [](api/events/superscript.md)                  | @getshort(api/events/superscript.md)       |
+| [](api/events/toggle-fullscreen-mode.md)       | @getshort(api/events/toggle-fullscreen-mode.md) |
+| [](api/events/toggle-layout-mode.md)           | @getshort(api/events/toggle-layout-mode.md) |
+| [](api/events/toggle-shortcut-info.md)         | @getshort(api/events/toggle-shortcut-info.md) |
+| [](api/events/undo.md)                         | @getshort(api/events/undo.md)              |
+| [](api/events/update-link.md)                  | @getshort(api/events/update-link.md)       |
+
+## Propiedades {#properties}
+
+| Nombre                                        | Descripción                               |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/config/default-styles.md)               | @getshort(api/config/default-styles.md)    |
+| [](api/config/fullscreen-mode.md)              | @getshort(api/config/fullscreen-mode.md)   |
+| [](api/config/image-upload-url.md)             | @getshort(api/config/image-upload-url.md)  |
+| [](api/config/layout-mode.md)                  | @getshort(api/config/layout-mode.md)       |
+| [](api/config/locale.md)                       | @getshort(api/config/locale.md)            |
+| [](api/config/menubar.md)                      | @getshort(api/config/menubar.md)           |
+| [](api/config/toolbar.md)                      | @getshort(api/config/toolbar.md)           |
+| [](api/config/value.md)                        | @getshort(api/config/value.md)             |
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
new file mode 100644
index 0000000..356f86a
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Descripción general de métodos
+title: Descripción general de métodos
+description: Puede consultar la descripción general de los métodos de JavaScript RichText en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Descripción general de métodos {#methods-overview}
+
+Esta página proporciona un resumen de los métodos principales disponibles en el editor DHTMLX RichText.
+Use esta referencia para navegar rápidamente a las descripciones detalladas de cada método, comprender su propósito y ver ejemplos de uso.
+
+| Nombre                                                 | Descripción                               |
+| ------------------------------------------------------ | ----------------------------------------- |
+| [](api/methods/destructor.md)                           | @getshort(api/methods/destructor.md)       |
+| [](api/methods/get-value.md)                            | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                            | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                           | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                           | @getshort(api/methods/set-locale.md)       |
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
new file mode 100644
index 0000000..9f61360
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: Descripción general de propiedades
+title: Descripción general de propiedades
+description: Puede consultar la descripción general de las propiedades de JavaScript RichText en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Descripción general de propiedades {#properties-overview}
+
+Esta página lista todas las propiedades de configuración que se pueden usar al inicializar el editor DHTMLX RichText.
+Permiten controlar el diseño, la barra de herramientas, el valor, la localización y otros aspectos del editor.
+
+| Nombre                                                  | Descripción                                  |
+| --------------------------------------------------------|----------------------------------------------|
+| [](api/config/default-styles.md)                         | @getshort(api/config/default-styles.md)       |
+| [](api/config/fullscreen-mode.md)                        | @getshort(api/config/fullscreen-mode.md)      |
+| [](api/config/image-upload-url.md)                       | @getshort(api/config/image-upload-url.md)     |
+| [](api/config/layout-mode.md)                            | @getshort(api/config/layout-mode.md)          |
+| [](api/config/locale.md)                                 | @getshort(api/config/locale.md)               |
+| [](api/config/menubar.md)                                | @getshort(api/config/menubar.md)              |
+| [](api/config/toolbar.md)                                | @getshort(api/config/toolbar.md)              |
+| [](api/config/value.md)                                  | @getshort(api/config/value.md)                |
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
new file mode 100644
index 0000000..a7a890d
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
@@ -0,0 +1,15 @@
+---
+sidebar_label: Métodos de estado
+title: Métodos de estado
+description: Puede consultar la descripción general de los métodos de estado interno de JavaScript RichText en la documentación de la biblioteca DHTMLX JavaScript RichText. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Métodos de estado {#state-methods}
+
+Esta página lista los métodos para acceder y trabajar con el estado interno del editor DHTMLX RichText.
+Estos métodos son útiles para depuración, integración con sistemas reactivos o implementación de lógica personalizada avanzada.
+
+| Nombre                                                      | Descripción                                      |
+| ----------------------------------------------------------- | ------------------------------------------------ |
+| [](api/internal/get-reactive-state.md)                       | @getshort(api/internal/get-reactive-state.md)     |
+| [](api/internal/get-state.md)                                | @getshort(api/internal/get-state.md)              |
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png
new file mode 100644
index 0000000..baeb296
Binary files /dev/null and b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png differ
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png
new file mode 100644
index 0000000..bf4312c
Binary files /dev/null and b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png differ
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/editor.png b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/editor.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/editor.png differ
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png differ
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png
new file mode 100644
index 0000000..e6d70b9
Binary files /dev/null and b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png differ
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png
new file mode 100644
index 0000000..8b207e6
Binary files /dev/null and b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png differ
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png
new file mode 100644
index 0000000..c62be84
Binary files /dev/null and b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png differ
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png
new file mode 100644
index 0000000..07410f7
Binary files /dev/null and b/i18n/es/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png differ
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/assets/trial_richtext.png b/i18n/es/docusaurus-plugin-content-docs/current/assets/trial_richtext.png
new file mode 100644
index 0000000..cdee98c
Binary files /dev/null and b/i18n/es/docusaurus-plugin-content-docs/current/assets/trial_richtext.png differ
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/es/docusaurus-plugin-content-docs/current/guides/configuration.md
new file mode 100644
index 0000000..03aae09
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/guides/configuration.md
@@ -0,0 +1,283 @@
+---
+sidebar_label: Configuración
+title: Configuración
+description: Puede consultar información sobre la configuración en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Configuración
+
+Puede configurar la apariencia y la funcionalidad de RichText mediante la API correspondiente. Los parámetros disponibles le permiten:
+
+- Mostrar/ocultar el **menubar** usando la propiedad [`menubar`](api/config/menubar.md)
+- Configurar el **toolbar** usando la propiedad [`toolbar`](api/config/toolbar.md)
+- Habilitar el **modo de pantalla completa** usando la propiedad [`fullscreenMode`](api/config/fullscreen-mode.md)
+- Alternar el **layout** entre los modos "classic" y "document" usando la propiedad [`layoutMode`](api/config/layout-mode.md)
+- Especificar el **valor inicial** usando la propiedad [`value`](api/config/value.md)
+- Especificar el **locale inicial** usando la propiedad [`locale`](api/config/locale.md)
+- Aplicar **estilos iniciales** usando la propiedad [`defaultStyles`](api/config/default-styles.md)
+
+## Modos de layout {#layout-modes}
+
+Existen dos modos de layout del editor RichText entre los que puede elegir para obtener el mejor espacio de trabajo al crear su contenido:
+
+- **"classic"**
+
+<div className="img_border">
+![Modo Classic](./../assets/richtext/classic_mode.png)
+</div>
+
+- **"document"**
+
+<div className="img_border">
+![Modo Document](./../assets/richtext/document_mode.png)
+</div>
+
+Para especificar el modo deseado, debe definirlo en la propiedad [`layoutMode`](api/config/layout-mode.md) del objeto de configuración de RichText durante la inicialización del componente:
+
+~~~jsx
+const editor = new richtext.Richtext("#root", {
+    layoutMode: "document"
+});
+~~~
+
+## Toolbar {#toolbar}
+
+El toolbar de RichText consta de varios bloques de controles que pueden modificarse según sus necesidades.
+
+### Controles predeterminados del toolbar {#default-toolbar-controls}
+
+Puede especificar los siguientes botones y controles en el toolbar de RichText:
+
+| Botón               | Descripción                                                                 |
+|---------------------|-----------------------------------------------------------------------------|
+| `undo`              | Revierte la acción más reciente del usuario                                 |
+| `redo`              | Vuelve a aplicar la acción deshecha anteriormente                           |
+| `style`             | Permite seleccionar estilos de texto (por ejemplo, encabezados, párrafo, etc.) |
+| `font-family`       | Cambia la fuente del texto seleccionado                                     |
+| `font-size`         | Ajusta el tamaño del texto seleccionado                                     |
+| `bold`              | Aplica formato en negrita al texto seleccionado                             |
+| `italic`            | Aplica formato en cursiva al texto seleccionado                             |
+| `underline`         | Subraya el texto seleccionado                                               |
+| `strike`            | Aplica formato de tachado                                                   |
+| `subscript`         | Formatea el texto como subíndice                                            |
+| `superscript`       | Formatea el texto como superíndice                                          |
+| `text-color`        | Cambia el color del texto                                                   |
+| `background-color`  | Cambia el color de fondo (resaltado) del texto                              |
+| `align`             | Establece la alineación del texto (izquierda, centro, derecha, justificado) |
+| `indent`            | Aumenta la sangría del párrafo                                              |
+| `outdent`           | Reduce la sangría del párrafo                                               |
+| `line-height`       | Ajusta el interlineado (altura de línea)                                    |
+| `quote`             | Formatea el texto como cita en bloque                                       |
+| `bulleted-list`     | Crea una lista con viñetas                                                  |
+| `numbered-list`     | Crea una lista numerada                                                     |
+| `link`              | Inserta o edita un hipervínculo                                             |
+| `image`             | Inserta una imagen                                                          |
+| `line`              | Inserta una línea horizontal                                                |
+| `clear`             | Elimina todo el formato del texto seleccionado                              |
+| `print`             | Abre el cuadro de diálogo de impresión                                      |
+| `fullscreen`        | Activa o desactiva el modo de pantalla completa                             |
+| `mode`              | Alterna entre 2 modos de vista: Classic/Document                            |
+| `shortcuts`         | Muestra una lista de los atajos de teclado disponibles                      |
+| `separator`         | Agrega un separador visual entre los controles                              |
+
+La estructura del toolbar se define mediante la propiedad [`toolbar`](api/config/toolbar.md), que es un array con cadenas que representan los nombres de los controles.
+
+~~~jsx {2-36}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo",
+        "redo",
+        "separator",
+        "style",
+        "separator",
+        "font-family",
+        "font-size",
+        "separator",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "separator",
+        "text-color",
+        "background-color",
+        "separator",
+        "align",
+        "line-height",
+        "outdent",
+        "indent",
+        "separator",
+        "bulleted-list",
+        "numbered-list",
+        "quote",
+        "separator",
+        "link",
+        "image",
+        "separator",
+        "clear",
+        "separator",
+        "fullscreen",
+        "mode"
+        // otros botones
+    ],
+    // otras propiedades de configuración
+});
+~~~
+
+**Ejemplo relacionado:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### Controles personalizados del toolbar {#custom-toolbar-controls}
+
+También puede especificar controles personalizados como objetos en la propiedad [`toolbar`](api/config/toolbar.md) con los siguientes parámetros:
+
+- `type` - (requerido) especifica el tipo de control personalizado. Los tipos disponibles son: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` - (opcional) un ID de control personalizado (no puede coincidir con un ID de control existente)
+- `label` - (opcional) una etiqueta para el botón (se combina con el ícono)
+- `tooltip` - (opcional) un tooltip que se muestra al pasar el cursor (si no se especifica, usa el valor de "label")
+- `css` - (opcional) un nombre de clase CSS asignado al control (clases admitidas por defecto: wx-primary, wx-secondary)
+- `handler` - (opcional) una función de callback que se ejecuta cuando se hace clic en el botón
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // botones (las cadenas representan solo botones)
+        "bold",
+        "italic",
+        // botones predefinidos (el usuario no puede definir otras opciones para estos (sin etiquetas, tooltips, opciones, etc.), por lo que solo ({ type: "button", id: string })
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // el usuario debe especificar el tipo correcto si desea usar un control predefinido (por ejemplo, richselect/colorpicker)
+        // los tipos que no coincidan serán ignorados (no se agregarán al toolbar)
+        {
+            type: "richselect", // type: "button" - incorrecto, será ignorado
+            id: "mode",
+        },
+        // botones personalizados (las opciones admitidas se muestran a continuación)
+        // el usuario solo puede definir botones personalizados (sin soporte de richselect/colorpicker por ahora)
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* lógica personalizada */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* lógica personalizada */}
+        }
+    ],
+    // otras propiedades de configuración
+});
+~~~
+
+**Ejemplo relacionado:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### Ocultar el toolbar {#hide-toolbar}
+
+Si necesita ocultar el toolbar, establezca la propiedad [`toolbar`](api/config/toolbar.md) en `false` de la siguiente manera:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false,
+    // otras propiedades de configuración
+});
+~~~
+
+## Estilos predeterminados {#default-styles}
+
+Puede aplicar valores de estilo predeterminados para tipos de bloque específicos en el editor usando la propiedad [`defaultStyles`](api/config/default-styles.md).
+
+~~~jsx {}
+defaultStyles?: boolean | {
+    "*"?: { // afecta a todos los bloques, permitiéndole establecer propiedades comunes para todos ellos
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+La propiedad `defaultStyles` NO establece el CSS real en los bloques afectados. Los estilos CSS deben aplicarse por separado:
+
+```html title="index.html"
+<div id="root"></div>
+```
+
+```jsx {2-9} title="index.js"
+const editor = new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+#root h2 {
+    font-family: Roboto;
+    font-size: 28px;
+    color: purple;
+    background: #FFC0CB;
+}
+```
+
+En este ejemplo, a todos los bloques `h2` se les asigna la familia de fuente `"Roboto"` con un tamaño de fuente de 28px y también se cambian los colores de primer plano y de fondo. Los estilos CSS también se aplican a los bloques `h2`.
+
+**Ejemplo relacionado:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/es/docusaurus-plugin-content-docs/current/guides/initialization.md
new file mode 100644
index 0000000..3fb4278
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/guides/initialization.md
@@ -0,0 +1,63 @@
+---
+sidebar_label: Inicialización
+title: Inicialización
+description: Puede consultar información sobre la inicialización en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Inicialización
+
+Esta guía le brindará instrucciones detalladas sobre cómo crear RichText en una página para enriquecer su aplicación con las funciones del editor RichText. Siga los pasos a continuación para obtener un componente listo para usar:
+
+1. [Incluir los archivos fuente de RichText en la página](#including-source-files).
+2. [Crear un contenedor para RichText](#creating-container).
+3. [Inicializar RichText con el constructor del objeto](#initializing-richtext).
+
+## Incluir los archivos fuente {#including-source-files}
+
+[Descargue el paquete](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) y descomprímalo en una carpeta de su proyecto.
+
+Para crear RichText, debe incluir 2 archivos fuente en su página:
+
+- *richtext.js*
+- *richtext.css*
+
+Asegúrese de establecer rutas relativas correctas hacia los archivos fuente:
+
+~~~html title="index.html"
+<script type="text/javascript" src="./codebase/richtext.js"></script>
+<link rel="stylesheet" href="./codebase/richtext.css">
+~~~
+
+## Crear el contenedor {#creating-container}
+
+Agregue un contenedor para RichText y asígnele un ID, por ejemplo *"root"*:
+
+~~~jsx title="index.html"
+<div id="root"></div>
+~~~
+
+## Inicializar RichText {#initializing-richtext}
+
+Inicialice RichText con el constructor `richtext.Richtext`. El constructor acepta dos parámetros:
+
+- un contenedor HTML (el ID del contenedor HTML)
+- un objeto con propiedades de configuración. [Consulte la lista completa aquí](#configuration-properties)
+
+~~~jsx title="index.html"
+// crear RichText
+const editor = new richtext.Richtext("#root", {
+    // propiedades de configuración
+});
+~~~
+
+### Propiedades de configuración {#configuration-properties}
+
+:::note[Nota]
+La lista completa de propiedades para configurar **RichText** se encuentra [**aquí**](api/overview/properties_overview.md).
+:::
+
+## Ejemplo {#example}
+
+En este snippet puede ver cómo inicializar **RichText** con datos iniciales:
+
+<iframe src="https://snippet.dhtmlx.com/tjryzka7?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
new file mode 100644
index 0000000..f30ea67
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
@@ -0,0 +1,300 @@
+---
+sidebar_label: Integración con Angular
+title: Integración con Angular
+description: Puede consultar información sobre la integración con Angular en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Integración con Angular
+
+:::tip[Consejo]
+Debe estar familiarizado con los conceptos básicos y los patrones de **Angular** antes de leer esta documentación. Para refrescar sus conocimientos, consulte la [**documentación de Angular**](https://v17.angular.io/docs).
+:::
+
+DHTMLX RichText es compatible con **Angular**. Hemos preparado ejemplos de código sobre cómo usar DHTMLX RichText con **Angular**. Para más información, consulte el correspondiente [**ejemplo en GitHub**](https://github.com/DHTMLX/angular-richtext-demo).
+
+## Crear un proyecto {#creating-a-project}
+
+:::info[Información]
+Antes de comenzar a crear un nuevo proyecto, instale [**Angular CLI**](https://v17.angular.io/cli) y [**Node.js**](https://nodejs.org/en/).
+:::
+
+Cree un nuevo proyecto **my-angular-richtext-app** usando Angular CLI. Ejecute el siguiente comando para este fin:
+
+~~~json
+ng new my-angular-richtext-app
+~~~
+
+:::note[Nota]
+Si desea seguir esta guía, ¡deshabilite Server-Side Rendering (SSR) y Static Site Generation (SSG/Prerendering) al crear la nueva aplicación Angular!
+:::
+
+El comando anterior instala todas las herramientas necesarias, por lo que no necesita ejecutar comandos adicionales.
+
+### Instalación de dependencias {#installation-of-dependencies}
+
+Vaya a la carpeta de la aplicación recién creada:
+
+~~~json
+cd my-angular-richtext-app
+~~~
+
+Instale las dependencias e inicie el dev server. Para ello, use el gestor de paquetes [**yarn**](https://yarnpkg.com/):
+
+~~~json
+yarn
+yarn start
+~~~
+
+La aplicación debería ejecutarse en localhost (por ejemplo, `http://localhost:3000`).
+
+## Crear RichText {#creating-richtext}
+
+Ahora debe obtener el código fuente de DHTMLX RichText. En primer lugar, detenga la aplicación y proceda con la instalación del paquete RichText.
+
+### Paso 1. Instalación del paquete {#step-1-package-installation}
+
+Descargue el [**paquete de prueba de RichText**](/how_to_start/#installing-richtext-via-npm-or-yarn) y siga los pasos indicados en el archivo README. Tenga en cuenta que el RichText de prueba está disponible solo por 30 días.
+
+### Paso 2. Creación del componente {#step-2-component-creation}
+
+Ahora debe crear un componente Angular para agregar RichText a la aplicación. Cree la carpeta **richtext** en el directorio **src/app/**, agréguele un nuevo archivo y nómbrelo **richtext.component.ts**.
+
+#### Importar los archivos fuente {#import-source-files}
+
+Abra el archivo **richtext.component.ts** e importe los archivos fuente de RichText. Tenga en cuenta que:
+
+- si usa la versión PRO e instala el paquete RichText desde una carpeta local, la ruta de importación tiene el siguiente aspecto:
+
+~~~jsx
+import { Richtext} from 'dhx-richtext-package';
+~~~
+
+- si usa la versión de prueba de RichText, especifique la siguiente ruta:
+
+~~~jsx
+import { Richtext} from '@dhx/trial-richtext';
+~~~
+
+En este tutorial puede ver cómo configurar la versión de **prueba** de RichText.
+
+#### Establecer los contenedores e inicializar Richtext {#set-containers-and-initialize-the-richtext}
+
+Para mostrar RichText en la página, debe establecer un contenedor para RichText e inicializar el componente usando el constructor correspondiente:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext", // nombre de plantilla usado en el archivo "app.component.ts" como <richtext />
+    styleUrls: ["./richtext.component.css"], // incluir el archivo css
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    // inicializar el contenedor para RichText
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: Richtext;
+
+    ngOnInit() {
+        // inicializar el componente RichText
+        this._editor = new Richtext(this.richtext_container.nativeElement, {});
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor(); // destruir RichText
+    }
+}
+~~~
+
+#### Agregar estilos {#adding-styles}
+
+Para mostrar RichText correctamente, debe proporcionar los estilos correspondientes. Para ello, puede crear el archivo **richtext.component.css** en el directorio **src/app/richtext/** y especificar los estilos importantes para RichText y su contenedor:
+
+~~~css title="richtext.component.css"
+/* importar los estilos de RichText */
+@import "@dhx/trial-richtext/dist/richtext.css";
+
+/* especificar estilos para la página inicial */
+html,
+body{
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* especificar estilos para el contenedor de RichText */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* especificar estilos para el widget de RichText */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### Cargar datos {#loading-data}
+
+Para agregar datos a RichText, debe proporcionar un conjunto de datos. Puede crear el archivo **data.ts** en el directorio **src/app/richtext/** y agregar algunos datos en él:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Luego abra el archivo ***richtext.component.ts***. Importe el archivo con datos y especifique las propiedades de datos correspondientes en el objeto de configuración de RichText dentro del método `ngOnInit()`, como se muestra a continuación:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // importar datos
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // inicializar la propiedad de datos
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            value
+            // otras propiedades de configuración
+        });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+También puede usar el método [`setValue()`](api/methods/set-value.md) dentro del método `ngOnInit()` de Angular para cargar datos en RichText.
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // importar datos
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // inicializar la propiedad de datos
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            // otras propiedades de configuración
+        });
+
+        // aplicar los datos mediante el método setValue()
+        this._editor.setValue({ value });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+Ahora el componente RichText está listo para usarse. Cuando el elemento se agregue a la página, inicializará RichText con los datos. También puede proporcionar los ajustes de configuración necesarios. Visite nuestra [documentación de la API de RichText](api/overview/main_overview.md) para consultar la lista completa de propiedades disponibles.
+
+#### Gestionar eventos {#handling-events}
+
+Cuando un usuario realiza alguna acción en RichText, se invoca un evento. Puede usar estos eventos para detectar la acción y ejecutar el código deseado. Consulte la [lista completa de eventos](api/overview/events_overview.md).
+
+Abra el archivo **richtext.component.ts** y complete el método `ngOnInit()` de la siguiente manera:
+
+~~~jsx {} title="richtext.component.ts"
+// ...
+ngOnInit() {
+    this._editor = new Richtext(this.richtext_container.nativeElement, {});
+
+    this._editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+}
+
+ngOnDestroy(): void {
+    this._editor.destructor();
+}
+~~~
+
+### Paso 3. Agregar RichText a la aplicación {#step-3-adding-richtext-into-the-app}
+
+Para agregar el componente ***RichTextComponent*** a su aplicación, abra el archivo ***src/app/app.component.ts*** y reemplace el código predeterminado con el siguiente:
+
+~~~jsx {} title="app.component.ts"
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "app-root",
+    template: `<richtext/>`
+})
+export class AppComponent {
+    name = "";
+}
+~~~
+
+Luego cree el archivo ***app.module.ts*** en el directorio ***src/app/*** y especifique el *RichTextComponent* como se muestra a continuación:
+
+~~~jsx {} title="app.module.ts"
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from "./app.component";
+import { RichTextComponent } from "./richtext/richtext.component";
+
+@NgModule({
+    declarations: [AppComponent, RichTextComponent],
+    imports: [BrowserModule],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}
+~~~
+
+El último paso es abrir el archivo ***src/main.ts*** y reemplazar el código existente con el siguiente:
+
+~~~jsx title="main.ts"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
+platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch((err) => console.error(err));
+~~~
+
+Después de eso, puede iniciar la aplicación para ver RichText cargado con datos en la página.
+
+<div className="img_border">
+![Inicialización de RichText](../assets/trial_richtext.png)
+</div>
+
+Ahora sabe cómo integrar DHTMLX RichText con Angular. Puede personalizar el código según sus necesidades específicas. El ejemplo avanzado final lo puede encontrar en [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo).
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
new file mode 100644
index 0000000..fada358
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
@@ -0,0 +1,253 @@
+---
+sidebar_label: Integración con React
+title: Integración con React
+description: Puede consultar información sobre la integración con React en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Integración con React
+
+:::tip[Consejo]
+Debe estar familiarizado con los conceptos básicos y los patrones de [**React**](https://react.dev) antes de leer esta documentación. Para refrescar sus conocimientos, consulte la [**documentación de React**](https://react.dev/learn).
+:::
+
+DHTMLX RichText es compatible con **React**. Hemos preparado ejemplos de código sobre cómo usar DHTMLX RichText con **React**. Para más información, consulte el correspondiente [**ejemplo en GitHub**](https://github.com/DHTMLX/react-richtext-demo).
+
+## Crear un proyecto {#creating-a-project}
+
+:::info[Información]
+Antes de comenzar a crear un nuevo proyecto, instale [**Vite**](https://vite.dev/) (opcional) y [**Node.js**](https://nodejs.org/en/).
+:::
+
+Puede crear un proyecto básico de **React** o usar **React con Vite**. Nombremos el proyecto **my-react-richtext-app**:
+
+~~~json
+npx create-react-app my-react-richtext-app
+~~~
+
+### Instalación de dependencias {#installation-of-dependencies}
+
+Vaya a la carpeta de la aplicación recién creada:
+
+~~~json
+cd my-react-richtext-app
+~~~
+
+Instale las dependencias e inicie el dev server. Para ello, use un gestor de paquetes:
+
+- si usa [**yarn**](https://yarnpkg.com/), ejecute los siguientes comandos:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- si usa [**npm**](https://www.npmjs.com/), ejecute los siguientes comandos:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+La aplicación debería ejecutarse en localhost (por ejemplo, `http://localhost:3000`).
+
+## Crear RichText {#creating-richtext}
+
+Ahora debe obtener el código fuente de DHTMLX RichText. En primer lugar, detenga la aplicación y proceda con la instalación del paquete RichText.
+
+### Paso 1. Instalación del paquete {#step-1-package-installation}
+
+Descargue el [**paquete de prueba de RichText**](/how_to_start/#installing-richtext-via-npm-or-yarn) y siga los pasos indicados en el archivo README. Tenga en cuenta que el RichText de prueba está disponible solo por 30 días.
+
+### Paso 2. Creación del componente {#step-2-component-creation}
+
+Ahora debe crear un componente React para agregar RichText a la aplicación. Cree un nuevo archivo en el directorio ***src/*** y nómbrelo ***Richtext.jsx***.
+
+#### Importar los archivos fuente {#importing-source-files}
+
+Abra el archivo ***Richtext.jsx*** e importe los archivos fuente de RichText. Tenga en cuenta que:
+
+- si usa la versión PRO e instala el paquete RichText desde una carpeta local, las rutas de importación tienen el siguiente aspecto:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+~~~
+
+- si usa la versión de prueba de RichText, especifique las siguientes rutas:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from '@dhx/trial-richtext';
+import "@dhx/trial-richtext/dist/richtext.css";
+~~~
+
+En este tutorial puede ver cómo configurar la versión de **prueba** de RichText.
+
+#### Establecer los contenedores y agregar Richtext {#setting-containers-and-adding-richtext}
+
+Para mostrar RichText en la página, debe crear un contenedor para RichText e inicializar el componente usando los constructores correspondientes:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css'; // incluir los estilos de RichText
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef(); // inicializar el contenedor para RichText
+
+    useEffect(() => {
+        // inicializar el componente RichText
+        const editor = new Richtext(richtext_container.current, {});
+
+        return () => {
+            editor.destructor(); // destruir RichText
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+#### Agregar estilos {#adding-styles}
+
+Para mostrar RichText correctamente, debe especificar los estilos importantes para RichText y su contenedor en el archivo CSS principal del proyecto:
+
+~~~css title="index.css"
+/* especificar estilos para la página inicial */
+html,
+body,
+#root {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* especificar estilos para el contenedor de RichText */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* especificar estilos para el widget de RichText */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### Cargar datos {#loading-data}
+
+Para agregar datos a RichText, debe proporcionar un conjunto de datos. Puede crear el archivo ***data.js*** en el directorio ***src/*** y agregar algunos datos en él:
+
+~~~jsx {} title="data.js"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Luego abra el archivo ***App.js*** e importe los datos. Después de esto puede pasar los datos al nuevo componente `<RichText/>` creado como **props**:
+
+~~~jsx {2,5-6} title="App.js"
+import RichText from "./Richtext";
+import { getData } from "./data";
+
+function App() {
+    const { value } = getData();
+    return <RichText value={value} />;
+}
+
+export default App;
+~~~
+
+Vaya al archivo ***Richtext.jsx*** y aplique los **props** pasados al objeto de configuración de RichText:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            value: props.value, // aplicar el valor
+            // otras propiedades de configuración
+        });
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+También puede usar el método [`setValue()`](api/methods/set-value.md) dentro del método `useEffect()` de React para cargar datos en RichText:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    let value = props.value;
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            // propiedades de configuración
+        });
+
+        editor.setValue(value);
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+Ahora el componente RichText está listo. Cuando el elemento se agregue a la página, inicializará RichText con los datos. También puede proporcionar los ajustes de configuración necesarios. Visite nuestra [documentación de la API de RichText](api/overview/main_overview.md) para consultar la lista completa de propiedades disponibles.
+
+#### Gestionar eventos {#handling-events}
+
+Cuando un usuario realiza alguna acción en RichText, se invoca un evento. Puede usar estos eventos para detectar la acción y ejecutar el código deseado. Consulte la [lista completa de eventos](api/overview/events_overview.md).
+
+Abra ***Richtext.jsx*** y complete el método `useEffect()` de la siguiente manera:
+
+~~~jsx {} title="Richtext.jsx"
+// ...
+useEffect(() => {
+    const editor = new Richtext(richtext_container.current, {});
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+
+    return () => {
+        editor.destructor();
+    };
+}, []);
+// ...
+~~~
+
+Después de eso, puede iniciar la aplicación para ver RichText cargado con datos en la página.
+
+<div className="img_border">
+![Inicialización de RichText](../assets/trial_richtext.png)
+</div>
+
+Ahora sabe cómo integrar DHTMLX RichText con React. Puede personalizar el código según sus necesidades específicas. El ejemplo avanzado final lo puede encontrar en [**GitHub**](https://github.com/DHTMLX/react-richtext-demo).
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
new file mode 100644
index 0000000..68bb1a4
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
@@ -0,0 +1,263 @@
+---
+sidebar_label: Integración con Svelte
+title: Integración con Svelte
+description: Puede consultar información sobre la integración con Svelte en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Integración con Svelte
+
+:::tip[Consejo]
+Debe estar familiarizado con los conceptos básicos y los patrones de **Svelte** antes de leer esta documentación. Para refrescar sus conocimientos, consulte la [**documentación de Svelte**](https://svelte.dev/).
+:::
+
+DHTMLX RichText es compatible con **Svelte**. Hemos preparado ejemplos de código sobre cómo usar DHTMLX RichText con **Svelte**. Para más información, consulte el correspondiente [**ejemplo en GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).
+
+## Crear un proyecto {#creating-a-project}
+
+:::info[Información]
+Antes de comenzar a crear un nuevo proyecto, instale [**Vite**](https://vite.dev/) (opcional) y [**Node.js**](https://nodejs.org/en/).
+:::
+
+Existen varias formas de crear un proyecto **Svelte**:
+
+- puede usar [**SvelteKit**](https://kit.svelte.dev/)
+
+o
+
+- también puede usar **Svelte con Vite** (pero sin SvelteKit):
+
+~~~json
+npm create vite@latest
+~~~
+
+Consulte los detalles en el [artículo relacionado](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit).
+
+### Instalación de dependencias {#installation-of-dependencies}
+
+Nombremos el proyecto **my-svelte-richtext-app** y vayamos a la carpeta de la aplicación:
+
+~~~json
+cd my-svelte-richtext-app
+~~~
+
+Instale las dependencias e inicie el dev server. Para ello, use un gestor de paquetes:
+
+- si usa [**yarn**](https://yarnpkg.com/), ejecute los siguientes comandos:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- si usa [**npm**](https://www.npmjs.com/), ejecute los siguientes comandos:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+La aplicación debería ejecutarse en localhost (por ejemplo, `http://localhost:3000`).
+
+## Crear RichText {#creating-richtext}
+
+Ahora debe obtener el código fuente de DHTMLX RichText. En primer lugar, detenga la aplicación y proceda con la instalación del paquete RichText.
+
+### Paso 1. Instalación del paquete {#step-1-package-installation}
+
+Descargue el [**paquete de prueba de RichText**](/how_to_start/#installing-richtext-via-npm-or-yarn) y siga los pasos indicados en el archivo README. Tenga en cuenta que el RichText de prueba está disponible solo por 30 días.
+
+### Paso 2. Creación del componente {#step-2-component-creation}
+
+Ahora debe crear un componente Svelte para agregar RichText a la aplicación. Creemos un nuevo archivo en el directorio ***src/*** y nombremos ***Richtext.svelte***.
+
+#### Importar los archivos fuente {#importing-source-files}
+
+Abra el archivo ***Richtext.svelte*** e importe los archivos fuente de RichText. Tenga en cuenta que:
+
+- si usa la versión PRO e instala el paquete RichText desde una carpeta local, las rutas de importación tienen el siguiente aspecto:
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- si usa la versión de prueba de RichText, especifique las siguientes rutas:
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+<script>
+~~~
+
+En este tutorial puede ver cómo configurar la versión de **prueba** de RichText.
+
+#### Establecer los contenedores y agregar RichText {#setting-containers-and-adding-richtext}
+
+Para mostrar RichText en la página, debe crear un contenedor para RichText e inicializar el componente usando el constructor correspondiente:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+let richtext_container; // inicializar el contenedor para RichText
+let editor;
+
+onMount(() => {
+    // inicializar el componente RichText
+    editor = new Richtext(richtext_container, {});
+});
+
+onDestroy(() => {
+    editor?.destructor(); // destruir RichText
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+#### Cargar datos {#loading-data}
+
+Para agregar datos a RichText, necesitamos proporcionar un conjunto de datos. Puede crear el archivo ***data.js*** en el directorio ***src/*** y agregar algunos datos en él:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Luego abra el archivo ***App.svelte***, importe los datos y páselos al nuevo componente `<RichText/>` creado como **props**:
+
+~~~html {} title="App.svelte"
+<script>
+import RichText from "./Richtext.svelte";
+import { getData } from "./data.js";
+
+const { value } = getData();
+</script>
+
+<RichText value={value} />
+~~~
+
+Vaya al archivo ***Richtext.svelte*** y aplique los **props** pasados al objeto de configuración de RichText:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        value
+        // otras propiedades de configuración
+    })
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+También puede usar el método [`setValue()`](/api/methods/set-value.md) dentro del método `onMount()` de Svelte para cargar datos en RichText:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value;
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        // otras propiedades de configuración
+    })
+
+    editor.setValue(value);
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+Ahora el componente RichText está listo para usarse. Cuando el elemento se agregue a la página, inicializará RichText con los datos. También puede proporcionar los ajustes de configuración necesarios. Visite nuestra [documentación de la API de RichText](api/overview/main_overview.md) para consultar la lista completa de propiedades disponibles.
+
+#### Gestionar eventos {#handling-events}
+
+Cuando un usuario realiza alguna acción en RichText, se invoca un evento. Puede usar estos eventos para detectar la acción y ejecutar el código deseado. Consulte la [lista completa de eventos](api/overview/events_overview.md).
+
+Abra ***Richtext.svelte*** y complete el método `onMount()` de la siguiente manera:
+
+~~~html {} title="Richtext.svelte"
+<script>
+// ...
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {})
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+});
+
+onDestroy(() => {
+    editor?.destructor();
+});
+</script>
+
+// ...
+~~~
+
+### Paso 3. Agregar RichText a la aplicación {#step-3-adding-richtext-into-the-app}
+
+Para agregar el componente a la aplicación, abra el archivo **App.svelte** y reemplace el código predeterminado con el siguiente:
+
+~~~html title="App.svelte"
+<script>
+    import RichText from "./Richtext.svelte";
+    import { getData } from "./data.js";
+
+    const { value } = getData();
+</script>
+
+<RichText value={value}  />
+~~~
+
+Después de eso, puede iniciar la aplicación para ver RichText cargado con datos en la página.
+
+<div className="img_border">
+![Inicialización de RichText](../assets/trial_richtext.png)
+</div>
+
+Ahora sabe cómo integrar DHTMLX RichText con Svelte. Puede personalizar el código según sus necesidades específicas. El ejemplo avanzado final lo puede encontrar en [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
new file mode 100644
index 0000000..8208a03
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
@@ -0,0 +1,279 @@
+---
+sidebar_label: Integración con Vue
+title: Integración con Vue
+description: Puede consultar información sobre la integración con Vue en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Integración con Vue
+
+:::tip[Consejo]
+Debe estar familiarizado con los conceptos básicos y los patrones de [**Vue**](https://vuejs.org/) antes de leer esta documentación. Para refrescar sus conocimientos, consulte la [**documentación de Vue 3**](https://vuejs.org/guide/introduction.html#getting-started).
+:::
+
+DHTMLX RichText es compatible con **Vue**. Hemos preparado ejemplos de código sobre cómo usar DHTMLX RichText con **Vue 3**. Para más información, consulte el correspondiente [**ejemplo en GitHub**](https://github.com/DHTMLX/vue-richtext-demo).
+
+## Crear un proyecto {#creating-a-project}
+
+:::info[Información]
+Antes de comenzar a crear un nuevo proyecto, instale [**Node.js**](https://nodejs.org/en/).
+:::
+
+Para crear un proyecto **Vue**, ejecute el siguiente comando:
+
+~~~json
+npm create vue@latest
+~~~
+
+Este comando instala y ejecuta `create-vue`, la herramienta oficial de scaffolding de proyectos **Vue**. Consulte los detalles en [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application).
+
+Nombremos el proyecto **my-vue-richtext-app**.
+
+### Instalación de dependencias {#installation-of-dependencies}
+
+Vaya a la carpeta de la aplicación:
+
+~~~json
+cd my-vue-richtext-app
+~~~
+
+Instale las dependencias e inicie el dev server. Para ello, use un gestor de paquetes:
+
+- si usa [**yarn**](https://yarnpkg.com/), ejecute los siguientes comandos:
+
+~~~jsx
+yarn
+yarn start // o yarn dev
+~~~
+
+- si usa [**npm**](https://www.npmjs.com/), ejecute los siguientes comandos:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+La aplicación debería ejecutarse en localhost (por ejemplo, `http://localhost:3000`).
+
+## Crear RichText {#creating-richtext}
+
+Ahora debe obtener el código fuente de DHTMLX RichText. En primer lugar, detenga la aplicación y proceda con la instalación del paquete RichText.
+
+### Paso 1. Instalación del paquete {#step-1-package-installation}
+
+Descargue el [**paquete de prueba de RichText**](/how_to_start/#installing-richtext-via-npm-or-yarn) y siga los pasos indicados en el archivo README. Tenga en cuenta que el RichText de prueba está disponible solo por 30 días.
+
+### Paso 2. Creación del componente {#step-2-component-creation}
+
+Ahora debe crear un componente Vue para agregar RichText a la aplicación. Cree un nuevo archivo en el directorio ***src/components/*** y nómbrelo ***Richtext.vue***.
+
+#### Importar los archivos fuente {#import-source-files}
+
+Abra el archivo ***Richtext.vue*** e importe los archivos fuente de RichText. Tenga en cuenta que:
+
+- si usa la versión PRO e instala el paquete RichText desde una carpeta local, las rutas de importación tienen el siguiente aspecto:
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- si usa la versión de prueba de RichText, especifique las siguientes rutas:
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+</script>
+~~~
+
+En este tutorial puede ver cómo configurar la versión de **prueba** de RichText.
+
+#### Establecer los contenedores y agregar Richtext {#setting-containers-and-adding-richtext}
+
+Para mostrar Richtext en la página, debe crear un contenedor para RichText e inicializar el componente usando el constructor correspondiente:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    mounted() {
+        // inicializar el componente RichText
+        this.editor = new Richtext(this.$refs.richtext_container, {});
+    },
+
+    unmounted() {
+        this.editor.destructor(); // destruir RichText
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+#### Agregar estilos {#adding-styles}
+
+Para mostrar RichText correctamente, debe especificar los estilos importantes para RichText y su contenedor en el archivo CSS principal del proyecto:
+
+~~~css title="main.css"
+/* especificar estilos para la página inicial */
+html,
+body,
+#app { /* asegúrese de usar el contenedor raíz #app */
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* especificar estilos para el contenedor de RichText */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* especificar estilos para el widget de RichText */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### Cargar datos {#loading-data}
+
+Para agregar datos a RichText, debe proporcionar un conjunto de datos. Puede crear el archivo ***data.js*** en el directorio ***src/*** y agregar algunos datos en él:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Luego abra el archivo ***App.vue***, importe los datos e inicialícelos mediante el método interno `data()`. Después de esto puede pasar los datos al nuevo componente `<RichText/>` creado como **props**:
+
+~~~html {} title="App.vue"
+<script>
+import RichText from "./components/Richtext.vue";
+import { getData } from "./data";
+
+export default {
+    components: { RichText },
+    data() {
+        const { value } = getData();
+        return { value };
+    }
+};
+</script>
+
+<template>
+    <RichText :value="value" />
+</template>
+~~~
+
+Vaya al archivo ***Richtext.vue*** y aplique los **props** pasados al objeto de configuración de RichText:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            value: this.value,
+            // otras propiedades de configuración
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+También puede usar el método [`setValue()`](api/methods/set-value.md) dentro del método `mounted()` de Vue para cargar datos en RichText:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            // otras propiedades de configuración
+        });
+
+        this.editor.setValue(this.value);
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+Ahora el componente RichText está listo para usarse. Cuando el elemento se agregue a la página, inicializará RichText con los datos. También puede proporcionar los ajustes de configuración necesarios. Visite nuestra [documentación de la API de RichText](api/overview/main_overview.md) para consultar la lista completa de propiedades disponibles.
+
+#### Gestionar eventos {#handling-events}
+
+Cuando un usuario realiza alguna acción en RichText, se invoca un evento. Puede usar estos eventos para detectar la acción y ejecutar el código deseado. Consulte la [lista completa de eventos](api/overview/events_overview.md).
+
+Abra ***Richtext.vue*** y complete el método `mounted()`:
+
+~~~html {} title="Richtext.vue"
+<script>
+// ...
+export default {
+    // ...
+    mounted() {
+        this.editor = new Richtext(this.$refs.cont, {});
+
+        this.editor.api.on("print", () => {
+            console.log("The document is printing");
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+}
+</script>
+
+// ...
+~~~
+
+Después de eso, puede iniciar la aplicación para ver RichText cargado con datos en la página.
+
+<div className="img_border">
+![Inicialización de RichText](../assets/trial_richtext.png)
+</div>
+
+Ahora sabe cómo integrar DHTMLX RichText con Vue. Puede personalizar el código según sus necesidades específicas. El ejemplo avanzado final lo puede encontrar en [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo).
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/es/docusaurus-plugin-content-docs/current/guides/localization.md
new file mode 100644
index 0000000..bf13f52
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/guides/localization.md
@@ -0,0 +1,474 @@
+---
+sidebar_label: Localización
+title: Localización
+description: Puede consultar información sobre la localización en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Localización
+
+Puede localizar todas las etiquetas de la interfaz de JavaScript RichText. Para ello, debe crear un nuevo locale o modificar uno integrado y aplicarlo a RichText.
+
+## Locale predeterminado {#default-locale}
+
+El locale **English** se usa de forma predeterminada:
+
+~~~jsx
+const en = {
+    richtext: {
+        // botones/acciones
+        Undo: "Undo",
+        Redo: "Redo",
+        Style: "Style",
+        "Font family": "Font family",
+        "Font size": "Font size",
+        Bold: "Bold",
+        Italic: "Italic",
+        Underline: "Underline",
+        Strikethrough: "Strikethrough",
+        Subscript: "Subscript",
+        Superscript: "Superscript",
+        "Text color": "Text color",
+        "Background color": "Background color",
+        "Left align": "Left align",
+        "Center align": "Center align",
+        "Right align": "Right align",
+        Justify: "Justify",
+        "Line height": "Line height",
+        Outdent: "Outdent",
+        Indent: "Indent",
+        "Insert link": "Insert link",
+        "Insert image": "Insert image",
+        "Insert horizontal line": "Insert horizontal line",
+        "Clear formatting": "Clear formatting",
+        Print: "Print",
+        "Fullscreen mode": "Fullscreen mode",
+        "Layout mode": "Layout mode",
+        "Classic mode": "Classic mode",
+        "Document mode": "Document mode",
+
+        // opciones exclusivas del menubar
+        File: "File",
+        Import: "Import",
+        Export: "Export",
+        Edit: "Edit",
+        Cut: "Cut",
+        Copy: "Copy",
+        Paste: "Paste",
+        View: "View",
+        Insert: "Insert",
+        Format: "Format",
+        Help: "Help",
+        New: "New",
+        Link: "Link",
+        Image: "Image",
+        "Horizontal line": "Horizontal line",
+        Text: "Text",
+        "Heading 1": "Heading 1",
+        "Heading 2": "Heading 2",
+        "Heading 3": "Heading 3",
+        "Heading 4": "Heading 4",
+        "Heading 5": "Heading 5",
+        "Heading 6": "Heading 6",
+        Align: "Align",
+        Left: "Left",
+        Center: "Center",
+        Right: "Right",
+        Justified: "Justified",
+        "Keyboard shortcuts": "Keyboard shortcuts",
+
+        // portapapeles
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation failed. Please check your browser's clipboard permissions.",
+
+        // menú desplegable de estilo de bloque
+        Heading: "Heading",
+        Quote: "Quote",
+        Paragraph: "Paragraph",
+        "Text style": "Text style",
+        Lists: "Lists",
+
+        normal: "normal",
+        default: "default",
+
+        // listas
+        "Bulleted list": "Bulleted list",
+        "Numbered list": "Numbered list",
+
+        // enlaces
+        "Enter text to display": "Enter text to display",
+        "Paste link": "Paste link",
+        "Link copied to clipboard": "Link copied to clipboard",
+
+        // grupos de atajos
+        "Text formatting": "Text formatting",
+        Editing: "Editing",
+        "Special actions": "Special actions",
+
+        // colores
+        Black: "Black",
+        Gray: "Gray",
+        White: "White",
+        Red: "Red",
+        Orange: "Orange",
+        Yellow: "Yellow",
+        Lime: "Lime",
+        Green: "Green",
+        Teal: "Teal",
+        Cyan: "Cyan",
+        Blue: "Blue",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // tonos
+        "Light gray": "Light gray",
+        "Medium gray": "Medium gray",
+        "Dark gray": "Dark gray",
+        "Light red": "Light red",
+        "Medium red": "Medium red",
+        "Dark red": "Dark red",
+        "Light orange": "Light orange",
+        "Medium orange": "Medium orange",
+        "Dark orange": "Dark orange",
+        "Light yellow": "Light yellow",
+        "Medium yellow": "Medium yellow",
+        "Dark yellow": "Dark yellow",
+        "Light lime": "Light lime",
+        "Medium lime": "Medium lime",
+        "Dark lime": "Dark lime",
+        "Light green": "Light green",
+        "Medium green": "Medium green",
+        "Dark green": "Dark green",
+        "Light teal": "Light teal",
+        "Medium teal": "Medium teal",
+        "Dark teal": "Dark teal",
+        "Light cyan": "Light cyan",
+        "Medium cyan": "Medium cyan",
+        "Dark cyan": "Dark cyan",
+        "Light blue": "Light blue",
+        "Medium blue": "Medium blue",
+        "Dark blue": "Dark blue",
+        "Light indigo": "Light indigo",
+        "Medium indigo": "Medium indigo",
+        "Dark indigo": "Dark indigo",
+        "Light magenta": "Light magenta",
+        "Medium magenta": "Medium magenta",
+        "Dark magenta": "Dark magenta"
+    }
+};
+~~~
+
+:::info[Información]
+Además del locale predeterminado ***en*** (*English*), RichText también incluye los locales integrados ***de*** (*German*) y ***cn*** (*Chinese*).
+:::
+
+<details>
+<summary><b>de</b> locale</summary>
+
+~~~jsx
+const de = {
+    richtext: {
+        // buttons/actions
+        Undo: "Rückgängig",
+        Redo: "Wiederholen",
+        Style: "Stil",
+        "Font family": "Schriftart",
+        "Font size": "Schriftgröße",
+        Bold: "Fett",
+        Italic: "Kursiv",
+        Underline: "Unterstrichen",
+        Strikethrough: "Durchgestrichen",
+        Subscript: "Tiefgestellt",
+        Superscript: "Hochgestellt",
+        "Text color": "Textfarbe",
+        "Background color": "Hintergrundfarbe",
+        "Left align": "Linksbündig",
+        "Center align": "Zentriert",
+        "Right align": "Rechtsbündig",
+        Justify: "Blocksatz",
+        "Line height": "Zeilenhöhe",
+        Outdent: "Einzug verringern",
+        Indent: "Einzug erhöhen",
+        "Insert link": "Link einfügen",
+        "Insert image": "Bild einfügen",
+        "Insert horizontal line": "Horizontale Linie einfügen",
+        "Clear formatting": "Formatierung löschen",
+        Print: "Drucken",
+        "Fullscreen mode": "Vollbildmodus",
+        "Layout mode": "Layout-Modus",
+        "Classic mode": "Klassischer Modus",
+        "Document mode": "Dokumentenmodus",
+
+        // menubar exclusive options
+        File: "Datei",
+        Import: "Importieren",
+        Export: "Exportieren",
+        Edit: "Bearbeiten",
+        Cut: "Ausschneiden",
+        Copy: "Kopieren",
+        Paste: "Einfügen",
+        View: "Ansicht",
+        Insert: "Einfügen",
+        Format: "Format",
+        Help: "Hilfe",
+        New: "Neu",
+        Link: "Link",
+        Image: "Bild",
+        "Horizontal line": "Horizontale Linie",
+        Text: "Text",
+        "Heading 1": "Überschrift 1",
+        "Heading 2": "Überschrift 2",
+        "Heading 3": "Überschrift 3",
+        "Heading 4": "Überschrift 4",
+        "Heading 5": "Überschrift 5",
+        "Heading 6": "Überschrift 6",
+        Align: "Ausrichten",
+        Left: "Links",
+        Center: "Zentriert",
+        Right: "Rechts",
+        Justified: "Blocksatz",
+        "Keyboard shortcuts": "Tastenkürzel",
+
+        // clipboard
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.",
+
+        // block style dropdown
+        Heading: "Überschrift",
+        Quote: "Zitat",
+        Paragraph: "Absatz",
+        "Text style": "Textstil",
+        Lists: "Listen",
+
+        normal: "normal",
+        default: "standard",
+
+        // lists
+        "Bulleted list": "Liste mit Aufzählungszeichen",
+        "Numbered list": "Nummerierte Liste",
+
+        // links
+        "Enter text to display": "Text zum Anzeigen eingeben",
+        "Paste link": "Link einfügen",
+        "Link copied to clipboard": "Link in die Zwischenablage kopiert",
+
+        // shortcut groups
+        "Text formatting": "Textformatierung",
+        Editing: "Bearbeitung",
+        "Special actions": "Spezielle Aktionen",
+
+        // colors
+        Black: "Schwarz",
+        Gray: "Grau",
+        White: "Weiß",
+        Red: "Rot",
+        Orange: "Orange",
+        Yellow: "Gelb",
+        Lime: "Limette",
+        Green: "Grün",
+        Teal: "Türkis",
+        Cyan: "Cyan",
+        Blue: "Blau",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // shades
+        "Light gray": "Hellgrau",
+        "Medium gray": "Mittelgrau",
+        "Dark gray": "Dunkelgrau",
+        "Light red": "Hellrot",
+        "Medium red": "Mittelrot",
+        "Dark red": "Dunkelrot",
+        "Light orange": "Hellorange",
+        "Medium orange": "Mittelorange",
+        "Dark orange": "Dunkelorange",
+        "Light yellow": "Hellgelb",
+        "Medium yellow": "Mittleres Gelb",
+        "Dark yellow": "Dunkelgelb",
+        "Light lime": "Hellgrün",
+        "Medium lime": "Mittleres Grün",
+        "Dark lime": "Dunkelgrün",
+        "Light green": "Hellgrün",
+        "Medium green": "Mittleres Grün",
+        "Dark green": "Dunkelgrün",
+        "Light teal": "Hellblau",
+        "Medium teal": "Mittelblau",
+        "Dark teal": "Dunkelblau",
+        "Light cyan": "Hellcyan",
+        "Medium cyan": "Mittleres Cyan",
+        "Dark cyan": "Dunkelcyan",
+        "Light blue": "Hellblau",
+        "Medium blue": "Mittelblau",
+        "Dark blue": "Dunkelblau",
+        "Light indigo": "Hellindigo",
+        "Medium indigo": "Mittelindigo",
+        "Dark indigo": "Dunkelindigo",
+        "Light magenta": "Hellmagenta",
+        "Medium magenta": "Mittleres Magenta",
+        "Dark magenta": "Dunkelmagenta"
+    }
+};
+~~~
+</details>
+
+<details>
+<summary><b>cn</b> locale</summary>
+
+~~~jsx
+const cn = {
+    richtext: {
+        // buttons/actions,
+        Undo: "撤销",
+        Redo: "重做",
+        Style: "样式",
+        "Font family": "字体",
+        "Font size": "字体大小",
+        Bold: "粗体",
+        Italic: "斜体",
+        Underline: "下划线",
+        Strikethrough: "删除线",
+        Subscript: "下标",
+        Superscript: "上标",
+        "Text color": "文本颜色",
+        "Background color": "背景颜色",
+        "Left align": "左对齐",
+        "Center align": "居中对齐",
+        "Right align": "右对齐",
+        Justify: "两端对齐",
+        "Line height": "行高",
+        Outdent: "减少缩进",
+        Indent: "增加缩进",
+        "Insert link": "插入链接",
+        "Insert image": "插入图片",
+        "Insert horizontal line": "插入水平线",
+        "Clear formatting": "清除格式",
+        Print: "打印",
+        "Fullscreen mode": "全屏模式",
+        "Layout mode": "布局模式",
+        "Classic mode": "经典模式",
+        "Document mode": "文档模式",
+
+        // menubar exclusive options
+        File: "文件",
+        Import: "导入",
+        Export: "导出",
+        Edit: "编辑",
+        Cut: "剪切",
+        Copy: "复制",
+        Paste: "粘贴",
+        View: "视图",
+        Insert: "插入",
+        Format: "格式",
+        Help: "帮助",
+        New: "新建",
+        Link: "链接",
+        Image: "图片",
+        "Horizontal line": "水平线",
+        Text: "文本",
+        "Heading 1": "标题 1",
+        "Heading 2": "标题 2",
+        "Heading 3": "标题 3",
+        "Heading 4": "标题 4",
+        "Heading 5": "标题 5",
+        "Heading 6": "标题 6",
+        Align: "对齐",
+        Left: "左",
+        Center: "居中",
+        Right: "右",
+        Justified: "两端对齐",
+        "Keyboard shortcuts": "键盘快捷键",
+
+        // clipboard
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "操作失败。请检查浏览器的剪贴板权限。",
+
+        // block style dropdown
+        Heading: "标题",
+        Quote: "引用",
+        Paragraph: "段落",
+        "Text style": "文本样式",
+        Lists: "列表",
+
+        normal: "普通的",
+        default: "默认",
+
+        // lists
+        "Bulleted list": "项目符号列表",
+        "Numbered list": "编号列表",
+
+        // links
+        "Enter text to display": "输入要显示的文本",
+        "Paste link": "粘贴链接",
+        "Link copied to clipboard": "链接已复制到剪贴板",
+
+        // shortcut groups
+        "Text formatting": "文本格式化",
+        Editing: "编辑",
+        "Special actions": "特殊操作",
+
+        // colors
+        Black: "黑色",
+        Gray: "灰色",
+        White: "白色",
+        Red: "红色",
+        Orange: "橙色",
+        Yellow: "黄色",
+        Lime: "酸橙色",
+        Green: "绿色",
+        Teal: "水鸭色",
+        Cyan: "青色",
+        Blue: "蓝色",
+        Indigo: "靛蓝色",
+        Magenta: "洋红色",
+
+        // shades
+        "Light gray": "浅灰色",
+        "Medium gray": "中灰色",
+        "Dark gray": "深灰色",
+        "Light red": "浅红色",
+        "Medium red": "中红色",
+        "Dark red": "深红色",
+        "Light orange": "浅橙色",
+        "Medium orange": "中橙色",
+        "Dark orange": "深橙色",
+        "Light yellow": "浅黄色",
+        "Medium yellow": "中黄色",
+        "Dark yellow": "深黄色",
+        "Light lime": "浅酸橙色",
+        "Medium lime": "中酸橙色",
+        "Dark lime": "深酸橙色",
+        "Light green": "浅绿色",
+        "Medium green": "中绿色",
+        "Dark green": "深绿色",
+        "Light teal": "浅水鸭色",
+        "Medium teal": "中水鸭色",
+        "Dark teal": "深水鸭色",
+        "Light cyan": "浅青色",
+        "Medium cyan": "中青色",
+        "Dark cyan": "深青色",
+        "Light blue": "浅蓝色",
+        "Medium blue": "中蓝色",
+        "Dark blue": "深蓝色",
+        "Light indigo": "浅靛蓝色",
+        "Medium indigo": "中靛蓝色",
+        "Dark indigo": "深靛蓝色",
+        "Light magenta": "浅洋红色",
+        "Medium magenta": "中洋红色",
+        "Dark magenta": "深洋红色"
+    }
+};
+~~~
+</details>
+
+## Locale personalizado {#custom-locale}
+
+Para aplicar un locale personalizado debe:
+
+- crear un locale personalizado (o modificar el predeterminado) y proporcionar traducciones para todas las etiquetas de texto (puede ser cualquier idioma que necesite)
+
+- aplicar el nuevo locale a **RichText** mediante su propiedad [`locale`](api/config/locale.md) o usar el método [`setLocale()`](api/methods/set-locale.md)
+
+## Ejemplo {#example}
+
+En este snippet puede ver cómo cambiar entre varios locales:
+
+<iframe src="https://snippet.dhtmlx.com/zxjrin3i?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/es/docusaurus-plugin-content-docs/current/guides/stylization.md
new file mode 100644
index 0000000..0eddefd
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/guides/stylization.md
@@ -0,0 +1,89 @@
+---
+title: Estilización
+sidebar_label: Estilización
+description: Puede consultar información sobre la estilización en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Estilización
+
+Puede personalizar completamente la apariencia de DHTMLX RichText sobreescribiendo variables CSS y aplicando estilos personalizados a partes específicas del widget.
+
+Esta guía muestra cómo aplicar un **tema oscuro** y usar los nombres de clase disponibles para estilizar el menubar, el toolbar, los popups y el área de contenido del editor.
+
+## Estructura predeterminada y nombres de clase {#default-structure-and-class-names}
+
+RichText usa las siguientes clases principales para estructurar su interfaz:
+
+| Nombre de clase        | Descripción                                         |
+|------------------------|-----------------------------------------------------|
+| `.wx-richtext`         | Contenedor raíz del widget RichText                 |
+| `.wx-richtext-menubar` | Contenedor del menubar                              |
+| `.wx-richtext-menu`    | Contenedor del menú desplegable del menubar         |
+| `.wx-richtext-toolbar` | Contenedor del toolbar                              |
+| `.wx-editor-area`      | Contenedor del área de contenido editable principal |
+
+Puede usar estas clases en sus selectores CSS personalizados para sobreescribir la apariencia del editor RichText.
+
+## Sobreescribir los estilos predeterminados {#overriding-default-styles}
+
+Puede sobreescribir los estilos predeterminados de RichText redefiniendo las variables CSS en el contenedor `#root` o en sub-elementos específicos:
+
+```html
+<div id="root" style="width: 100%; height: 100%;"></div>
+
+<style>
+  #root,
+  .wx-richtext-menu {
+    --wx-background: #404151;
+    --wx-background-alt: #212329;
+    --wx-color-primary: #14B195;
+    --wx-color-font: #FFFFFF;
+    --wx-border: 1px solid #6B6C79;
+    --wx-color-secondary-hover: rgba(20, 177, 149, 0.12);
+    --wx-button-active: rgba(20, 177, 149, 0.22);
+    --wx-icon-color: var(--wx-color-font);
+    --wx-color-font-alt: #9FA1AE;
+    --wx-color-font-disabled: #9FA1AE;
+    --wx-popup-border: var(--wx-border);
+
+    color-scheme: dark;
+  }
+
+  .wx-richtext-menu {
+    border: var(--wx-border);
+  }
+</style>
+```
+
+:::note[Nota]
+Estos estilos aplicarán un fondo oscuro, ajustarán los colores de los botones e íconos, y mejorarán la visibilidad para temas de interfaz oscuros.
+:::
+
+## Lista de variables CSS admitidas {#list-of-supported-css-variables}
+
+| Nombre de variable           | Descripción                                                                                    |
+| ---------------------------- | ---------------------------------------------------------------------------------------------- |
+| `--wx-background`            | Color de fondo del editor y del popup                                                          |
+| `--wx-background-alt`        | Fondo alternativo para el menubar                                                              |
+| `--wx-color-primary`         | Color de acento para enlaces, citas en bloque y bordes de imágenes en redimensionamiento       |
+| `--wx-color-font`            | Color de fuente principal (para el editor, el menubar y el toolbar)                            |
+| `--wx-color-font-alt`        | Color de fuente alternativo                                                                    |
+| `--wx-color-font-disabled`   | Color del texto deshabilitado (para elementos del menubar y el toolbar)                        |
+| `--wx-border`                | Estilo de borde usado en todo el editor                                                        |
+| `--wx-color-secondary-hover` | Fondo del estado hover para botones dentro del menubar y el toolbar                            |
+| `--wx-button-active`         | Fondo del estado activo para botones dentro del menubar y el toolbar                           |
+| `--wx-icon-color`            | Color para los íconos de flecha del toolbar usados en los menús desplegables                   |
+| `--wx-popup-border`          | Borde para los elementos popup                                                                 |
+
+## Buenas prácticas {#best-practices}
+
+* Use `color-scheme: dark` para mejorar el estilo de los inputs nativos en modo oscuro
+* Evite cambiar propiedades relacionadas con el layout (como `display`, `position`) a menos que sea necesario
+
+## Demo en vivo {#live-demo}
+
+En este snippet puede ver cómo aplicar un estilo personalizado a RichText:
+
+<iframe src="https://snippet.dhtmlx.com/q8j4qqq9?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+
+**Artículos relacionados:** [Customization](guides/configuration.md)
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/es/docusaurus-plugin-content-docs/current/guides/typescript_support.md
new file mode 100644
index 0000000..5cda3c0
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/guides/typescript_support.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: Soporte de TypeScript
+title: Soporte de TypeScript
+description: Puede consultar información sobre el uso de TypeScript con la biblioteca JavaScript RichText de DHTMLX en la documentación. Explore guías para desarrolladores y referencia de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Soporte de TypeScript
+
+A partir de la versión 2.0, la biblioteca DHTMLX RichText ofrece la posibilidad de usar definiciones de TypeScript. El soporte integrado de TypeScript funciona sin configuración adicional.
+
+:::note[Nota]
+Puede probar la funcionalidad directamente en nuestra <a href="https://snippet.dhtmlx.com/ziynafp7?tag=richtext"  target="_blank">herramienta Snippet</a>.
+:::
+
+## Ventajas de usar TypeScript {#advantages-of-using-typescript}
+
+¿Por qué usar DHTMLX RichText con TypeScript?
+
+El principal beneficio de TypeScript es que le permite aumentar significativamente la eficiencia del proceso de desarrollo.
+
+La forma de construir una aplicación se vuelve más robusta, ya que la verificación de tipos junto con el autocompletado le permite evitar posibles errores. Además, TypeScript le proporciona información sobre los tipos de datos que debe usar al trabajar con la API de la biblioteca DHTMLX RichText.
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/es/docusaurus-plugin-content-docs/current/how_to_start.md
new file mode 100644
index 0000000..f054415
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/how_to_start.md
@@ -0,0 +1,109 @@
+---
+sidebar_label: Cómo empezar
+title: Cómo empezar
+description: Puede explorar cómo empezar a trabajar con DHTMLX RichText en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencias de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Cómo empezar
+
+Este tutorial claro y completo lo guiará a través de los pasos necesarios para tener un RichText completamente funcional en una página.
+
+<div className="img_border">
+![Modo clásico de DHTMLX RichText](./assets/richtext/classic_mode.png)
+</div>
+
+## Paso 1. Incluir los archivos fuente {#step-1-including-source-files}
+
+Comience creando un archivo HTML y llámelo *index.html*. Luego proceda a incluir los archivos fuente de RichText en el archivo creado.
+
+Hay dos archivos necesarios:
+
+- el archivo JS de RichText
+- el archivo CSS de RichText
+
+~~~html {5-6} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <script>
+        // su código irá aquí
+        </script>
+    </body>
+</html>
+~~~
+
+### Instalar RichText mediante npm o yarn {#installing-richtext-via-npm-or-yarn}
+
+Puede importar JavaScript RichText a su proyecto usando el gestor de paquetes **yarn** o **npm**.
+
+#### Instalar la versión de prueba de RichText mediante npm o yarn {#installing-trial-richtext-via-npm-or-yarn}
+
+:::info[Información]
+Si desea usar la versión de prueba de RichText, descargue el [**paquete de prueba de RichText**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) y siga los pasos indicados en el archivo *README*. Tenga en cuenta que la versión de prueba de RichText está disponible solo por 30 días.
+:::
+
+#### Instalar la versión PRO de RichText mediante npm o yarn {#installing-pro-richtext-via-npm-or-yarn}
+
+:::info[Información]
+Puede acceder al **npm** privado de DHTMLX directamente en el [Área de clientes](https://dhtmlx.com/clients/) generando su nombre de usuario y contraseña para **npm**. Allí también encontrará una guía de instalación detallada. Tenga en cuenta que el acceso al **npm** privado solo está disponible mientras su licencia propietaria de RichText esté activa.
+:::
+
+## Paso 2. Crear RichText {#step-2-creating-richtext}
+
+Ahora está listo para agregar RichText a la página. Primero, creemos el contenedor `<div>` para RichText. Para ello, siga estos pasos:
+
+- especifique un contenedor DIV en el archivo *index.html*
+- inicialice RichText usando el constructor `richtext.Richtext`
+
+Como parámetros, el constructor acepta cualquier selector CSS válido del contenedor HTML donde se ubicará RichText, así como los objetos de configuración correspondientes.
+
+~~~html {9,12-14} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <div id="root"></div>
+
+        <script>
+            const editor = new richtext.Richtext("#root", {
+                // propiedades de configuración
+            });
+        </script>
+    </body>
+</html>
+~~~
+
+## Paso 3. Configurar RichText {#step-3-configuring-richtext}
+
+A continuación, puede especificar las propiedades de configuración que desea que tenga el componente RichText al inicializarse.
+
+Para comenzar a trabajar con RichText, primero debe proporcionar los datos iniciales para el editor mediante la propiedad [`value`](api/config/value.md). Además, puede habilitar la [**barra de menú**](api/config/menubar.md), personalizar la [**toolbar**](api/config/toolbar.md), especificar los modos de [**pantalla completa**](api/config/fullscreen-mode.md) y [**diseño**](api/config/layout-mode.md), aplicar una nueva [**configuración regional**](api/config/locale.md) y [**estilos predeterminados**](api/config/default-styles.md).
+
+~~~jsx {2-12}
+const editor = new richtext.Richtext("#root", {
+    menubar: true,
+    toolbar: false,
+    fullscreenMode: true,
+    layoutMode: "document",
+    locale: richtext.locales.cn
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        // otras configuraciones
+    }
+});
+~~~
+
+## Qué sigue {#whats-next}
+
+Eso es todo. Con solo tres simples pasos tiene una herramienta práctica para editar contenido. Ahora puede comenzar a trabajar con su contenido o seguir explorando el mundo interior de JavaScript RichText.
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/index.md b/i18n/es/docusaurus-plugin-content-docs/current/index.md
new file mode 100644
index 0000000..6c4616e
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/index.md
@@ -0,0 +1,126 @@
+---
+sidebar_label: Descripción general de RichText
+title: Descripción general de RichText
+slug: /
+description: Puede obtener una descripción general de la biblioteca JavaScript RichText de DHTMLX en la documentación. Explore guías para desarrolladores y referencias de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Descripción general de RichText
+
+**DHTMLX RichText** es un editor WYSIWYG flexible y liviano construido con JavaScript. Diseñado para ofrecer una experiencia de edición fluida en aplicaciones web modernas, RichText presenta una interfaz limpia, capacidades de formato enriquecido y control total sobre la representación del contenido. Ya sea que esté creando un CMS, una herramienta de administración interna o un editor de documentos integrado, RichText puede integrarse y personalizarse fácilmente para adaptarse a sus necesidades.
+
+El componente **DHTMLX RichText** incluye las siguientes características:
+
+- Dos [**modos de diseño**](api/config/layout-mode.md)
+
+- Serialización de contenido a texto plano y HTML
+
+- [**toolbar**](api/config/toolbar.md) configurable con botones integrados y personalizados
+
+- [**Barra de menú**](api/config/menubar.md) estática que puede mostrarse u ocultarse
+
+- Carga de imágenes, formato enriquecido, estilos personalizados y modo de pantalla completa
+
+- [Acceso completo a la API](api/overview/main_overview.md) para el [manejo de eventos](api/overview/event_bus_methods_overview.md), la [manipulación de contenido](api/overview/methods_overview.md) y la [gestión reactiva del estado](api/overview/state_methods_overview.md)
+
+RichText es independiente del framework y puede integrarse fácilmente con [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md) y [Svelte](guides/integration_with_svelte.md), lo que lo hace adecuado para una amplia gama de ecosistemas front-end.
+
+Esta documentación ofrece orientación detallada sobre instalación, configuración, uso y personalización. Encontrará ejemplos para escenarios comunes, [referencias completas de la API](api/overview/main_overview.md) y buenas prácticas para integrar RichText en su aplicación.
+
+## Estructura de RichText {#richtext-structure}
+
+### Barra de menú {#menubar}
+
+La barra de menú de RichText proporciona acceso a acciones de edición como crear un nuevo documento, imprimir, importar/exportar contenido y más. Está oculta de forma predeterminada.
+
+Use la propiedad [`menubar`](api/config/menubar.md) para alternar su visibilidad. Si bien la barra de menú puede habilitarse o deshabilitarse, su contenido no es configurable en este momento.
+
+<div className="img_border">
+![Barra de menú](./assets/richtext/menubar.png)
+</div>
+
+### Toolbar {#toolbar}
+
+La toolbar de RichText proporciona acceso rápido a las funciones de formato de texto y edición estructural. De forma predeterminada, la [toolbar](api/config/toolbar.md#default-config) está habilitada y muestra un conjunto predefinido de controles de uso común, como negrita, cursiva, configuración de fuente, formato de lista y más.
+
+La propiedad [`toolbar`](api/config/toolbar.md) le permite personalizar completamente el contenido y el diseño de la toolbar. Puede habilitar o deshabilitar la toolbar, reorganizar los controles predeterminados o definir una toolbar completamente personalizada mediante una matriz de identificadores de botones predefinidos y objetos de botones personalizados.
+
+<div className="img_border">
+![Toolbar](./assets/richtext/toolbar.png)
+</div>
+
+### Editor {#editor}
+
+El editor de RichText es el área central donde los usuarios crean y dan formato al contenido. Puede controlar la apariencia y el comportamiento del editor mediante opciones de configuración como [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md) y [`defaultStyles`](api/config/default-styles.md). RichText también admite estilos personalizados, incrustación de imágenes y ajustes de diseño adaptable para satisfacer las necesidades de su aplicación.
+
+#### Dos modos de trabajo {#two-working-modes}
+
+DHTMLX RichText puede trabajar con contenido en los modos "classic" y "document". Puede elegir el modo más adecuado para sentirse cómodo al editar texto. Use la propiedad [`layoutMode`](api/config/layout-mode.md) para cambiar de modo mediante programación.
+
+- **"classic"**
+
+<div className="img_border">
+![Modo clásico](./assets/richtext/classic_mode.png)
+</div>
+
+- **"document"**
+
+<div className="img_border">
+![Modo documento](./assets/richtext/document_mode.png)
+</div>
+
+## Formatos compatibles {#supported-formats}
+
+El editor RichText admite el [análisis](api/methods/set-value.md) y la [serialización](api/methods/get-value.md) de contenido en los formatos **HTML** y texto plano.
+
+#### Formato HTML {#html-format}
+
+<div className="img_border">
+![Formato HTML](./assets/richtext/html_format.png)
+</div>
+
+#### Formato de texto {#text-format}
+
+<div className="img_border">
+![Formato de texto](./assets/richtext/text_format.png)
+</div>
+
+## Atajos de teclado {#keyboard-shortcuts}
+
+El editor RichText admite un conjunto de atajos de teclado comunes para un formato y edición más rápidos. Los atajos siguen las convenciones de cada plataforma y están disponibles tanto en **Windows/Linux** (`Ctrl`) como en **macOS** (`⌘`).
+
+### Formato de texto {#text-formatting}
+
+| Acción          | Windows/Linux   | macOS         |
+|-----------------|-----------------|---------------|
+| Negrita*        | `Ctrl+B`        | `⌘B`          |
+| Cursiva         | `Ctrl+I`        | `⌘I`          |
+| Subrayado       | `Ctrl+U`        | `⌘U`          |
+| Tachado         | `Ctrl+Shift+X`  | `⌘⇧X`         |
+
+### Edición {#editing}
+
+| Acción   | Windows/Linux            | macOS         |
+|----------|--------------------------|---------------|
+| Deshacer | `Ctrl+Z`                 | `⌘Z`          |
+| Rehacer  | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z`  |
+| Cortar   | `Ctrl+X`                 | `⌘X`          |
+| Copiar   | `Ctrl+C`                 | `⌘C`          |
+| Pegar    | `Ctrl+V`                 | `⌘V`          |
+
+### Acciones especiales {#special-actions}
+
+| Acción          | Windows/Linux | macOS |
+|-----------------|---------------|-------|
+| Insertar enlace | `Ctrl+K`      | `⌘K`  |
+| Imprimir        | `Ctrl+P`      | `⌘P`  |
+
+:::info[Información]
+Es posible que se introduzcan más atajos en futuras actualizaciones.
+:::
+
+Para obtener la referencia actualizada de los atajos de teclado de RichText, presione **Help** y seleccione la opción **Keyboard shortcuts**:
+
+<div className="img_border">
+![Atajos de teclado](./assets/richtext/shortcut_reference.png)
+</div>
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/es/docusaurus-plugin-content-docs/current/news/migration.md
new file mode 100644
index 0000000..9c5ef6d
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/news/migration.md
@@ -0,0 +1,167 @@
+---
+sidebar_label: Migración a versiones más recientes
+title: Migración a versiones más recientes
+description: Puede conocer la migración a versiones más recientes en la documentación de la biblioteca JavaScript RichText de DHTMLX. Explore guías para desarrolladores y referencias de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+# Migración a versiones más recientes
+
+## 1.2 -> 2.0 {#12---20}
+
+### Migración de propiedades {#properties-migration}
+
+| Propiedad anterior | Reemplazada por           | Notas                                              |
+| ------------------ | ------------------------- | -------------------------------------------------- |
+| `customStats`      | *(Eliminada)*             | No disponible en la nueva versión 2.0              |
+| `toolbarBlocks`    | `toolbar`                 | Ahora admite estructura detallada de la toolbar    |
+| `defaultStyles`    | `defaultStyles` (updated) | La estructura ahora es por bloque y basada en CSS  |
+| `mode`             | `layoutMode`              | Reemplazada con una configuración basada en enum más estricta |
+
+### - `customStats` {#--customstats}
+
+La propiedad `customStats` ha sido eliminada. La versión actual de RichText ya no admite mostrar estadísticas definidas por el usuario (por ejemplo, recuento de caracteres, palabras u oraciones).
+
+Si aún necesita calcular métricas de texto, puede hacerlo externamente accediendo al contenido del editor y procesándolo de forma manual:
+
+```jsx
+const content = editor.getValue();
+const wordCount = content.split(/\s+/).length;
+```
+
+### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) {#--toolbarblocks--toolbar}
+
+Antes de **2.0**, los usuarios solo podían especificar bloques de controles
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+  toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"]
+});
+```
+
+A partir de **2.0**, los usuarios pueden especificar controles individuales
+```jsx{2-4} title="From 2.0"
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo", "style", "bold", "italic", "underline", "text-color",
+        "align", "link"
+    ]
+});
+```
+
+### - [`defaultStyles`](api/config/default-styles.md) {#--defaultstyles}
+
+Antes de **2.0**, los usuarios podían definir valores predeterminados para los controles de selección de la toolbar
+```jsx title="Before 2.0"
+defaultStyles: {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+}
+```
+
+A partir de **2.0**, los usuarios pueden especificar valores de estilo predeterminados para tipos de bloque específicos
+```jsx title="From 2.0"
+defaultStyles: {
+  "*": {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+  },
+  h1: {
+    "font-size": "32px",
+    "color": "#333"
+  }
+}
+```
+
+:::note[Nota]
+Use `*` para definir valores predeterminados base para todos los bloques y luego anule elementos específicos (p, h1, blockquote, etc.).
+:::
+
+### - `mode` → [`layoutMode`](api/config/layout-mode.md) {#--mode--layoutmode}
+
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+    mode: "document"
+});
+```
+
+```jsx{2} title="From 2.0"
+new Richtext("#root", {
+    layoutMode: "document" // o "classic"
+});
+```
+
+El nuevo [`layoutMode`](api/config/layout-mode.md) admite estrictamente los valores `"classic"` y `"document"`.
+
+### Migración de métodos {#methods-migration}
+
+| Método anterior         | Nuevo equivalente                    | Notas                                                                |
+| ----------------------- | ------------------------------------ | -------------------------------------------------------------------- |
+| `getValue(mode)`        | `getValue(encoder)`                  | Los encoders reemplazan los modos de cadena; se necesita importación separada para los encoders |
+| `setValue(value, mode)` | `setValue(value, encoder)`           | Los encoders reemplazan los modos de cadena; se necesita importación separada para los encoders |
+| `getStats()`            | *Eliminado*                          | Sin reemplazo; se requiere lógica manual                             |
+| `getEditorAPI()`        | *Eliminado*                          | Interno; use la API pública en su lugar                              |
+| `fire()`                | *Eliminado*                          | Reemplazado por `exec()` e `intercept()`                             |
+| `on()`, `detach()`      | ✅ Conservados (`api.on`, `api.detach`)| Ahora se acceden mediante `richtext.api`                           |
+| `fullScreen()`          | *Eliminado*                          | Use la propiedad de configuración `fullscreenMode`                   |
+| `exitFullScreen()`      | *Eliminado*                          | Use la propiedad de configuración `fullscreenMode`                   |
+| `paint()`               | *Eliminado*                          | Ya no es necesario                                                   |
+| `destructor()`          | ✅ Sigue disponible                  | Sin cambios                                                          |
+| `setConfig()`           | ✅ Nuevo                             | Permite actualizaciones de configuración en tiempo real              |
+| `setLocale()`           | ✅ Nuevo                             | Permite cambiar la configuración regional de forma dinámica          |
+| `getReactiveState()`    | ✅ Nuevo                             | Habilita el seguimiento reactivo del estado                          |
+| `getState()`            | ✅ Nuevo                             | Proporciona el estado de configuración estático actual               |
+| `intercept()`           | ✅ Nuevo                             | Intercepta acciones internas                                         |
+| `exec()`                | ✅ Nuevo                             | Ejecuta acciones internas                                            |
+
+### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) {#--setvalue--getvalue}
+
+```jsx title="Before 2.0"
+...
+editor.setValue("<p>Hello</p>", "html");
+editor.getValue("text");
+```
+
+```jsx title="From 2.0"
+const fromTextEncoder = richtext.text.fromText;
+const fromHTMLEncoder = richtext.html.fromHTML;
+
+const toTextEncoder = richtext.text.toText;
+const toHTMLEncoder = richtext.html.toHTML;
+...
+editor.setValue("<p>Hello</p>", fromHTMLEncoder);
+editor.getValue(toTextEncoder);
+```
+
+:::note[Nota]
+Aún puede llamar a `getValue()` y `setValue()` sin un encoder — HTML se usa de forma predeterminada
+:::
+
+### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) {#--on--detach}
+
+```jsx title="Before 2.0"
+editor.events.on("Change", function(action, canUndo, canRedo){
+  // su código aquí
+});
+
+editor.events.detach("Change");
+```
+
+```jsx title="From 2.0"
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+```
+
+### - `fire()` → Use [`exec()`](api/internal/exec.md) e [`intercept()`](api/internal/intercept.md) {#--fire--use-exec-and-intercept}
+
+```jsx title="Before 2.0"
+editor.events.fire("some-event", [data]);
+```
+
+```jsx title="From 2.0"
+editor.api.exec("some-event", obj);
+
+// Prevenir la ejecución
+editor.api.intercept("some-event", (obj) => false);
+```
diff --git a/i18n/es/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/es/docusaurus-plugin-content-docs/current/news/whats_new.md
new file mode 100644
index 0000000..a87914d
--- /dev/null
+++ b/i18n/es/docusaurus-plugin-content-docs/current/news/whats_new.md
@@ -0,0 +1,192 @@
+---
+sidebar_label: Novedades
+title: Novedades
+description: Puede explorar las novedades de DHTMLX RichText y su historial de versiones en la documentación de la biblioteca JavaScript UI de DHTMLX. Explore guías para desarrolladores y referencias de API, pruebe ejemplos de código y demostraciones en vivo, y descargue una versión de evaluación gratuita de 30 días de DHTMLX RichText.
+---
+
+## Versión 2.0.5 {#version-205}
+
+Lanzada el 6 de marzo de 2026
+
+### Correcciones {#fixes}
+
+- La entrada IME no se procesa correctamente
+- La entrada basada en composición (por ejemplo, chino, japonés, coreano en escritorio) no se procesa correctamente
+- Las propiedades `margin-left` y `line-height` se ignoran al analizar HTML
+- Los elementos en línea heredan propiedades de los elementos de bloque padre
+- No es posible copiar texto entre dos instancias del editor
+- La selección se maneja incorrectamente cuando hay dos o más instancias del editor activas
+- El cursor se posiciona incorrectamente cuando el único contenido del párrafo es una imagen
+- Envoltura indefinida de elementos de subíndice y superíndice
+- Al pegar imágenes, se incrustan en línea en lugar de cargarse primero
+- Los bloques en línea vacíos no se pueden eliminar en posiciones específicas (primera o última línea)
+- El editor no desplaza la vista al cursor al escribir
+- La entrada en Android no se procesa correctamente
+- Manejo incorrecto de la selección para elementos HR
+- Renderizado incorrecto con valores iniciales vacíos
+- Copiar contenido puede fallar si contiene bloques de cierre automático
+- Chrome: no se pueden insertar emojis desde el menú contextual
+- Firefox: seleccionar todo (CTRL+A) no se maneja correctamente
+
+## Versión 2.0.4 {#version-204}
+
+Lanzada el 15 de octubre de 2025
+
+### Correcciones {#fixes-1}
+
+- Selección de rango incorrecta para párrafos
+- Los popups de enlace no se muestran cuando están adyacentes a imágenes enlazadas
+- Los valores iniciales de la toolbar no son precisos en relación con el contenido real
+
+## Versión 2.0.3 {#version-203}
+
+Lanzada el 27 de agosto de 2025
+
+### Correcciones {#fixes-2}
+
+- Hacer clic en una línea horizontal provoca un error de script
+- La altura de línea predeterminada es incorrecta
+- Los estilos de contenido incluyen selectores duplicados
+- Los bloques de texto plano ignoran los cambios de estilo al analizar HTML
+- El analizador ignora los nombres de fuente escapados en HTML
+- El analizador ignora las propiedades `margin-left` y `line-height` en HTML
+
+## Versión 2.0.2 {#version-202}
+
+Lanzada el 4 de agosto de 2025
+
+### Correcciones {#fixes-3}
+
+- Contenido del paquete actualizado
+
+## Versión 2.0.1 {#version-201}
+
+Lanzada el 30 de julio de 2025
+
+### Correcciones {#fixes-4}
+
+- Actualización de las definiciones de tipo para la propiedad `defaultStyles`
+
+## Versión 2.0 {#version-20}
+
+Lanzada el 30 de julio de 2025
+
+:::note[Nota]
+La API de v1.2 no es compatible con v2.0. Consulte la [**guía de migración**](news/migration.md) para obtener información adicional.
+:::
+
+### Nueva funcionalidad {#new-functionality}
+
+- **Renderizado de texto de nueva generación**
+  Experimente un renderizado de texto más fluido, rápido y preciso con nuestro nuevo motor
+
+- **Configuración granular de la toolbar**
+  Tome control total de la toolbar:
+  - Defina [controles individuales de la toolbar](guides/configuration.md/#default-toolbar-controls) y su orden
+  - Agregue [controles personalizados](guides/configuration.md/#custom-toolbar-controls)
+
+- **[Barra de menú](api/config/menubar.md) opcional**
+  Habilite una interfaz clásica de menú en la parte superior del editor
+
+- **[Modo documento](guides/configuration.md/#layout-modes) mejorado**
+  Se agregó compatibilidad con diferentes tamaños de documento
+
+- **Compatibilidad con imágenes**
+  - Inserte imágenes con [capacidades de carga](api/config/image-upload-url.md).
+  - [Redimensione imágenes](api/events/resize-image.md) de forma interactiva
+
+- **Experiencia de enlaces mejorada**
+  [Interacciones de popup](api/events/show-popup.md) rediseñadas para una mejor usabilidad
+
+- **Nuevas herramientas de formato**
+  - Alineación de texto: **justificar**
+  - Insertar [líneas horizontales](api/events/insert-line.md)
+  - [Sangría](api/events/indent.md) / [Quitar sangría](api/events/outdent.md)
+  - Establecer [altura de línea](api/events/set-line-height.md)
+  - Aplicar [subíndice](api/events/subscript.md) / [superíndice](api/events/superscript.md)
+
+- **Gestión de listas**
+  [Inserte y gestione listas](api/events/insert-list.md) fácilmente en su contenido
+
+- **Importar/Exportar e Imprimir**
+  - [Importar archivos DOCX](api/events/import.md)
+  - [Exportar](api/events/export.md) contenido a DOCX o PDF
+  - [Imprimir](api/events/print.md) documentos directamente desde el editor
+
+- **Atajos de teclado**
+  Compatibilidad ampliada con atajos comunes de formato y edición
+
+### Nueva API {#new-api}
+
+#### Nuevas propiedades {#new-properties}
+
+- [`fullscreenMode`](api/config/fullscreen-mode.md)
+- [`imageUploadUrl`](api/config/image-upload-url.md)
+- [`layoutMode`](api/config/layout-mode.md)
+- [`locale`](api/config/locale.md)
+- [`menubar`](api/config/menubar.md)
+- [`toolbar`](api/config/toolbar.md)
+- [`value`](api/config/value.md)
+
+#### Nuevos métodos {#new-methods}
+
+- [`setConfig()`](api/methods/set-config.md) — Actualizar la configuración de forma dinámica
+- [`setLocale()`](api/methods/set-locale.md) — Cambiar la configuración regional en tiempo real
+
+#### Nuevos métodos internos {#new-internal-methods}
+
+- [`api.exec()`](api/internal/exec.md)
+- [`api.intercept()`](api/internal/intercept.md)
+- [`api.getReactiveState()`](api/internal/get-reactive-state.md)
+- [`api.getState()`](api/internal/get-state.md)
+
+#### Nuevos eventos {#new-events}
+
+La lista completa de nuevos eventos está disponible [aquí](api/overview/events_overview.md)
+
+### API actualizada {#updated-api}
+
+#### Propiedades actualizadas {#updated-properties}
+
+- [`defaultStyles`](api/config/default-styles.md)
+
+#### Métodos actualizados {#updated-methods}
+
+- [`setValue()`](api/methods/set-value.md)
+- [`getValue()`](api/methods/get-value.md)
+
+#### Métodos internos actualizados {#updated-internal-methods}
+
+- [`api.detach()`](api/internal/detach.md)
+- [`api.on()`](api/internal/on.md)
+
+## API eliminada {#removed-api}
+
+:::warning[Advertencia]
+¡No use la API eliminada en sus proyectos! <br/> Consulte el tema [Migración](news/migration.md) para obtener más información.
+:::
+
+### [Propiedades eliminadas](news/migration.md#properties-migration) {#removed-properties}
+
+- [`customStats`](news/migration.md#--customstats)
+- [`mode`](news/migration.md#--mode--layoutmode)
+- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar)
+
+### [Métodos eliminados](news/migration.md#methods-migration) {#removed-methods}
+
+- `exitFullScreen()`
+- `fullScreen()`
+- `getEditorAPI()`
+- `getStats()`
+- `paint()`
+
+### Métodos internos eliminados {#removed-internal-methods}
+
+- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept)
+
+### Eventos eliminados {#removed-events}
+
+- `Action`
+- `Change`
+- `selectionChange`
+- `selectionRefresh`
diff --git a/i18n/es/docusaurus-theme-classic/footer.json b/i18n/es/docusaurus-theme-classic/footer.json
new file mode 100644
index 0000000..cb5c883
--- /dev/null
+++ b/i18n/es/docusaurus-theme-classic/footer.json
@@ -0,0 +1,62 @@
+{
+  "link.title.Development center": {
+    "message": "Development center",
+    "description": "The title of the footer links column with title=Development center in the footer"
+  },
+  "link.title.Community": {
+    "message": "Community",
+    "description": "The title of the footer links column with title=Community in the footer"
+  },
+  "link.title.Company": {
+    "message": "Company",
+    "description": "The title of the footer links column with title=Company in the footer"
+  },
+  "link.item.label.Download RichText": {
+    "message": "Download RichText",
+    "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml"
+  },
+  "link.item.label.Examples": {
+    "message": "Examples",
+    "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext"
+  },
+  "link.item.label.Blog": {
+    "message": "Blog",
+    "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/"
+  },
+  "link.item.label.Forum": {
+    "message": "Forum",
+    "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/"
+  },
+  "link.item.label.GitHub": {
+    "message": "GitHub",
+    "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX"
+  },
+  "link.item.label.Youtube": {
+    "message": "Youtube",
+    "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx"
+  },
+  "link.item.label.Facebook": {
+    "message": "Facebook",
+    "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx"
+  },
+  "link.item.label.Twitter": {
+    "message": "Twitter",
+    "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx"
+  },
+  "link.item.label.Linkedin": {
+    "message": "Linkedin",
+    "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/"
+  },
+  "link.item.label.About us": {
+    "message": "About us",
+    "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml"
+  },
+  "link.item.label.Contact us": {
+    "message": "Contact us",
+    "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml"
+  },
+  "link.item.label.Licensing": {
+    "message": "Licensing",
+    "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses"
+  }
+}
diff --git a/i18n/es/docusaurus-theme-classic/navbar.json b/i18n/es/docusaurus-theme-classic/navbar.json
new file mode 100644
index 0000000..cdc91aa
--- /dev/null
+++ b/i18n/es/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,26 @@
+{
+  "title": {
+    "message": "JavaScript RichText Documentation",
+    "description": "The title in the navbar"
+  },
+  "logo.alt": {
+    "message": "DHTMLX RichText Documentation",
+    "description": "The alt text of navbar logo"
+  },
+  "item.label.Examples": {
+    "message": "Examples",
+    "description": "Navbar item with label Examples"
+  },
+  "item.label.Forum": {
+    "message": "Forum",
+    "description": "Navbar item with label Forum"
+  },
+  "item.label.Support": {
+    "message": "Support",
+    "description": "Navbar item with label Support"
+  },
+  "item.label.Download": {
+    "message": "Download",
+    "description": "Navbar item with label Download"
+  }
+}
diff --git a/i18n/ko/code.json b/i18n/ko/code.json
new file mode 100644
index 0000000..327f0c3
--- /dev/null
+++ b/i18n/ko/code.json
@@ -0,0 +1,560 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "페이지에 오류가 발생하였습니다.",
+    "description": "The title of the fallback page when the page crashed"
+  },
+  "theme.BackToTopButton.buttonAriaLabel": {
+    "message": "맨 위로 스크롤하기",
+    "description": "The ARIA label for the back to top button"
+  },
+  "theme.blog.archive.title": {
+    "message": "게시물 목록",
+    "description": "The page & hero title of the blog archive page"
+  },
+  "theme.blog.archive.description": {
+    "message": "게시물 목록",
+    "description": "The page & hero description of the blog archive page"
+  },
+  "theme.blog.paginator.navAriaLabel": {
+    "message": "블로그 게시물 목록 탐색",
+    "description": "The ARIA label for the blog pagination"
+  },
+  "theme.blog.paginator.newerEntries": {
+    "message": "이전 페이지",
+    "description": "The label used to navigate to the newer blog posts page (previous page)"
+  },
+  "theme.blog.paginator.olderEntries": {
+    "message": "다음 페이지",
+    "description": "The label used to navigate to the older blog posts page (next page)"
+  },
+  "theme.blog.post.paginator.navAriaLabel": {
+    "message": "블로그 게시물 탐색",
+    "description": "The ARIA label for the blog posts pagination"
+  },
+  "theme.blog.post.paginator.newerPost": {
+    "message": "이전 게시물",
+    "description": "The blog post button label to navigate to the newer/previous post"
+  },
+  "theme.blog.post.paginator.olderPost": {
+    "message": "다음 게시물",
+    "description": "The blog post button label to navigate to the older/next post"
+  },
+  "theme.tags.tagsPageLink": {
+    "message": "모든 태그 보기",
+    "description": "The label of the link targeting the tag list page"
+  },
+  "theme.colorToggle.ariaLabel.mode.system": {
+    "message": "system mode",
+    "description": "The name for the system color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.light": {
+    "message": "밝은 모드",
+    "description": "The name for the light color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.dark": {
+    "message": "어두운 모드",
+    "description": "The name for the dark color mode"
+  },
+  "theme.colorToggle.ariaLabel": {
+    "message": "어두운 모드와 밝은 모드 전환하기 (현재 {mode})",
+    "description": "The ARIA label for the color mode toggle"
+  },
+  "theme.docs.breadcrumbs.navAriaLabel": {
+    "message": "탐색 경로",
+    "description": "The ARIA label for the breadcrumbs"
+  },
+  "theme.docs.DocCard.categoryDescription.plurals": {
+    "message": "{count} 항목",
+    "description": "The default description for a category card in the generated index about how many items this category includes"
+  },
+  "theme.docs.paginator.navAriaLabel": {
+    "message": "문서 페이지",
+    "description": "The ARIA label for the docs pagination"
+  },
+  "theme.docs.paginator.previous": {
+    "message": "이전",
+    "description": "The label used to navigate to the previous doc"
+  },
+  "theme.docs.paginator.next": {
+    "message": "다음",
+    "description": "The label used to navigate to the next doc"
+  },
+  "theme.docs.tagDocListPageTitle.nDocsTagged": {
+    "message": "{count}개 문서가",
+    "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.docs.tagDocListPageTitle": {
+    "message": "{nDocsTagged} \"{tagName}\" 태그에 분류되었습니다",
+    "description": "The title of the page for a docs tag"
+  },
+  "theme.docs.versionBadge.label": {
+    "message": "버전: {versionLabel}"
+  },
+  "theme.docs.versions.unreleasedVersionLabel": {
+    "message": "{siteTitle} {versionLabel} 문서는 아직 정식 공개되지 않았습니다.",
+    "description": "The label used to tell the user that he's browsing an unreleased doc version"
+  },
+  "theme.docs.versions.unmaintainedVersionLabel": {
+    "message": "{siteTitle} {versionLabel} 문서는 더 이상 업데이트되지 않습니다.",
+    "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+  },
+  "theme.docs.versions.latestVersionSuggestionLabel": {
+    "message": "최신 문서는 {latestVersionLink} ({versionLabel})을 확인하세요.",
+    "description": "The label used to tell the user to check the latest version"
+  },
+  "theme.docs.versions.latestVersionLinkLabel": {
+    "message": "최신 버전",
+    "description": "The label used for the latest version suggestion link label"
+  },
+  "theme.common.editThisPage": {
+    "message": "페이지 편집",
+    "description": "The link label to edit the current page"
+  },
+  "theme.common.headingLinkTitle": {
+    "message": "{heading}에 대한 직접 링크",
+    "description": "Title for link to heading"
+  },
+  "theme.lastUpdated.atDate": {
+    "message": " {date}에",
+    "description": "The words used to describe on which date a page has been last updated"
+  },
+  "theme.lastUpdated.byUser": {
+    "message": " {user}가",
+    "description": "The words used to describe by who the page has been last updated"
+  },
+  "theme.lastUpdated.lastUpdatedAtBy": {
+    "message": "최종 수정: {atDate}{byUser}",
+    "description": "The sentence used to display when a page has been last updated, and by who"
+  },
+  "theme.navbar.mobileVersionsDropdown.label": {
+    "message": "버전",
+    "description": "The label for the navbar versions dropdown on mobile view"
+  },
+  "theme.NotFound.title": {
+    "message": "페이지를 찾을 수 없습니다.",
+    "description": "The title of the 404 page"
+  },
+  "theme.tags.tagsListLabel": {
+    "message": "태그:",
+    "description": "The label alongside a tag list"
+  },
+  "theme.admonition.caution": {
+    "message": "주의",
+    "description": "The default label used for the Caution admonition (:::caution)"
+  },
+  "theme.admonition.danger": {
+    "message": "위험",
+    "description": "The default label used for the Danger admonition (:::danger)"
+  },
+  "theme.admonition.info": {
+    "message": "정보",
+    "description": "The default label used for the Info admonition (:::info)"
+  },
+  "theme.admonition.note": {
+    "message": "노트",
+    "description": "The default label used for the Note admonition (:::note)"
+  },
+  "theme.admonition.tip": {
+    "message": "팁",
+    "description": "The default label used for the Tip admonition (:::tip)"
+  },
+  "theme.admonition.warning": {
+    "message": "경고",
+    "description": "The default label used for the Warning admonition (:::warning)"
+  },
+  "theme.AnnouncementBar.closeButtonAriaLabel": {
+    "message": "닫기",
+    "description": "The ARIA label for close button of announcement bar"
+  },
+  "theme.blog.sidebar.navAriaLabel": {
+    "message": "최근 블로그 문서 둘러보기",
+    "description": "The ARIA label for recent posts in the blog sidebar"
+  },
+  "theme.DocSidebarItem.expandCategoryAriaLabel": {
+    "message": "사이드바 분류 '{label}' 펼치기",
+    "description": "The ARIA label to expand the sidebar category"
+  },
+  "theme.DocSidebarItem.collapseCategoryAriaLabel": {
+    "message": "사이드바 분류 '{label}' 접기",
+    "description": "The ARIA label to collapse the sidebar category"
+  },
+  "theme.IconExternalLink.ariaLabel": {
+    "message": "(opens in new tab)",
+    "description": "The ARIA label for the external link icon"
+  },
+  "theme.navbar.mobileLanguageDropdown.label": {
+    "message": "언어",
+    "description": "The label for the mobile language switcher dropdown"
+  },
+  "theme.NavBar.navAriaLabel": {
+    "message": "메인",
+    "description": "The ARIA label for the main navigation"
+  },
+  "theme.NotFound.p1": {
+    "message": "원하는 페이지를 찾을 수 없습니다.",
+    "description": "The first paragraph of the 404 page"
+  },
+  "theme.NotFound.p2": {
+    "message": "사이트 관리자에게 링크가 깨진 것을 알려주세요.",
+    "description": "The 2nd paragraph of the 404 page"
+  },
+  "theme.TOCCollapsible.toggleButtonLabel": {
+    "message": "이 페이지에서",
+    "description": "The label used by the button on the collapsible TOC component"
+  },
+  "theme.blog.post.readMore": {
+    "message": "자세히 보기",
+    "description": "The label used in blog post item excerpts to link to full blog posts"
+  },
+  "theme.blog.post.readMoreLabel": {
+    "message": "{title} 에 대해 더 읽어보기",
+    "description": "The ARIA label for the link to full blog posts from excerpts"
+  },
+  "theme.blog.post.readingTime.plurals": {
+    "message": "약 {readingTime}분",
+    "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.CodeBlock.copy": {
+    "message": "복사",
+    "description": "The copy button label on code blocks"
+  },
+  "theme.CodeBlock.copied": {
+    "message": "복사했습니다",
+    "description": "The copied button label on code blocks"
+  },
+  "theme.CodeBlock.copyButtonAriaLabel": {
+    "message": "클립보드에 코드 복사",
+    "description": "The ARIA label for copy code blocks button"
+  },
+  "theme.CodeBlock.wordWrapToggle": {
+    "message": "줄 바꿈 전환",
+    "description": "The title attribute for toggle word wrapping button of code block lines"
+  },
+  "theme.docs.breadcrumbs.home": {
+    "message": "홈",
+    "description": "The ARIA label for the home page in the breadcrumbs"
+  },
+  "theme.docs.sidebar.collapseButtonTitle": {
+    "message": "사이드바 숨기기",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.collapseButtonAriaLabel": {
+    "message": "사이드바 숨기기",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.navAriaLabel": {
+    "message": "문서 사이드바",
+    "description": "The ARIA label for the sidebar navigation"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": {
+    "message": "Expand the dropdown",
+    "description": "The ARIA label of the button to expand the mobile dropdown navbar item"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": {
+    "message": "Collapse the dropdown",
+    "description": "The ARIA label of the button to collapse the mobile dropdown navbar item"
+  },
+  "theme.docs.sidebar.closeSidebarButtonAriaLabel": {
+    "message": "사이드바 닫기",
+    "description": "The ARIA label for close button of mobile sidebar"
+  },
+  "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+    "message": "← 메인 메뉴로 돌아가기",
+    "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+  },
+  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+    "message": "사이드바 펼치거나 접기",
+    "description": "The ARIA label for hamburger menu button of mobile navigation"
+  },
+  "theme.docs.sidebar.expandButtonTitle": {
+    "message": "사이드바 열기",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.sidebar.expandButtonAriaLabel": {
+    "message": "사이드바 열기",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.SearchBar.seeAll": {
+    "message": "{count}개의 결과 확인하기"
+  },
+  "theme.SearchPage.documentsFound.plurals": {
+    "message": "{count}개의 문서를 찾았습니다.",
+    "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.SearchPage.existingResultsTitle": {
+    "message": "\"{query}\" 검색 결과",
+    "description": "The search page title for non-empty query"
+  },
+  "theme.SearchPage.emptyResultsTitle": {
+    "message": "문서를 검색합니다.",
+    "description": "The search page title for empty query"
+  },
+  "theme.SearchPage.inputPlaceholder": {
+    "message": "검색어를 입력하세요.",
+    "description": "The placeholder for search page input"
+  },
+  "theme.SearchPage.inputLabel": {
+    "message": "검색",
+    "description": "The ARIA label for search page input"
+  },
+  "theme.SearchPage.algoliaLabel": {
+    "message": "Algolia 제공",
+    "description": "The description label for Algolia mention"
+  },
+  "theme.SearchPage.noResultsText": {
+    "message": "검색 결과가 없습니다.",
+    "description": "The paragraph for empty search result"
+  },
+  "theme.SearchPage.fetchingNewResults": {
+    "message": "새로운 검색 결과를 불러오는 중입니다.",
+    "description": "The paragraph for fetching new search results"
+  },
+  "theme.SearchBar.label": {
+    "message": "검색",
+    "description": "The ARIA label and placeholder for search button"
+  },
+  "theme.SearchModal.searchBox.resetButtonTitle": {
+    "message": "검색어 초기화",
+    "description": "The label and ARIA label for search box reset button"
+  },
+  "theme.SearchModal.searchBox.cancelButtonText": {
+    "message": "취소",
+    "description": "The label and ARIA label for search box cancel button"
+  },
+  "theme.SearchModal.searchBox.placeholderText": {
+    "message": "문서 검색",
+    "description": "The placeholder text for the main search input field"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAi": {
+    "message": "다른 질문하기...",
+    "description": "The placeholder text when in AI question mode"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": {
+    "message": "답변 중...",
+    "description": "The placeholder text for search box when AI is streaming an answer"
+  },
+  "theme.SearchModal.searchBox.enterKeyHint": {
+    "message": "검색",
+    "description": "The hint for the search box enter key text"
+  },
+  "theme.SearchModal.searchBox.enterKeyHintAskAi": {
+    "message": "입력",
+    "description": "The hint for the Ask AI search box enter key text"
+  },
+  "theme.SearchModal.searchBox.searchInputLabel": {
+    "message": "검색",
+    "description": "The ARIA label for search input"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonText": {
+    "message": "키워드 검색으로 돌아가기",
+    "description": "The text for back to keyword search button"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": {
+    "message": "키워드 검색으로 돌아가기",
+    "description": "The ARIA label for back to keyword search button"
+  },
+  "theme.SearchModal.startScreen.recentSearchesTitle": {
+    "message": "최근",
+    "description": "The title for recent searches"
+  },
+  "theme.SearchModal.startScreen.noRecentSearchesText": {
+    "message": "최근 검색어 없음",
+    "description": "The text when there are no recent searches"
+  },
+  "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
+    "message": "이 검색어를 저장",
+    "description": "The title for save recent search button"
+  },
+  "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
+    "message": "이 검색어를 최근 검색어에서 삭제",
+    "description": "The title for remove recent search button"
+  },
+  "theme.SearchModal.startScreen.favoriteSearchesTitle": {
+    "message": "즐겨찾기",
+    "description": "The title for favorite searches"
+  },
+  "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
+    "message": "이 검색어를 즐겨찾기에서 삭제",
+    "description": "The title for remove favorite search button"
+  },
+  "theme.SearchModal.startScreen.recentConversationsTitle": {
+    "message": "최근 대화",
+    "description": "The title for recent conversations"
+  },
+  "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": {
+    "message": "이 대화를 기록에서 삭제",
+    "description": "The title for remove recent conversation button"
+  },
+  "theme.SearchModal.errorScreen.titleText": {
+    "message": "결과를 불러올 수 없음",
+    "description": "The title for error screen"
+  },
+  "theme.SearchModal.errorScreen.helpText": {
+    "message": "인터넷 연결을 다시 확인하시기 바랍니다.",
+    "description": "The help text for error screen"
+  },
+  "theme.SearchModal.resultsScreen.askAiPlaceholder": {
+    "message": "AI에게 질문: ",
+    "description": "The placeholder text for Ask AI input"
+  },
+  "theme.SearchModal.askAiScreen.disclaimerText": {
+    "message": "답변은 AI가 생성하며 오류가 있을 수 있습니다. 응답을 확인해주세요.",
+    "description": "The disclaimer text for AI answers"
+  },
+  "theme.SearchModal.askAiScreen.relatedSourcesText": {
+    "message": "관련 출처",
+    "description": "The text for related sources"
+  },
+  "theme.SearchModal.askAiScreen.thinkingText": {
+    "message": "생각 중...",
+    "description": "The text when AI is thinking"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonText": {
+    "message": "복사",
+    "description": "The text for copy button"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonCopiedText": {
+    "message": "복사됨!",
+    "description": "The text for copy button when copied"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonTitle": {
+    "message": "복사",
+    "description": "The title for copy button"
+  },
+  "theme.SearchModal.askAiScreen.likeButtonTitle": {
+    "message": "좋아요",
+    "description": "The title for like button"
+  },
+  "theme.SearchModal.askAiScreen.dislikeButtonTitle": {
+    "message": "싫어요",
+    "description": "The title for dislike button"
+  },
+  "theme.SearchModal.askAiScreen.thanksForFeedbackText": {
+    "message": "피드백 감사합니다!",
+    "description": "The text for thanks for feedback"
+  },
+  "theme.SearchModal.askAiScreen.preToolCallText": {
+    "message": "검색 중...",
+    "description": "The text before tool call"
+  },
+  "theme.SearchModal.askAiScreen.duringToolCallText": {
+    "message": "검색 중: ",
+    "description": "The text during tool call"
+  },
+  "theme.SearchModal.askAiScreen.afterToolCallText": {
+    "message": "검색 완료: ",
+    "description": "The text after tool call"
+  },
+  "theme.SearchModal.footer.selectText": {
+    "message": "로 선택",
+    "description": "The select text for footer"
+  },
+  "theme.SearchModal.footer.submitQuestionText": {
+    "message": "질문 제출",
+    "description": "The submit question text for footer"
+  },
+  "theme.SearchModal.footer.selectKeyAriaLabel": {
+    "message": "엔터 키",
+    "description": "The ARIA label for select key in footer"
+  },
+  "theme.SearchModal.footer.navigateText": {
+    "message": "로 이동",
+    "description": "The navigate text for footer"
+  },
+  "theme.SearchModal.footer.navigateUpKeyAriaLabel": {
+    "message": "화살표 위 키",
+    "description": "The ARIA label for navigate up key in footer"
+  },
+  "theme.SearchModal.footer.navigateDownKeyAriaLabel": {
+    "message": "화살표 아래 키",
+    "description": "The ARIA label for navigate down key in footer"
+  },
+  "theme.SearchModal.footer.closeText": {
+    "message": "로 종료",
+    "description": "The close text for footer"
+  },
+  "theme.SearchModal.footer.closeKeyAriaLabel": {
+    "message": "Esc 키",
+    "description": "The ARIA label for close key in footer"
+  },
+  "theme.SearchModal.footer.searchByText": {
+    "message": "검색 제공",
+    "description": "The 'Powered by' text for footer"
+  },
+  "theme.SearchModal.footer.backToSearchText": {
+    "message": "검색으로 돌아가기",
+    "description": "The back to search text for footer"
+  },
+  "theme.SearchModal.noResultsScreen.noResultsText": {
+    "message": "검색 결과 없음",
+    "description": "The text when there are no results"
+  },
+  "theme.SearchModal.noResultsScreen.suggestedQueryText": {
+    "message": "다른 추천 검색어",
+    "description": "The text for suggested query"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsText": {
+    "message": "검색 결과가 없는 것이 오류라고 생각되십니까?",
+    "description": "The text for reporting missing results"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
+    "message": "알려주시기 바랍니다.",
+    "description": "The link text for reporting missing results"
+  },
+  "theme.SearchModal.placeholder": {
+    "message": "문서 검색",
+    "description": "The placeholder of the input of the DocSearch pop-up modal"
+  },
+  "theme.blog.post.plurals": {
+    "message": "{count}개 게시물",
+    "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.tagTitle": {
+    "message": "\"{tagName}\" 태그로 연결된 {nPosts}개의 게시물이 있습니다.",
+    "description": "The title of the page for a blog tag"
+  },
+  "theme.blog.author.pageTitle": {
+    "message": "{authorName} - {nPosts}",
+    "description": "The title of the page for a blog author"
+  },
+  "theme.blog.authorsList.pageTitle": {
+    "message": "저자",
+    "description": "The title of the authors page"
+  },
+  "theme.blog.authorsList.viewAll": {
+    "message": "모든 저자 보기",
+    "description": "The label of the link targeting the blog authors page"
+  },
+  "theme.blog.author.noPosts": {
+    "message": "작성자가 아직 게시글을 작성하지 않았습니다.",
+    "description": "The text for authors with 0 blog post"
+  },
+  "theme.contentVisibility.unlistedBanner.title": {
+    "message": "색인되지 않은 문서",
+    "description": "The unlisted content banner title"
+  },
+  "theme.contentVisibility.unlistedBanner.message": {
+    "message": "이 문서는 색인되지 않습니다. 검색 엔진이 이 문서를 색인하지 않으며, 주소를 알고 있는 사용자만 접근할 수 있습니다.",
+    "description": "The unlisted content banner message"
+  },
+  "theme.contentVisibility.draftBanner.title": {
+    "message": "작성 중인 페이지",
+    "description": "The draft content banner title"
+  },
+  "theme.contentVisibility.draftBanner.message": {
+    "message": "이 페이지는 아직 작성 중입니다. 개발 환경에서만 보이며 프로덕션 빌드에서는 제외됩니다.",
+    "description": "The draft content banner message"
+  },
+  "theme.ErrorPageContent.tryAgain": {
+    "message": "다시 시도해 보세요",
+    "description": "The label of the button to try again rendering when the React error boundary captures an error"
+  },
+  "theme.common.skipToMainContent": {
+    "message": "본문으로 건너뛰기",
+    "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+  },
+  "theme.tags.tagsPageTitle": {
+    "message": "태그",
+    "description": "The title of the tag list page"
+  }
+}
diff --git a/i18n/ko/docusaurus-plugin-content-blog/options.json b/i18n/ko/docusaurus-plugin-content-blog/options.json
new file mode 100644
index 0000000..9239ff7
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-blog/options.json
@@ -0,0 +1,14 @@
+{
+  "title": {
+    "message": "Blog",
+    "description": "The title for the blog used in SEO"
+  },
+  "description": {
+    "message": "Blog",
+    "description": "The description for the blog used in SEO"
+  },
+  "sidebar.title": {
+    "message": "Recent posts",
+    "description": "The label for the left sidebar"
+  }
+}
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current.json b/i18n/ko/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 0000000..55c389d
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,62 @@
+{
+  "version.label": {
+    "message": "Next",
+    "description": "The label for version current"
+  },
+  "sidebar.docs.category.What's new and migration": {
+    "message": "새 소식 및 마이그레이션",
+    "description": "The label for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.What's new and migration.link.generated-index.title": {
+    "message": "새 소식 및 마이그레이션",
+    "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.API": {
+    "message": "API",
+    "description": "The label for category 'API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText methods": {
+    "message": "RichText 메서드",
+    "description": "The label for category 'RichText methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API": {
+    "message": "RichText 내부 API",
+    "description": "The label for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API.link.generated-index.title": {
+    "message": "내부 API 개요",
+    "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Event Bus methods": {
+    "message": "Event Bus 메서드",
+    "description": "The label for category 'Event Bus methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.State methods": {
+    "message": "상태 메서드",
+    "description": "The label for category 'State methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText events": {
+    "message": "RichText 이벤트",
+    "description": "The label for category 'RichText events' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText properties": {
+    "message": "RichText 속성",
+    "description": "The label for category 'RichText properties' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks": {
+    "message": "프레임워크 통합",
+    "description": "The label for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks.link.generated-index.title": {
+    "message": "프레임워크 통합",
+    "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides": {
+    "message": "가이드",
+    "description": "The label for category 'Guides' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides.link.generated-index.title": {
+    "message": "가이드",
+    "description": "The generated-index page title for category 'Guides' in sidebar 'docs'"
+  }
+}
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/default-styles.md
new file mode 100644
index 0000000..0e77466
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/default-styles.md
@@ -0,0 +1,144 @@
+---
+sidebar_label: defaultStyles
+title: defaultStyles 설정
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 defaultStyles 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요.
+---
+
+# defaultStyles
+
+### 설명 {#description}
+
+@short: 선택 사항. 특정 블록 유형에 대한 기본 스타일 값을 지정합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+defaultStyles?: {
+    "*"?: { // 모든 블록에 영향을 주며, 공통 속성을 설정할 수 있습니다
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+:::important[중요]
+`defaultStyles` 속성은 영향을 받는 블록에 실제 CSS를 적용하지 **않습니다**. CSS 스타일은 별도로 적용해야 합니다:
+
+```jsx title="index.js"
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+<style>
+    #root h2 {
+        font-family: Roboto;
+        font-size: 28px;
+        color: purple;
+        background: #FFC0CB;
+    }
+</style>
+```
+
+이 예제에서는 모든 `h2` 블록에 `"Roboto"` 폰트 패밀리, 28px 폰트 크기, 그리고 전경색과 배경색이 함께 적용됩니다. CSS 스타일도 `h2` 블록에 함께 적용됩니다.
+:::
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+const defaultStyles = {
+    "*": { "font-family": "Arial" },
+    p: { "font-size": "14px" },
+    blockquote: { "font-size": "14px" },
+    h1: { "font-size": "32px" },
+    h2: { "font-size": "24px" },
+    h3: { "font-size": "18px" },
+    h4: { "font-size": "16px" },
+    h5: { "font-size": "14px" },
+    h6: { "font-size": "12px" }
+};
+~~~
+
+### 예제 {#example}
+
+~~~jsx {3-13}
+// RichText 초기화
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        h5: {
+            "font-family": "Roboto"
+        },
+        h6: {
+            "font-family": "Roboto"
+        }
+    },
+    // 기타 설정 속성
+});
+~~~
+
+**변경 이력:** 이 속성은 v2.0에서 업데이트되었습니다
+
+**관련 문서:** [Configuration](guides/configuration.md)
+
+**관련 예제:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
new file mode 100644
index 0000000..3bf1f29
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: fullscreenMode
+title: fullscreenMode 설정
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 fullscreenMode 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요.
+---
+
+# fullscreenMode
+
+### 설명 {#description}
+
+@short: 선택 사항. RichText 전체화면 모드를 활성화합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+fullscreenMode?: boolean;
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+fullscreenMode: false;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {3}
+// RichText 초기화
+new richtext.Richtext("#root", {
+    fullscreenMode: true
+    // 기타 설정 속성
+});
+~~~
+
+**변경 이력:** 이 속성은 v2.0에서 추가되었습니다
+
+**관련 문서:** [Configuration](guides/configuration.md)
+
+**관련 예제:** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7?tag=richtext)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
new file mode 100644
index 0000000..0ec5e7b
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: imageUploadUrl
+title: imageUploadUrl 설정
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 imageUploadUrl 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요.
+---
+
+# imageUploadUrl
+
+### 설명 {#description}
+
+@short: 선택 사항. 이미지 업로드에 사용할 URL을 지정합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+imageUploadUrl?: string;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {3}
+// RichText 초기화
+new richtext.Richtext("#root", {
+    imageUploadUrl: "some URL"
+    // 기타 설정 속성
+});
+~~~
+
+**변경 이력:** 이 속성은 v2.0에서 추가되었습니다
+
+**관련 문서:** [Configuration](guides/configuration.md)
+
+**관련 예제:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
new file mode 100644
index 0000000..f9f0db8
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: layoutMode
+title: layoutMode 설정
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 layoutMode 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요.
+---
+
+# layoutMode
+
+### 설명 {#description}
+
+@short: 선택 사항. 메인 에디터 영역의 레이아웃 모드를 지정합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+layoutMode: "classic" | "document";
+~~~
+
+`"classic"` 모드는 전체 페이지에 맞는 편집 영역을 나타냅니다. `"document"` 모드는 실제 문서 크기(A4, A5, A6, A7 사이즈 사용)에 가깝게 표현합니다.
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+layoutMode: "classic";
+~~~
+
+### 예제 {#example}
+
+~~~jsx {3}
+// RichText 초기화
+new richtext.Richtext("#root", {
+    layoutMode: "document"  // 기본적으로 "document" 모드로 RichText를 초기화합니다
+    // 기타 설정 속성
+});
+~~~
+
+**변경 이력:** 이 속성은 v2.0에서 제거된 `mode` 속성 대신 추가되었습니다
+
+**관련 문서:** [Configuration](guides/configuration.md)
+
+**관련 예제:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/locale.md
new file mode 100644
index 0000000..4cecbde
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/locale.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: locale
+title: locale 설정
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 locale 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요.
+---
+
+# locale
+
+### 설명 {#description}
+
+@short: 선택 사항. RichText의 현지화 레이블을 포함하는 객체입니다
+
+:::info[정보]
+**locale** 객체에는 RichText의 모든 레이블과 해당 번역이 포함되어야 합니다.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx {}
+locale?: object;
+~~~
+
+### 기본 설정 {#default-config}
+
+기본적으로 RichText는 **영어** 로케일을 사용합니다. 사용자 정의 로케일로 설정할 수도 있습니다.
+
+:::tip[팁]
+현재 로케일을 동적으로 변경하려면 RichText의 [**setLocale()**](api/methods/set-locale.md) 메서드를 사용할 수 있습니다
+:::
+
+### 예제 {#example}
+
+~~~jsx {3}
+// RichText 초기화
+const editor = new richtext.RichText("#root", {
+    locale: richtext.locales.cn // 중국어 로케일을 초기값으로 설정합니다
+    // locale: richtext.locales.en // 영어 로케일을 초기값으로 설정합니다
+    // locale: richtext.locales.de // 독일어 로케일을 초기값으로 설정합니다
+    // 기타 설정 속성
+});
+~~~
+
+**변경 이력:** 이 속성은 v2.0에서 추가되었습니다
+
+**관련 문서:** [Localization](guides/localization.md)
+
+**관련 예제:** [RichText. Localization](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/menubar.md
new file mode 100644
index 0000000..ee62886
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/menubar.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: menubar
+title: menubar 설정
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 menubar 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요.
+---
+
+# menubar
+
+### 설명 {#description}
+
+@short: 선택 사항. RichText 상단 메뉴바를 활성화합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+menubar?: boolean;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {3}
+// RichText 초기화
+new richtext.Richtext("#root", {
+    menubar: true
+    // 기타 설정 속성
+});
+~~~
+
+**변경 이력:** 이 속성은 v2.0에서 추가되었습니다
+
+**관련 문서:** [Configuration](guides/configuration.md)
+
+**관련 예제:** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7?tag=richtext)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/toolbar.md
new file mode 100644
index 0000000..ac62b98
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/toolbar.md
@@ -0,0 +1,219 @@
+---
+sidebar_label: toolbar
+title: toolbar 설정
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 toolbar 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요.
+---
+
+# toolbar
+
+### 설명 {#description}
+
+@short: 선택 사항. 툴바를 활성화하고 툴바에 표시할 버튼을 지정 및 설정할 수 있습니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+toolbar?: boolean | Array<string | { id: string, type: string, label?: string, tooltip?: string, css?: string, handler?: () => any }>;
+~~~
+
+#### 툴바에서 사용 가능한 버튼 {#available-buttons-within-toolbar}
+
+RichText 툴바에서 다음 버튼을 지정할 수 있습니다:
+
+| 버튼                | 설명                                                                        |
+|---------------------|-----------------------------------------------------------------------------|
+| `undo`              | 가장 최근의 사용자 동작을 되돌립니다.                                        |
+| `redo`              | 이전에 취소한 동작을 다시 적용합니다.                                        |
+| `style`             | 텍스트 스타일(예: 제목, 단락 등)을 선택할 수 있습니다.                       |
+| `font-family`       | 선택한 텍스트의 폰트를 변경합니다.                                           |
+| `font-size`         | 선택한 텍스트의 크기를 조정합니다.                                           |
+| `bold`              | 선택한 텍스트에 굵게 서식을 적용합니다.                                      |
+| `italic`            | 선택한 텍스트에 기울임꼴 서식을 적용합니다.                                  |
+| `underline`         | 선택한 텍스트에 밑줄을 표시합니다.                                           |
+| `strike`            | 취소선 서식을 적용합니다.                                                    |
+| `subscript`         | 텍스트를 아래 첨자로 서식을 지정합니다.                                      |
+| `superscript`       | 텍스트를 위 첨자로 서식을 지정합니다.                                        |
+| `text-color`        | 텍스트 색상을 변경합니다.                                                    |
+| `background-color`  | 텍스트의 배경(강조) 색상을 변경합니다.                                       |
+| `align`             | 텍스트 정렬을 설정합니다(왼쪽, 가운데, 오른쪽, 양쪽 맞춤).                  |
+| `indent`            | 텍스트 블록의 들여쓰기를 증가시킵니다.                                       |
+| `outdent`           | 단락의 들여쓰기를 감소시킵니다.                                              |
+| `line-height`       | 줄 간격(행 높이)을 조정합니다.                                               |
+| `quote`             | 텍스트를 인용구로 서식을 지정합니다.                                         |
+| `bulleted-list`     | 글머리 기호 목록을 생성합니다.                                               |
+| `numbered-list`     | 번호 매기기 목록을 생성합니다.                                               |
+| `link`              | 하이퍼링크를 삽입합니다.                                                     |
+| `image`             | 이미지를 삽입합니다.                                                         |
+| `line`              | 가로 구분선을 삽입합니다.                                                    |
+| `clear`             | 선택한 텍스트의 모든 서식을 제거합니다.                                      |
+| `print`             | 인쇄 대화상자를 엽니다.                                                      |
+| `fullscreen`        | 전체화면 모드를 전환합니다.                                                  |
+| `mode`              | [레이아웃 모드](api/config/layout-mode.md)를 전환합니다(classic/document)    |
+| `shortcuts`         | 사용 가능한 키보드 단축키 목록을 표시합니다.                                 |
+| `separator`         | 툴바 그룹 사이에 시각적 구분선을 추가합니다.                                 |
+
+다음과 같이 이 문자열들을 사용하여 툴바 버튼을 설정할 수 있습니다:
+
+~~~jsx {2-7}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // 기타 버튼
+    ],
+    // 기타 설정 속성
+});
+~~~
+
+#### 툴바의 사용자 정의 버튼 {#custom-buttons-within-toolbar}
+
+사용자 정의 버튼을 다음 매개변수를 가진 객체로 지정할 수 있습니다:
+
+- `type` - (필수) 사용자 정의 컨트롤 유형을 지정합니다. 사용 가능한 유형: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` - (선택) 사용자 정의 컨트롤 ID (기존 컨트롤 ID와 중복 불가)
+- `label` - (선택) 버튼 레이블 (아이콘과 결합됨)
+- `tooltip` - (선택) 마우스를 올렸을 때 표시되는 툴팁 (지정하지 않으면 "label" 값이 사용됨)
+- `css` - (선택) 컨트롤에 할당된 CSS 클래스 이름 (기본 지원 클래스: wx-primary, wx-secondary)
+- `handler` - (선택) 버튼 클릭 시 실행되는 콜백 함수
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // 버튼 (문자열은 버튼만 나타냄)
+        "bold",
+        "italic",
+        // 사전 정의된 버튼 (레이블, 툴팁, 옵션 등을 정의할 수 없으므로 ({ type: "button", id: string })만 사용 가능)
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // 사전 정의된 컨트롤을 사용하려면 올바른 type을 지정해야 함 (예: richselect/colorpicker)
+        // 일치하지 않는 type은 무시됨 (툴바에 추가되지 않음)
+        {
+            type: "richselect", // type: "button" - 잘못된 유형으로 무시됨
+            id: "mode",
+        },
+        // 사용자 정의 버튼 (아래에 지원되는 옵션이 있음)
+        // 현재 사용자 정의 버튼만 정의 가능 (richselect/colorpicker 미지원)
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* 사용자 정의 로직 */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* 사용자 정의 로직 */}
+        }
+    ],
+    // 기타 설정 속성
+});
+~~~
+
+#### 툴바 숨기기 {#hide-toolbar}
+
+툴바를 숨기려면 다음과 같이 `toolbar` 속성을 `false`로 설정하세요:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false
+    // 기타 설정 속성
+});
+~~~
+
+### 기본 설정 {#default-config}
+
+~~~jsx
+const defaultToolbarButtons = {
+    "undo",
+    "redo",
+    "separator",
+    "style",
+    "separator",
+    "font-family",
+    "font-size",
+    "separator",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "separator",
+    "text-color",
+    "background-color",
+    "separator",
+    "align",
+    "line-height",
+    "outdent",
+    "indent",
+    "separator",
+    "bulleted-list",
+    "numbered-list",
+    "quote",
+    "separator",
+    "link",
+    "image",
+    "separator",
+    "clear",
+    "separator",
+    "fullscreen",
+    "mode"
+};
+~~~
+
+:::tip[팁]
+기본 툴바 컨트롤은 RichText 위젯에서 내보내며 `richtext.defaultToolbarButtons`를 통해 접근할 수 있습니다.
+
+```jsx{4}
+// RichText 초기화
+new richtext.Richtext("#root", {
+    toolbar: [
+        ...richtext.defaultToolbarButtons,
+        {
+            type: "button",
+            id: "btn1", // 버튼 ID (사용자 정의 로직을 적용하려면 기존 버튼 ID와 중복 불가)
+            icon: "wxo-help", // 버튼 아이콘 (레이블과 결합됨)
+            css: "rounded", // 컨트롤에 할당된 CSS 클래스 이름 (기본 지원 클래스: wx-primary, wx-secondary)
+            label: "Custom button", // 버튼 레이블 (아이콘과 결합됨)
+            tooltip: "Some tooltip", // 마우스를 올렸을 때 표시되는 툴팁 (지정하지 않으면 "label" 값이 사용됨)
+        }
+    ]
+    // 기타 설정 속성
+});
+```
+:::
+
+### 예제 {#example}
+
+~~~jsx {3-18}
+// RichText 초기화
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // 사용자 정의 버튼 (아래에 지원되는 모든 옵션이 사용됨)
+        // 현재 사용자 정의 버튼만 정의 가능 (richselect/colorpicker 미지원)
+        {
+            type: "button",
+            id: "btn1", // 버튼 ID (사용자 정의 로직을 적용하려면 기존 버튼 ID와 중복 불가)
+            icon: "wxo-help", // 버튼 아이콘 (레이블과 결합됨)
+            css: "rounded", // 컨트롤에 할당된 CSS 클래스 이름 (기본 지원 클래스: wx-primary, wx-secondary)
+            label: "Custom button", // 버튼 레이블 (아이콘과 결합됨)
+            tooltip: "Some tooltip", // 마우스를 올렸을 때 표시되는 툴팁 (지정하지 않으면 "label" 값이 사용됨)
+            handler: () => ..., // 이 버튼에 연결된 사용자 정의 로직
+        }
+    ]
+    // 기타 설정 속성
+});
+~~~
+
+**변경 이력:** 이 속성은 v2.0에서 추가되었습니다
+
+**관련 문서:** [Configuration](guides/configuration.md)
+
+**관련 예제:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/value.md
new file mode 100644
index 0000000..86b7ead
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/value.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: value
+title: value 설정
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 value 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요.
+---
+
+# value
+
+### 설명 {#description}
+
+@short: 선택 사항. RichText 에디터 영역에 표시될 초기 값(콘텐츠)을 지정합니다
+
+:::tip[팁]
+사용자 정의 형식을 사용하여 값(콘텐츠)을 설정하려면 내장 [`setValue()`](api/methods/set-value.md) 메서드를 사용하세요.
+:::
+
+### 사용법 {#usage}
+
+~~~jsx {}
+value?: string;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    value: "<h1>some value</h1>" // 기본값을 설정합니다(HTML 형식)
+    // 기타 설정 속성
+});
+~~~
+
+**변경 이력:** 이 속성은 v2.0에서 추가되었습니다
+
+**관련 문서:** [Configuration](guides/configuration.md)
+
+**관련 예제:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/align.md
new file mode 100644
index 0000000..d99fe15
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/align.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: align
+title: align 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 align 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# align
+
+### 설명 {#description}
+
+@short: 메뉴바/툴바 또는 Event Bus 메서드를 통해 텍스트 정렬이 변경될 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"align": ({
+    align: "left" | "center" | "right" | "justify"
+}) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**align** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `align` - 텍스트 정렬 방식입니다. 다음 값 중 하나를 지정할 수 있습니다: `"left" | "center" | "right" | "justify"`
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-12}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "align" 이벤트 구독
+editor.api.on("align", (obj) => {
+    console.log(`Align to: ${obj.align}`);
+});
+// 텍스트를 왼쪽으로 정렬
+editor.api.exec("align", {
+    align: "left"
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
new file mode 100644
index 0000000..dbc2e3d
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: clear-text-format
+title: clear-text-format 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 clear-text-format 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# clear-text-format
+
+### 설명 {#description}
+
+@short: 메뉴바/툴바 또는 Event Bus 메서드를 통해 텍스트 형식이 초기화될 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"clear-text-format": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-10}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "clear-text-format" 이벤트 구독
+editor.api.on("clear-text-format", () => {
+    console.log("Text format was cleared");
+});
+// 텍스트 형식 초기화
+editor.api.exec("clear-text-format", {});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/copy.md
new file mode 100644
index 0000000..998eecd
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/copy.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: copy
+title: copy 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 copy 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# copy
+
+### 설명 {#description}
+
+@short: 선택한 텍스트를 복사할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"copy": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "copy" 이벤트 구독
+editor.api.on("copy", () => {
+    console.log("Selected text was copied");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/create-new.md
new file mode 100644
index 0000000..b7ab83a
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/create-new.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: create-new
+title: create-new 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 create-new 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# create-new
+
+### 설명 {#description}
+
+@short: 메뉴바에서 "New" 옵션을 누르거나 Event Bus 메서드를 통해 실행할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"create-new": ({ reset?: boolean }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**create-new** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `reset` - 새 파일을 생성할 때 히스토리를 초기화합니다
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-10}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "create-new" 이벤트 구독
+editor.api.on("create-new", ({ reset }) => {
+    console.log(`Document has been cleared. History has ${reset ? "" : "not"} been reset.`);
+});
+// 새 파일 생성 및 히스토리 초기화
+editor.api.exec("create-new", { reset: true });
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/cut.md
new file mode 100644
index 0000000..c31e5e3
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/cut.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: cut
+title: cut 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 cut 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# cut
+
+### 설명 {#description}
+
+@short: 선택한 텍스트를 잘라낼 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"cut": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "cut" 이벤트 구독
+editor.api.on("cut", () => {
+    console.log("Selected text was cut");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/delete-link.md
new file mode 100644
index 0000000..43473d5
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/delete-link.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: delete-link
+title: delete-link 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 delete-link 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# delete-link
+
+### 설명 {#description}
+
+@short: 링크를 삭제할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"delete-link": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "delete-link" 이벤트 구독
+editor.api.on("delete-link", () => {
+    console.log("The link was deleted");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/export.md
new file mode 100644
index 0000000..f430283
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/export.md
@@ -0,0 +1,59 @@
+---
+sidebar_label: export
+title: export 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 export 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# export
+
+### 설명 {#description}
+
+@short: 메뉴바에서 "Export" 옵션을 누르거나 Event Bus 메서드를 통해 실행한 후 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"export": ({ options: IExportOptions; result?: any }) => boolean | void;
+
+interface IExportOptions {
+    format?: "docx" | "pdf";
+    url?: string;
+    download?: boolean;
+    fileName?: string;
+}
+~~~
+
+### 매개변수 {#parameters}
+
+**export** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `format` - 파일 형식
+- `url` - 파일 내보내기의 기본 URL
+- `download` - 서버 응답을 받은 후 파일을 다운로드할지 여부를 지정합니다. 이 속성을 `"false"`로 설정하면 파일이 다운로드되지 않으며, 대신 이벤트 객체에서 blob 데이터를 가져올 수 있습니다(이벤트 정의의 `result` 속성 참조)
+- `fileName` - 내보낼 파일 이름
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-15}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "export" 이벤트 구독
+editor.api.on("export", (obj) => {
+    console.log(obj);
+    console.log("The file was exported");
+});
+// 값을 pdf 파일로 내보내기
+editor.api.exec("export", {
+    format: "pdf",
+    download: false,
+    fileName: "some file"
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/import.md
new file mode 100644
index 0000000..1033a3b
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/import.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: import
+title: import 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 import 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# import
+
+### 설명 {#description}
+
+@short: 메뉴바에서 "Import" 옵션을 누르거나 Event Bus 메서드를 통해 실행한 후 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"import": ({ html?: string }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**import** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `html` - HTML 형식의 텍스트 값
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-13}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "import" 이벤트 구독
+editor.api.on("import", (obj) => {
+    console.log(obj.html);
+    console.log("The new value was imported");
+});
+// 새 값 가져오기
+editor.api.exec("import", {
+    html: "<h2>some value</h2>" // simply calls setValue
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md
new file mode 100644
index 0000000..6526ff4
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: indent
+title: indent 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 indent 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# indent
+
+### 설명 {#description}
+
+@short: 블록 들여쓰기를 증가시킬 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"indent": ({ step: number }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**indent** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `step` - 들여쓰기가 증가한 단계 값
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "indent" 이벤트 구독
+editor.api.on("indent", (obj) => {
+    console.log(obj);
+    console.log("The indention was increased");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md
new file mode 100644
index 0000000..36fb2b8
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: insert-image
+title: insert-image 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-image 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# insert-image
+
+### 설명 {#description}
+
+@short: 이미지를 삽입할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"insert-image": (IImageContext) => boolean | void;
+
+interface IImageContext {
+    id: TID;
+    value: string;
+    width: number;
+    height: number;
+    // extra props from uploader ctx, not required for the actual action
+    name?: string;
+    file?: File;
+    status?: string;
+    selected: (ctx: IImageContext) => void;
+    uploaded: (ctx: IImageContext) => void;
+}
+~~~
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "insert-image" 이벤트 구독
+editor.api.on("insert-image", (obj) => {
+    console.log(obj);
+    console.log("The image was inserted");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-line.md
new file mode 100644
index 0000000..a4364de
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-line.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: insert-line
+title: insert-line 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-line 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# insert-line
+
+### 설명 {#description}
+
+@short: 수평선을 삽입할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"insert-line": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "insert-line" 이벤트 구독
+editor.api.on("insert-line", () => {
+    console.log("The horizontal line was inserted");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-link.md
new file mode 100644
index 0000000..8e7529a
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-link.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: insert-link
+title: insert-link 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-link 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# insert-link
+
+### 설명 {#description}
+
+@short: 링크를 삽입할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"insert-link": ({ url: string }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**update-link** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `url` - 삽입할 URL
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "insert-link" 이벤트 구독
+editor.api.on("insert-link", (obj) => {
+    console.log(obj)
+    console.log("The following link was inserted: " + obj.url);
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-list.md
new file mode 100644
index 0000000..09ded2e
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-list.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: insert-list
+title: insert-list 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-list 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# insert-list
+
+### 설명 {#description}
+
+@short: 목록을 삽입할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"insert-list": ({ type: TListType }) => boolean | void;
+
+type TListType = "bulleted" | "numbered";
+~~~
+
+### 매개변수 {#parameters}
+
+**insert-list** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `type` - 삽입되는 목록의 유형입니다. 다음 값을 지정할 수 있습니다:
+    - `"bulleted"` - 글머리 기호 목록
+    - `"numbered"` - 번호 목록
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "insert-list" 이벤트 구독
+editor.api.on("insert-list", (obj) => {
+    console.log(obj.type);
+    console.log("The list was inserted");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/outdent.md
new file mode 100644
index 0000000..52d4c18
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/outdent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: outdent
+title: outdent 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 outdent 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# outdent
+
+### 설명 {#description}
+
+@short: 블록 들여쓰기를 감소시킬 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"outdent": ({ step: number }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**outdent** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `step` - 들여쓰기가 감소한 단계 값
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "outdent" 이벤트 구독
+editor.api.on("outdent", (obj) => {
+    console.log(obj);
+    console.log("The indention was decreased");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/paste.md
new file mode 100644
index 0000000..d2106de
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/paste.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: paste
+title: paste 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 paste 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# paste
+
+### 설명 {#description}
+
+@short: 콘텐츠를 붙여넣을 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"paste": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "paste" 이벤트 구독
+editor.api.on("paste", () => {
+    console.log("Content was pasted");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/print.md
new file mode 100644
index 0000000..cdc4c72
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/print.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: print
+title: print 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 print 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# print
+
+### 설명 {#description}
+
+@short: 문서를 인쇄할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"print": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다.
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+// 구성 속성
+});
+// "print" 이벤트 구독
+editor.api.on("print", () => {
+    console.log("The document is printing");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/redo.md
new file mode 100644
index 0000000..136f084
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/redo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: redo
+title: redo 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 redo 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# redo
+
+### 설명 {#description}
+
+@short: 메뉴바/툴바의 "Redo" 버튼을 누르거나 Event Bus 메서드를 통해 호출될 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"redo": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "redo" 이벤트 구독
+editor.api.on("redo", () => {
+    console.log("Redo operation was performed");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/resize-image.md
new file mode 100644
index 0000000..d08d382
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/resize-image.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: resize-image
+title: resize-image 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 resize-image 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# resize-image
+
+### 설명 {#description}
+
+@short: 이미지 크기를 조정할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"resize-image": ({ id: number, width: number, height: number }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**resize-image** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `id` - 이미지 ID
+- `width` - 이미지 너비
+- `height` - 이미지 높이
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+// 구성 속성
+});
+// "resize-image" 이벤트 구독
+editor.api.on("resize-image", (obj) => {
+    console.log(obj);
+    console.log("The image was resized")
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
new file mode 100644
index 0000000..933ab67
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-family
+title: set-font-family 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-font-family 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# set-font-family
+
+### 설명 {#description}
+
+@short: 글꼴 모음을 설정할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"set-font-family": ({ fontFamily: string }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**set-font-family** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `fontFamily` - 적용할 글꼴 모음. 사용 가능한 글꼴: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"`
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-13}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "set-font-family" 이벤트 구독
+editor.api.on("set-font-family", (obj) => {
+    console.log(obj.fontFamily);
+    console.log("The font family was changed");
+});
+// 새 글꼴 모음 적용
+editor.api.exec("set-font-family", {
+    fontFamily: "Roboto"
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
new file mode 100644
index 0000000..83bac18
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-size
+title: set-font-size 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-font-size 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# set-font-size
+
+### 설명 {#description}
+
+@short: 글꼴 크기를 설정할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"set-font-size": ({ fontSize: string }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**set-font-size** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `fontSize` - 적용할 글꼴 크기
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-13}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "set-font-size" 이벤트 구독
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+    console.log("The font size was changed");
+});
+// 새 글꼴 크기 적용
+editor.api.exec("set-font-size", {
+    fontSize: "11px"
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
new file mode 100644
index 0000000..6510790
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-line-height
+title: set-line-height 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-line-height 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# set-line-height
+
+### 설명 {#description}
+
+@short: 줄 높이를 설정할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"set-line-height": ({ lineHeight: string }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**set-line-height** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `lineHeight` - 줄 높이
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-13}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "set-line-height" 이벤트 구독
+editor.api.on("set-line-height", (obj) => {
+    console.log(obj);
+    console.log("The line height was changed");
+});
+// 새 줄 높이 적용
+editor.api.exec("set-line-height", {
+   lineHeight: "15px"
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
new file mode 100644
index 0000000..128e3fb
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: set-text-color
+title: set-text-color 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-text-color 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# set-text-color
+
+### 설명 {#description}
+
+@short: 텍스트 색상 및/또는 텍스트 배경 색상을 설정할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"set-text-color": (ITextColor) => boolean | void;
+
+interface ITextColor {
+    color?: string;
+    background?: string;
+}
+~~~
+
+### 매개변수 {#parameters}
+
+**set-text-color** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `color` - 텍스트 색상
+- `background` - 텍스트 배경 색상
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-14}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "set-text-color" 이벤트 구독
+editor.api.on("set-text-color", (obj) => {
+    console.log(obj);
+    console.log("The text color and/or background text color were changed");
+});
+// 텍스트 색상과 배경 적용
+editor.api.exec("set-text-color", {
+   color: "red",
+   background: "blue"
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
new file mode 100644
index 0000000..b66263a
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: set-text-format
+title: set-text-format 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-text-format 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# set-text-format
+
+### 설명 {#description}
+
+@short: 텍스트 형식을 설정할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"set-text-format": (ITextFormat) => boolean | void;
+
+interface ITextFormat {
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+    underline?: boolean;
+}
+~~~
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 매개변수 {#parameters}
+
+**set-text-format** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `bold` - 굵게 텍스트 형식
+- `italic` - 기울임꼴 텍스트 형식
+- `strike` - 취소선 텍스트 형식
+- `underline` - 밑줄 텍스트 형식
+
+### 예시 {#example}
+
+~~~jsx {5-14}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "set-text-format" 이벤트 구독
+editor.api.on("set-text-format", (obj) => {
+    console.log(obj);
+    console.log("The text format was changed");
+});
+// "italic" 및 bold 텍스트 형식 적용
+editor.api.exec("set-text-format", {
+    italic: true,
+    bold: true
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
new file mode 100644
index 0000000..d2ed8ee
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: set-text-style
+title: set-text-style 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-text-style 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# set-text-style
+
+### 설명 {#description}
+
+@short: 텍스트 스타일을 설정할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"set-text-style": ({ tag: TBlockType }) => boolean | void;
+
+type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+~~~
+
+### 매개변수 {#parameters}
+
+**set-text-style** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `tag` - 텍스트 스타일
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-13}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "set-text-style" 이벤트 구독
+editor.api.on("set-text-style", (obj) => {
+    console.log(obj.tag);
+    console.log("The text style was changed");
+});
+// 새 텍스트 스타일 적용
+editor.api.exec("set-text-style", {
+    tag: "blockquote"
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-popup.md
new file mode 100644
index 0000000..5b80ee1
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-popup.md
@@ -0,0 +1,53 @@
+---
+sidebar_label: show-popup
+title: show-popup 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 show-popup 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# show-popup
+
+### 설명 {#description}
+
+@short: 팝업이 표시되거나 숨겨질 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"show-popup": (IPopupConfig) => boolean | void;
+
+interface IPopupConfig {
+    type: "link" | null;
+    image?: boolean;
+}
+~~~
+
+### 매개변수 {#parameters}
+
+**show-popup** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `type` - 팝업의 유형
+- `image` - 추가 컨텍스트에 대한 접근을 제공합니다 (현재 커서가 이미지를 가리키고 있는지 여부)
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-13}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "show-popup" 이벤트 구독
+editor.api.on("show-popup", (obj) => {
+    console.log(obj);
+    console.log("The popup was shown/hidden");
+});
+// 텍스트를 왼쪽으로 정렬
+editor.api.exec("show-popup", {
+    type: "link"
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/subscript.md
new file mode 100644
index 0000000..eb4de00
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/subscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: subscript
+title: subscript 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 subscript 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# subscript
+
+### 설명 {#description}
+
+@short: 메뉴바/툴바의 "Subscript" 버튼을 누르거나 Event Bus 메서드를 통해 호출될 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"subscript": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-10}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "subscript" 이벤트 구독
+editor.api.on("subscript", () => {
+    console.log("Subscript was applied");
+});
+// "subscript" 이벤트 트리거
+editor.api.exec("subscript", {});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md
new file mode 100644
index 0000000..4d7fdaf
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: superscript
+title: superscript 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 superscript 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# superscript
+
+### 설명 {#description}
+
+@short: 메뉴바/툴바의 "Superscript" 버튼을 누르거나 Event Bus 메서드를 통해 호출될 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"superscript": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "superscript" 이벤트 구독
+editor.api.on("superscript", () => {
+    console.log("Superscript was applied");
+});
+// "superscript" 이벤트 트리거
+editor.api.exec("superscript", {});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
new file mode 100644
index 0000000..09eccd1
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-fullscreen-mode
+title: toggle-fullscreen-mode 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-fullscreen-mode 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# toggle-fullscreen-mode
+
+### 설명 {#description}
+
+@short: 전체 화면 모드를 전환할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**toggle-fullscreen-mode** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `mode` - 전체 화면 모드를 활성화합니다
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "toggle-fullscreen-mode" 이벤트 구독
+editor.api.on("toggle-fullscreen-mode", (obj) => {
+    console.log(obj);
+    console.log("The full screen mode was changed");
+});
+// 전체 화면 모드 활성화
+editor.api.exec("toggle-fullscreen-mode", { mode: true });
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
new file mode 100644
index 0000000..25294da
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-layout-mode
+title: toggle-layout-mode 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-layout-mode 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# toggle-layout-mode
+
+### 설명 {#description}
+
+@short: 레이아웃 모드를 전환할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**toggle-layout-mode** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `mode` - 레이아웃 모드. 사용 가능한 모드: `"classic" | "document"`
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-11}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "toggle-layout-mode" 이벤트 구독
+editor.api.on("toggle-layout-mode", (obj) => {
+    console.log(obj);
+    console.log("The layout mode was changed");
+});
+// "document" 레이아웃 모드 설정
+editor.api.exec("toggle-layout-mode", { mode: "document" });
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
new file mode 100644
index 0000000..0201455
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-shortcut-info
+title: toggle-shortcut-info 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-shortcut-info 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# toggle-shortcut-info
+
+### 설명 {#description}
+
+@short: 단축키 정보를 전환할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**toggle-shortcut-info** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `mode` - 단축키 정보를 활성화합니다. `true`이면 단축키 정보 팝업을 표시하고, `false`이면 숨깁니다
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "toggle-shortcut-info" 이벤트 구독
+editor.api.on("toggle-shortcut-info", (obj) => {
+    console.log(obj);
+    console.log("The shortcut info was shown");
+});
+// 단축키 정보 활성화
+editor.api.exec("toggle-shortcut-info", { mode: true });
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/undo.md
new file mode 100644
index 0000000..2037fa1
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/undo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: undo
+title: undo 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 undo 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# undo
+
+### 설명 {#description}
+
+@short: 메뉴바/툴바의 "Undo" 버튼을 누르거나 Event Bus 메서드를 통해 호출될 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"undo": () => boolean | void;
+~~~
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "undo" 이벤트 구독
+editor.api.on("undo", () => {
+    console.log("Undo operation was performed");
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/update-link.md
new file mode 100644
index 0000000..b45c7a8
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/update-link.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: update-link
+title: update-link 이벤트
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 update-link 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 살펴보세요.
+---
+
+# update-link
+
+### 설명 {#description}
+
+@short: 링크를 업데이트할 때 발생합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+"update-link": ({ id: number, url: string }) => boolean | void;
+~~~
+
+### 매개변수 {#parameters}
+
+**update-link** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받을 수 있습니다:
+
+- `id` - 링크 ID
+- `url` - 수정된 url
+
+:::info[정보]
+내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다
+:::
+
+### 예시 {#example}
+
+~~~jsx {5-9}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "update-link" 이벤트 구독
+editor.api.on("update-link", (obj) => {
+    console.log(obj);
+    console.log("The following link was updated:" + obj.url);
+});
+~~~
+
+**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/detach.md
new file mode 100644
index 0000000..1095024
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/detach.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: api.detach()
+title: detach 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 detach 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# api.detach()
+
+### 설명 {#description}
+
+@short: 이벤트 핸들러를 제거/분리할 수 있습니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+api.detach( tag: string ): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `tag` - (필수) 액션 태그의 이름
+
+### 이벤트 {#events}
+
+:::info[정보]
+RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-8,10}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 업데이트되었습니다. `name` 및 `context` 매개변수가 제거되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/exec.md
new file mode 100644
index 0000000..0043968
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/exec.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.exec()
+title: exec 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 exec 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# api.exec()
+
+### 설명 {#description}
+
+@short: 내부 이벤트를 트리거할 수 있습니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+api.exec(
+    event: string,
+    config: object
+): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `event` - (필수) 발생시킬 이벤트
+- `config` - (필수) 매개변수가 포함된 구성 객체 (발생시킬 이벤트를 참조하세요)
+
+### 이벤트 {#events}
+
+:::info[정보]
+RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다
+:::
+
+### 예제 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// 텍스트 폰트 크기 설정
+editor.api.exec("set-font-size", {
+    fontSize: "16px"
+});
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
new file mode 100644
index 0000000..bcb792b
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getReactiveState()
+title: getReactiveState 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 getReactiveState 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# api.getReactiveState()
+
+### 설명 {#description}
+
+@short: RichText의 반응형 속성이 포함된 객체를 반환합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+api.getReactiveState(): object;
+~~~
+
+### 반환값 {#returns}
+
+이 메서드는 다음 매개변수를 포함하는 객체를 반환합니다:
+
+~~~jsx {}
+{
+    cursorState: { subscribe: any },
+    defaultStyles {...},
+    document {...},
+    fullscreen {...},
+    history {...},
+    layoutMode {...},
+    popup {...},
+    selection {...}
+}
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5-7}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// RichText의 반응형 상태 가져오기
+const reactive_state = editor.api.getReactiveState();
+console.log(reactive_state)
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-state.md
new file mode 100644
index 0000000..3b0639d
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getState()
+title: getState 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 getState 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# api.getState()
+
+### 설명 {#description}
+
+@short: RichText의 StateStore 속성이 포함된 객체를 반환합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+api.getState(): object;
+~~~
+
+### 반환값 {#returns}
+
+이 메서드는 다음 매개변수를 포함하는 객체를 반환합니다:
+
+~~~jsx {}
+{
+    cursorState: {},
+    defaultStyles: {},
+    document: {},
+    fullscreen: boolean,
+    history: []
+    layoutMode: string,
+    popup: any,
+    selection: {}
+}
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5-7}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// RichText의 상태 가져오기
+const state = editor.api.getState();
+console.log(state);
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/intercept.md
new file mode 100644
index 0000000..ee74d67
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/intercept.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.intercept()
+title: intercept 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 intercept 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# api.intercept()
+
+### 설명 {#description}
+
+@short: 내부 이벤트를 가로채거나 차단할 수 있습니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+api.intercept(
+    event: string,
+    callback: function
+): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `event` - (필수) 발생시킬 이벤트
+- `callback` - (필수) 실행할 콜백 (콜백 인수는 발생시킬 이벤트에 따라 달라집니다)
+
+### 이벤트 {#events}
+
+:::info[정보]
+RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다
+:::
+
+### 예제 {#example}
+
+~~~jsx {5-10}
+// RichText 생성
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// 폰트 크기 변경 차단
+editor.api.intercept("set-font-size", (obj) => {
+    if(obj.fontSize !== "36px" ){
+        return false;
+    }
+});
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/on.md
new file mode 100644
index 0000000..f8bd9e8
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/on.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.on()
+title: on 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 on 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# api.on()
+
+### 설명 {#description}
+
+@short: 내부 이벤트에 핸들러를 연결할 수 있습니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+api.on(
+    event: string,
+    handler: function
+): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `event` - (필수) 발생시킬 이벤트
+- `handler` - (필수) 연결할 핸들러 (핸들러 인수는 발생시킬 이벤트에 따라 달라집니다)
+
+### 이벤트 {#events}
+
+:::info[정보]
+RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다
+:::
+
+### 예제 {#example}
+
+~~~jsx {5-8}
+// RichText 초기화
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+// "set-font-size" 이벤트 구독
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+});
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 업데이트되었습니다. `context` 매개변수가 제거되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/set-next.md
new file mode 100644
index 0000000..2acd470
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/set-next.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: api.setNext()
+title: setNext 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 setNext 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# api.setNext()
+
+### 설명 {#description}
+
+@short: 이벤트 버스 순서에 특정 액션을 추가할 수 있습니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+api.setNext(next: any): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `next` - (필수) **이벤트 버스** 순서에 포함시킬 액션
+
+### 예제 {#example}
+
+~~~jsx {10-11}
+const server = "https://some-backend-url";
+// someServerService라는 이름의 커스텀 서버 서비스 클래스가 있다고 가정합니다
+const someServerService = new ServerDataService(server);
+
+fetch(server + "/data").then((res) => res.json()).then((data) => {
+    const editor = new richtext.Richtext("#root", {
+        value: data
+    });
+
+    // someServerService를 위젯의 이벤트 버스 순서에 통합
+    editor.api.setNext(someServerService);
+});
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/destructor.md
new file mode 100644
index 0000000..2081ec3
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/destructor.md
@@ -0,0 +1,28 @@
+---
+sidebar_label: destructor()
+title: destructor 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 destructor 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# destructor()
+
+### 설명 {#description}
+
+@short: RichText의 모든 HTML 요소를 제거하고, 관련된 모든 이벤트를 분리합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+destructor(): void;
+~~~
+
+### 예제 {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+
+// RichText 제거
+editor.destructor();
+~~~
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md
new file mode 100644
index 0000000..24f1cbb
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: getValue()
+title: getValue 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 getValue 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# getValue()
+
+### 설명 {#description}
+
+@short: RichText의 값을 반환합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+getValue(encoder?: any): string;
+~~~
+
+### 매개변수 {#parameters}
+
+- `encoder` - (선택) RichText의 내용을 커스텀 형식으로 인코딩하는 데 사용되는 파서입니다. 사용 가능한 형식: `html` (기본값) 및 `text`
+
+필요한 인코더는 다음과 같이 가져올 수 있습니다:
+
+```jsx
+const toTextEncoder = richtext.text.toText; // text encoder
+const toHTMLEncoder = richtext.html.toHTML; // html encoder
+```
+
+### 예제 {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // 기본값 설정 (HTML 형식)
+    // 기타 구성 속성
+});
+
+const toTextEncoder = richtext.text.toText;
+const editor_value = editor.getValue(toTextEncoder);
+console.log(editor_value);
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 업데이트되었습니다. `mode` 매개변수가 제거되고 `encoder` 매개변수가 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-config.md
new file mode 100644
index 0000000..b7d2f51
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-config.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: setConfig()
+title: setConfig 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 setConfig 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# setConfig()
+
+### 설명 {#description}
+
+@short: RichText에 새로운 구성 매개변수를 적용합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+setConfig(config: { [key:any]: any }): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `config` - (필수) RichText 구성 매개변수 객체입니다. 속성의 전체 목록은 [여기](api/overview/properties_overview.md)에서 확인하세요
+
+:::note[참고]
+`setConfig()` 메서드는 `setConfig()` 호출 시 명시적으로 제공되지 않은 이전에 설정된 모든 매개변수를 유지합니다.
+:::
+
+### 예제 {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "<h1>Some text</h1>",
+    // 기타 구성 속성
+});
+
+editor.setConfig({
+    layoutMode: "document"
+});
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
new file mode 100644
index 0000000..522bbc5
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: setLocale()
+title: setLocale 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 setLocale 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# setLocale()
+
+### 설명 {#description}
+
+@short: RichText에 새로운 로케일을 적용합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+setLocale(null | locale?: object): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `null` - (선택) 기본 로케일(*영어*)로 초기화합니다
+- `locale` - (선택) 적용할 새 로케일의 데이터 객체
+
+:::info[정보]
+`setLocale()` 메서드를 사용하여 RichText에 새로운 로케일을 적용하세요. RichText를 기본 로케일로 초기화하려면, 인수 없이(또는 *null* 값으로) `setLocale()` 메서드를 호출하세요.
+:::
+
+### 예제 {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+
+// RichText에 "de" 로케일 적용
+editor.setLocale(de);
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다
+
+**관련 문서:** [Localization](guides/localization.md)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md
new file mode 100644
index 0000000..930c7da
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: setValue()
+title: setValue 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 setValue 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# setValue()
+
+### 설명 {#description}
+
+@short: RichText에 새로운 값을 적용합니다
+
+### 사용법 {#usage}
+
+~~~jsx {}
+setValue: (value: string, encoder?: any): void;
+~~~
+
+### 매개변수 {#parameters}
+
+- `value` - (필수) RichText에 삽입할 값
+- `encoder` - (선택) RichText의 내용을 커스텀 형식으로 인코딩하는 커스텀 파서입니다. 사용 가능한 형식: `html` (기본값) 및 `text`
+
+필요한 인코더는 다음과 같이 가져올 수 있습니다:
+
+```jsx
+const fromTextEncoder = richtext.text.fromText; // text encoder
+const fromHTMLEncoder = richtext.html.fromHTML; // html encoder
+```
+
+### 예제 {#example}
+
+~~~jsx {7-8}
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+
+const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
+
+const fromTextEncoder = richtext.text.fromText;
+editor.setValue(editor_value, fromTextEncoder);
+~~~
+
+**변경 이력:** 이 메서드는 v2.0에서 업데이트되었습니다. `mode` 매개변수가 제거되고 `encoder` 매개변수가 추가되었습니다
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
new file mode 100644
index 0000000..44fa71e
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Event Bus 메서드
+title: Event Bus 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 내부 Event Bus 메서드 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다.
+---
+
+# Event Bus 메서드 {#event-bus-methods}
+
+이 페이지는 DHTMLX RichText 에디터가 사용하는 내부 Event Bus와 관련된 메서드 목록을 제공합니다.
+이 메서드들은 고급 통합 및 내부 이벤트 시스템 기반의 사용자 정의 동작에 사용됩니다.
+
+| 이름                                              | 설명                                         |
+| ------------------------------------------------- | -------------------------------------------- |
+| [](api/internal/detach.md)                         | @getshort(api/internal/detach.md)             |
+| [](api/internal/exec.md)                           | @getshort(api/internal/exec.md)               |
+| [](api/internal/intercept.md)                      | @getshort(api/internal/intercept.md)          |
+| [](api/internal/on.md)                             | @getshort(api/internal/on.md)                 |
+| [](api/internal/set-next.md)                       | @getshort(api/internal/set-next.md)           |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
new file mode 100644
index 0000000..1534ae7
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: 이벤트 개요
+title: 이벤트 개요
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 이벤트 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다.
+---
+
+# 이벤트 개요 {#events-overview}
+
+이 페이지는 DHTMLX RichText 에디터가 발생시키는 모든 이벤트를 나열합니다.
+이 이벤트들을 활용하여 기능을 확장하거나, 사용자 인터랙션을 추적하거나, 사용자 정의 동작을 트리거할 수 있습니다.
+
+| 이름                                                   | 설명                                          |
+| ------------------------------------------------------ | --------------------------------------------- |
+| [](api/events/align.md)                                 | @getshort(api/events/align.md)                 |
+| [](api/events/clear-text-format.md)                     | @getshort(api/events/clear-text-format.md)     |
+| [](api/events/copy.md)                                  | @getshort(api/events/copy.md)                  |
+| [](api/events/create-new.md)                            | @getshort(api/events/create-new.md)            |
+| [](api/events/cut.md)                                   | @getshort(api/events/cut.md)                   |
+| [](api/events/delete-link.md)                           | @getshort(api/events/delete-link.md)           |
+| [](api/events/export.md)                                | @getshort(api/events/export.md)                |
+| [](api/events/import.md)                                | @getshort(api/events/import.md)                |
+| [](api/events/indent.md)                                | @getshort(api/events/indent.md)                |
+| [](api/events/insert-image.md)                          | @getshort(api/events/insert-image.md)          |
+| [](api/events/insert-line.md)                           | @getshort(api/events/insert-line.md)           |
+| [](api/events/insert-link.md)                           | @getshort(api/events/insert-link.md)           |
+| [](api/events/insert-list.md)                           | @getshort(api/events/insert-list.md)           |
+| [](api/events/outdent.md)                               | @getshort(api/events/outdent.md)               |
+| [](api/events/paste.md)                                 | @getshort(api/events/paste.md)                 |
+| [](api/events/print.md)                                 | @getshort(api/events/print.md)                 |
+| [](api/events/redo.md)                                  | @getshort(api/events/redo.md)                  |
+| [](api/events/resize-image.md)                          | @getshort(api/events/resize-image.md)          |
+| [](api/events/set-font-family.md)                       | @getshort(api/events/set-font-family.md)       |
+| [](api/events/set-font-size.md)                         | @getshort(api/events/set-font-size.md)         |
+| [](api/events/set-line-height.md)                       | @getshort(api/events/set-line-height.md)       |
+| [](api/events/set-text-color.md)                        | @getshort(api/events/set-text-color.md)        |
+| [](api/events/set-text-format.md)                       | @getshort(api/events/set-text-format.md)       |
+| [](api/events/set-text-style.md)                        | @getshort(api/events/set-text-style.md)        |
+| [](api/events/show-popup.md)                            | @getshort(api/events/show-popup.md)            |
+| [](api/events/subscript.md)                             | @getshort(api/events/subscript.md)             |
+| [](api/events/superscript.md)                           | @getshort(api/events/superscript.md)           |
+| [](api/events/toggle-fullscreen-mode.md)                | @getshort(api/events/toggle-fullscreen-mode.md)|
+| [](api/events/toggle-layout-mode.md)                    | @getshort(api/events/toggle-layout-mode.md)    |
+| [](api/events/toggle-shortcut-info.md)                  | @getshort(api/events/toggle-shortcut-info.md)  |
+| [](api/events/undo.md)                                  | @getshort(api/events/undo.md)                  |
+| [](api/events/update-link.md)                           | @getshort(api/events/update-link.md)           |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
new file mode 100644
index 0000000..df343ad
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
@@ -0,0 +1,97 @@
+---
+sidebar_label: API 개요
+title: API 개요
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 API 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다.
+---
+
+# API 개요 {#api-overview}
+
+## RichText 생성자 {#richtext-constructor}
+
+~~~js
+new richtext.RichText("#root", {
+    // configuration parameters
+});
+~~~
+
+**매개변수**:
+
+- HTML 컨테이너 (예: CSS 선택자 또는 DOM 요소)
+- 구성 객체 ([속성 보기](api/overview/properties_overview.md))
+
+## RichText 메서드 {#richtext-methods}
+
+| 이름                                          | 설명                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/methods/get-value.md)                   | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                   | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                  | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                  | @getshort(api/methods/set-locale.md)       |
+| [](api/methods/destructor.md)                  | @getshort(api/methods/destructor.md)       |
+
+## Event Bus 메서드 {#event-bus-methods}
+
+| 이름                                          | 설명                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/exec.md)                       | @getshort(api/internal/exec.md)            |
+| [](api/internal/intercept.md)                  | @getshort(api/internal/intercept.md)       |
+| [](api/internal/on.md)                         | @getshort(api/internal/on.md)              |
+| [](api/internal/detach.md)                     | @getshort(api/internal/detach.md)          |
+| [](api/internal/set-next.md)                   | @getshort(api/internal/set-next.md)        |
+
+## 상태 메서드 {#state-methods}
+
+| 이름                                          | 설명                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/get-state.md)                  | @getshort(api/internal/get-state.md)       |
+| [](api/internal/get-reactive-state.md)         | @getshort(api/internal/get-reactive-state.md) |
+
+## 이벤트 {#events}
+
+| 이름                                           | 설명                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/events/align.md)                        | @getshort(api/events/align.md)             |
+| [](api/events/clear-text-format.md)            | @getshort(api/events/clear-text-format.md) |
+| [](api/events/copy.md)                         | @getshort(api/events/copy.md)              |
+| [](api/events/create-new.md)                   | @getshort(api/events/create-new.md)        |
+| [](api/events/cut.md)                          | @getshort(api/events/cut.md)               |
+| [](api/events/delete-link.md)                  | @getshort(api/events/delete-link.md)       |
+| [](api/events/export.md)                       | @getshort(api/events/export.md)            |
+| [](api/events/import.md)                       | @getshort(api/events/import.md)            |
+| [](api/events/indent.md)                       | @getshort(api/events/indent.md)            |
+| [](api/events/insert-image.md)                 | @getshort(api/events/insert-image.md)      |
+| [](api/events/insert-line.md)                  | @getshort(api/events/insert-line.md)       |
+| [](api/events/insert-link.md)                  | @getshort(api/events/insert-link.md)       |
+| [](api/events/insert-list.md)                  | @getshort(api/events/insert-list.md)       |
+| [](api/events/outdent.md)                      | @getshort(api/events/outdent.md)           |
+| [](api/events/paste.md)                        | @getshort(api/events/paste.md)             |
+| [](api/events/print.md)                        | @getshort(api/events/print.md)             |
+| [](api/events/redo.md)                         | @getshort(api/events/redo.md)              |
+| [](api/events/resize-image.md)                 | @getshort(api/events/resize-image.md)      |
+| [](api/events/set-font-family.md)              | @getshort(api/events/set-font-family.md)   |
+| [](api/events/set-font-size.md)                | @getshort(api/events/set-font-size.md)     |
+| [](api/events/set-line-height.md)              | @getshort(api/events/set-line-height.md)   |
+| [](api/events/set-text-color.md)               | @getshort(api/events/set-text-color.md)    |
+| [](api/events/set-text-format.md)              | @getshort(api/events/set-text-format.md)   |
+| [](api/events/set-text-style.md)               | @getshort(api/events/set-text-style.md)    |
+| [](api/events/show-popup.md)                   | @getshort(api/events/show-popup.md)        |
+| [](api/events/subscript.md)                    | @getshort(api/events/subscript.md)         |
+| [](api/events/superscript.md)                  | @getshort(api/events/superscript.md)       |
+| [](api/events/toggle-fullscreen-mode.md)       | @getshort(api/events/toggle-fullscreen-mode.md) |
+| [](api/events/toggle-layout-mode.md)           | @getshort(api/events/toggle-layout-mode.md) |
+| [](api/events/toggle-shortcut-info.md)         | @getshort(api/events/toggle-shortcut-info.md) |
+| [](api/events/undo.md)                         | @getshort(api/events/undo.md)              |
+| [](api/events/update-link.md)                  | @getshort(api/events/update-link.md)       |
+
+## 속성 {#properties}
+
+| 이름                                          | 설명                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/config/default-styles.md)               | @getshort(api/config/default-styles.md)    |
+| [](api/config/fullscreen-mode.md)              | @getshort(api/config/fullscreen-mode.md)   |
+| [](api/config/image-upload-url.md)             | @getshort(api/config/image-upload-url.md)  |
+| [](api/config/layout-mode.md)                  | @getshort(api/config/layout-mode.md)       |
+| [](api/config/locale.md)                       | @getshort(api/config/locale.md)            |
+| [](api/config/menubar.md)                      | @getshort(api/config/menubar.md)           |
+| [](api/config/toolbar.md)                      | @getshort(api/config/toolbar.md)           |
+| [](api/config/value.md)                        | @getshort(api/config/value.md)             |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
new file mode 100644
index 0000000..79e39ed
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: 메서드 개요
+title: 메서드 개요
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 메서드 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다.
+---
+
+# 메서드 개요 {#methods-overview}
+
+이 페이지는 DHTMLX RichText 에디터에서 사용할 수 있는 핵심 메서드의 요약을 제공합니다.
+이 레퍼런스를 통해 각 메서드의 상세 설명으로 빠르게 이동하고, 목적을 파악하며, 사용 예제를 확인할 수 있습니다.
+
+| 이름                                                   | 설명                                      |
+| ------------------------------------------------------ | ----------------------------------------- |
+| [](api/methods/destructor.md)                           | @getshort(api/methods/destructor.md)       |
+| [](api/methods/get-value.md)                            | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                            | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                           | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                           | @getshort(api/methods/set-locale.md)       |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
new file mode 100644
index 0000000..b00306e
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: 속성 개요
+title: 속성 개요
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 속성 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다.
+---
+
+# 속성 개요 {#properties-overview}
+
+이 페이지는 DHTMLX RichText 에디터를 초기화할 때 사용할 수 있는 모든 구성 속성을 나열합니다.
+이 속성들을 통해 레이아웃, 툴바, 값, 지역화 및 에디터의 기타 측면을 제어할 수 있습니다.
+
+| 이름                                                    | 설명                                         |
+| --------------------------------------------------------|----------------------------------------------|
+| [](api/config/default-styles.md)                         | @getshort(api/config/default-styles.md)       |
+| [](api/config/fullscreen-mode.md)                        | @getshort(api/config/fullscreen-mode.md)      |
+| [](api/config/image-upload-url.md)                       | @getshort(api/config/image-upload-url.md)     |
+| [](api/config/layout-mode.md)                            | @getshort(api/config/layout-mode.md)          |
+| [](api/config/locale.md)                                 | @getshort(api/config/locale.md)               |
+| [](api/config/menubar.md)                                | @getshort(api/config/menubar.md)              |
+| [](api/config/toolbar.md)                                | @getshort(api/config/toolbar.md)              |
+| [](api/config/value.md)                                  | @getshort(api/config/value.md)                |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
new file mode 100644
index 0000000..be55ed5
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
@@ -0,0 +1,15 @@
+---
+sidebar_label: 상태 메서드
+title: 상태 메서드
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 내부 상태 메서드 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다.
+---
+
+# 상태 메서드 {#state-methods}
+
+이 페이지는 DHTMLX RichText 에디터의 내부 상태에 접근하고 활용하기 위한 메서드를 나열합니다.
+이 메서드들은 디버깅, 반응형 시스템과의 통합, 또는 고급 사용자 정의 로직 구현에 유용합니다.
+
+| 이름                                                        | 설명                                             |
+| ----------------------------------------------------------- | ------------------------------------------------ |
+| [](api/internal/get-reactive-state.md)                       | @getshort(api/internal/get-reactive-state.md)     |
+| [](api/internal/get-state.md)                                | @getshort(api/internal/get-state.md)              |
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png
new file mode 100644
index 0000000..baeb296
Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png differ
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png
new file mode 100644
index 0000000..bf4312c
Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png differ
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/editor.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/editor.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/editor.png differ
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png differ
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png
new file mode 100644
index 0000000..e6d70b9
Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png differ
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png
new file mode 100644
index 0000000..8b207e6
Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png differ
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png
new file mode 100644
index 0000000..c62be84
Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png differ
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png
new file mode 100644
index 0000000..07410f7
Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png differ
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/trial_richtext.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/trial_richtext.png
new file mode 100644
index 0000000..cdee98c
Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/trial_richtext.png differ
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md
new file mode 100644
index 0000000..fcab23d
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md
@@ -0,0 +1,283 @@
+---
+sidebar_label: 구성
+title: 구성
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 구성 방법을 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# 구성
+
+해당 API를 통해 RichText의 외관과 기능을 구성할 수 있습니다. 제공되는 매개변수를 활용하여 다음 작업을 수행할 수 있습니다:
+
+- [`menubar`](api/config/menubar.md) 속성을 사용하여 **menubar** 표시/숨기기
+- [`toolbar`](api/config/toolbar.md) 속성을 사용하여 **toolbar** 구성
+- [`fullscreenMode`](api/config/fullscreen-mode.md) 속성을 사용하여 **전체화면 모드** 활성화
+- [`layoutMode`](api/config/layout-mode.md) 속성을 사용하여 **레이아웃**을 "classic"과 "document" 모드 간 전환
+- [`value`](api/config/value.md) 속성을 사용하여 **초기 값** 지정
+- [`locale`](api/config/locale.md) 속성을 사용하여 **초기 로케일** 지정
+- [`defaultStyles`](api/config/default-styles.md) 속성을 사용하여 **초기 스타일** 적용
+
+## 레이아웃 모드 {#layout-modes}
+
+RichText 편집기에는 두 가지 레이아웃 모드가 있으며, 최적의 콘텐츠 작성 환경을 위해 원하는 모드를 선택할 수 있습니다:
+
+- **"classic"**
+
+<div className="img_border">
+![클래식 모드](./../assets/richtext/classic_mode.png)
+</div>
+
+- **"document"**
+
+<div className="img_border">
+![문서 모드](./../assets/richtext/document_mode.png)
+</div>
+
+원하는 모드를 지정하려면 컴포넌트 초기화 시 RichText 구성 객체의 [`layoutMode`](api/config/layout-mode.md) 속성에 정의해야 합니다:
+
+~~~jsx
+const editor = new richtext.Richtext("#root", {
+    layoutMode: "document"
+});
+~~~
+
+## Toolbar {#toolbar}
+
+RichText toolbar는 필요에 따라 변경할 수 있는 여러 컨트롤 블록으로 구성됩니다.
+
+### 기본 toolbar 컨트롤 {#default-toolbar-controls}
+
+RichText toolbar에서 사용할 수 있는 버튼 및 컨트롤 목록은 다음과 같습니다:
+
+| 버튼                | 설명                                                                        |
+|---------------------|-----------------------------------------------------------------------------|
+| `undo`              | 가장 최근 사용자 동작을 되돌립니다                                           |
+| `redo`              | 이전에 취소된 동작을 다시 적용합니다                                         |
+| `style`             | 텍스트 스타일 선택을 허용합니다 (예: 제목, 단락 등)                          |
+| `font-family`       | 선택한 텍스트의 글꼴을 변경합니다                                            |
+| `font-size`         | 선택한 텍스트의 크기를 조정합니다                                            |
+| `bold`              | 선택한 텍스트에 굵게 서식을 적용합니다                                       |
+| `italic`            | 선택한 텍스트에 기울임꼴 서식을 적용합니다                                   |
+| `underline`         | 선택한 텍스트에 밑줄을 추가합니다                                            |
+| `strike`            | 취소선 서식을 적용합니다                                                     |
+| `subscript`         | 텍스트를 아래 첨자로 서식 지정합니다                                         |
+| `superscript`       | 텍스트를 위 첨자로 서식 지정합니다                                           |
+| `text-color`        | 텍스트 색상을 변경합니다                                                     |
+| `background-color`  | 텍스트의 배경(강조 표시) 색상을 변경합니다                                   |
+| `align`             | 텍스트 정렬을 설정합니다 (왼쪽, 가운데, 오른쪽, 양쪽 맞춤)                  |
+| `indent`            | 단락 들여쓰기를 늘립니다                                                     |
+| `outdent`           | 단락 들여쓰기를 줄입니다                                                     |
+| `line-height`       | 줄 간격(행 높이)을 조정합니다                                                |
+| `quote`             | 텍스트를 인용구로 서식 지정합니다                                            |
+| `bulleted-list`     | 글머리 기호 목록을 만듭니다                                                  |
+| `numbered-list`     | 번호 매기기 목록을 만듭니다                                                  |
+| `link`              | 하이퍼링크를 삽입하거나 편집합니다                                           |
+| `image`             | 이미지를 삽입합니다                                                          |
+| `line`              | 수평선을 삽입합니다                                                          |
+| `clear`             | 선택한 텍스트의 모든 서식을 제거합니다                                       |
+| `print`             | 인쇄 대화 상자를 엽니다                                                      |
+| `fullscreen`        | 전체화면 모드를 전환합니다                                                   |
+| `mode`              | Classic/Document 두 가지 보기 모드 간 전환합니다                             |
+| `shortcuts`         | 사용 가능한 키보드 단축키 목록을 표시합니다                                  |
+| `separator`         | 컨트롤 사이에 시각적 구분선을 추가합니다                                     |
+
+toolbar 구조는 [`toolbar`](api/config/toolbar.md) 속성을 사용하여 정의하며, 이는 컨트롤 이름을 나타내는 문자열 배열입니다.
+
+~~~jsx {2-36}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo",
+        "redo",
+        "separator",
+        "style",
+        "separator",
+        "font-family",
+        "font-size",
+        "separator",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "separator",
+        "text-color",
+        "background-color",
+        "separator",
+        "align",
+        "line-height",
+        "outdent",
+        "indent",
+        "separator",
+        "bulleted-list",
+        "numbered-list",
+        "quote",
+        "separator",
+        "link",
+        "image",
+        "separator",
+        "clear",
+        "separator",
+        "fullscreen",
+        "mode"
+        // 다른 버튼들
+    ],
+    // 다른 구성 속성들
+});
+~~~
+
+**관련 예제:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### 사용자 정의 toolbar 컨트롤 {#custom-toolbar-controls}
+
+[`toolbar`](api/config/toolbar.md) 속성에서 다음 매개변수를 가진 객체로 사용자 정의 컨트롤을 지정할 수도 있습니다:
+
+- `type` - (필수) 사용자 정의 컨트롤 유형을 지정합니다. 사용 가능한 유형: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` - (선택) 사용자 정의 컨트롤 ID (기존 컨트롤 ID와 중복 불가)
+- `label` - (선택) 버튼 레이블 (아이콘과 함께 표시됨)
+- `tooltip` - (선택) 마우스 오버 시 표시되는 툴팁 (지정하지 않으면 "label" 값 사용)
+- `css` - (선택) 컨트롤에 할당되는 CSS 클래스 이름 (기본 지원 클래스: wx-primary, wx-secondary)
+- `handler` - (선택) 버튼 클릭 시 실행되는 콜백 함수
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // 버튼들 (문자열은 버튼만 나타냅니다)
+        "bold",
+        "italic",
+        // 미리 정의된 버튼들 (레이블, 툴팁, 옵션 등 다른 옵션은 정의할 수 없으며, ({ type: "button", id: string }) 형태만 허용됨)
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // 미리 정의된 컨트롤을 사용하려면 올바른 유형을 지정해야 합니다 (예: richselect/colorpicker)
+        // 유형이 일치하지 않으면 무시됩니다 (toolbar에 추가되지 않음)
+        {
+            type: "richselect", // type: "button" - 잘못된 유형, 무시됨
+            id: "mode",
+        },
+        // 사용자 정의 버튼들 (지원되는 옵션은 아래 참조)
+        // 현재 사용자는 사용자 정의 버튼만 정의할 수 있습니다 (richselect/colorpicker는 지원되지 않음)
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* 사용자 정의 로직 */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* 사용자 정의 로직 */}
+        }
+    ],
+    // 다른 구성 속성들
+});
+~~~
+
+**관련 예제:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### Toolbar 숨기기 {#hide-toolbar}
+
+toolbar를 숨겨야 하는 경우, 다음과 같이 [`toolbar`](api/config/toolbar.md) 속성을 `false`로 설정하십시오:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false,
+    // 다른 구성 속성들
+});
+~~~
+
+## 기본 스타일 {#default-styles}
+
+[`defaultStyles`](api/config/default-styles.md) 속성을 사용하여 편집기의 특정 블록 유형에 기본 스타일 값을 적용할 수 있습니다.
+
+~~~jsx {}
+defaultStyles?: boolean | {
+    "*"?: { // 모든 블록에 영향을 미치며, 모든 블록에 공통 속성을 설정할 수 있습니다
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+`defaultStyles` 속성은 영향을 받는 블록에 실제 CSS를 직접 설정하지 않습니다. CSS 스타일은 별도로 적용해야 합니다:
+
+```html title="index.html"
+<div id="root"></div>
+```
+
+```jsx {2-9} title="index.js"
+const editor = new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+#root h2 {
+    font-family: Roboto;
+    font-size: 28px;
+    color: purple;
+    background: #FFC0CB;
+}
+```
+
+이 예제에서 모든 `h2` 블록에는 `"Roboto"` 글꼴이 적용되고, 글꼴 크기는 28px이며, 전경색과 배경색도 함께 변경됩니다. CSS 스타일도 `h2` 블록에 적용됩니다.
+
+**관련 예제:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md
new file mode 100644
index 0000000..7e989b3
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md
@@ -0,0 +1,63 @@
+---
+sidebar_label: 초기화
+title: 초기화
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 초기화 방법을 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# 초기화
+
+이 가이드에서는 페이지에 RichText를 생성하고 애플리케이션에 편집기 기능을 추가하는 방법을 자세히 안내합니다. 아래 단계를 따라 사용 가능한 컴포넌트를 준비하십시오:
+
+1. [페이지에 RichText 소스 파일 포함하기](#including-source-files).
+2. [RichText용 컨테이너 생성하기](#creating-container).
+3. [객체 생성자로 RichText 초기화하기](#initializing-richtext).
+
+## 소스 파일 포함하기 {#including-source-files}
+
+[패키지를 다운로드](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml)하여 프로젝트의 폴더에 압축을 해제합니다.
+
+RichText를 생성하려면 페이지에 다음 소스 파일 2개를 포함해야 합니다:
+
+- *richtext.js*
+- *richtext.css*
+
+소스 파일에 대한 상대 경로가 올바르게 설정되어 있는지 확인하십시오:
+
+~~~html title="index.html"
+<script type="text/javascript" src="./codebase/richtext.js"></script>
+<link rel="stylesheet" href="./codebase/richtext.css">
+~~~
+
+## 컨테이너 생성하기 {#creating-container}
+
+RichText용 컨테이너를 추가하고 ID를 지정합니다. 예를 들어 *"root"*와 같이 지정합니다:
+
+~~~jsx title="index.html"
+<div id="root"></div>
+~~~
+
+## RichText 초기화하기 {#initializing-richtext}
+
+`richtext.Richtext` 생성자를 사용하여 RichText를 초기화합니다. 생성자는 두 가지 매개변수를 받습니다:
+
+- HTML 컨테이너 (HTML 컨테이너의 ID)
+- 구성 속성이 담긴 객체. [전체 목록은 여기서 확인하세요](#configuration-properties)
+
+~~~jsx title="index.html"
+// RichText 생성
+const editor = new richtext.Richtext("#root", {
+    // 구성 속성
+});
+~~~
+
+### 구성 속성 {#configuration-properties}
+
+:::note[참고]
+**RichText**를 구성하기 위한 전체 속성 목록은 [**여기**](api/overview/properties_overview.md)에서 확인할 수 있습니다.
+:::
+
+## 예제 {#example}
+
+이 스니펫에서 초기 데이터로 **RichText**를 초기화하는 방법을 확인할 수 있습니다:
+
+<iframe src="https://snippet.dhtmlx.com/tjryzka7?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
new file mode 100644
index 0000000..1d54020
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
@@ -0,0 +1,300 @@
+---
+sidebar_label: Angular와의 통합
+title: Angular와의 통합
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 Angular와의 통합 방법을 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# Angular와의 통합
+
+:::tip[팁]
+이 문서를 읽기 전에 **Angular**의 기본 개념과 패턴에 익숙해지시기 바랍니다. 지식을 복습하려면 [**Angular 문서**](https://v17.angular.io/docs)를 참조하십시오.
+:::
+
+DHTMLX RichText는 **Angular**와 호환됩니다. DHTMLX RichText를 **Angular**와 함께 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 해당 [**GitHub 예제**](https://github.com/DHTMLX/angular-richtext-demo)를 참조하십시오.
+
+## 프로젝트 생성하기 {#creating-a-project}
+
+:::info[정보]
+새 프로젝트를 시작하기 전에 [**Angular CLI**](https://v17.angular.io/cli)와 [**Node.js**](https://nodejs.org/en/)를 설치하십시오.
+:::
+
+Angular CLI를 사용하여 새 **my-angular-richtext-app** 프로젝트를 생성합니다. 다음 명령어를 실행하십시오:
+
+~~~json
+ng new my-angular-richtext-app
+~~~
+
+:::note[참고]
+이 가이드를 따르려면 새 Angular 앱을 생성할 때 Server-Side Rendering (SSR)과 Static Site Generation (SSG/Prerendering)을 비활성화하십시오!
+:::
+
+위 명령어는 필요한 모든 도구를 설치하므로 추가 명령어를 실행할 필요가 없습니다.
+
+### 의존성 설치 {#installation-of-dependencies}
+
+새로 생성된 앱 폴더로 이동합니다:
+
+~~~json
+cd my-angular-richtext-app
+~~~
+
+의존성을 설치하고 dev server를 시작합니다. 이를 위해 [**yarn**](https://yarnpkg.com/) 패키지 매니저를 사용합니다:
+
+~~~json
+yarn
+yarn start
+~~~
+
+앱은 localhost에서 실행됩니다 (예: `http://localhost:3000`).
+
+## RichText 생성하기 {#creating-richtext}
+
+이제 DHTMLX RichText 소스 코드를 가져와야 합니다. 먼저 앱을 중지하고 RichText 패키지 설치를 진행합니다.
+
+### 1단계: 패키지 설치 {#step-1-package-installation}
+
+[**trial RichText 패키지**](/how_to_start/#installing-richtext-via-npm-or-yarn)를 다운로드하고 README 파일에 설명된 단계를 따르십시오. trial RichText는 30일 동안만 사용 가능합니다.
+
+### 2단계: 컴포넌트 생성 {#step-2-component-creation}
+
+이제 애플리케이션에 RichText를 추가하기 위한 Angular 컴포넌트를 생성해야 합니다. **src/app/** 폴더에 **richtext** 폴더를 생성하고, 그 안에 새 파일을 추가하여 **richtext.component.ts**로 이름을 지정합니다.
+
+#### 소스 파일 가져오기 {#import-source-files}
+
+**richtext.component.ts** 파일을 열고 RichText 소스 파일을 가져옵니다. 참고 사항:
+
+- PRO 버전을 사용하고 로컬 폴더에서 RichText 패키지를 설치한 경우, 가져오기 경로는 다음과 같습니다:
+
+~~~jsx
+import { Richtext} from 'dhx-richtext-package';
+~~~
+
+- trial 버전의 RichText를 사용하는 경우, 다음 경로를 지정하십시오:
+
+~~~jsx
+import { Richtext} from '@dhx/trial-richtext';
+~~~
+
+이 튜토리얼에서는 RichText의 **trial** 버전을 구성하는 방법을 확인할 수 있습니다.
+
+#### 컨테이너 설정 및 RichText 초기화 {#set-containers-and-initialize-the-richtext}
+
+페이지에 RichText를 표시하려면 RichText용 컨테이너를 설정하고 해당 생성자를 사용하여 컴포넌트를 초기화해야 합니다:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext", // "app.component.ts" 파일에서 <richtext />로 사용되는 템플릿 이름
+    styleUrls: ["./richtext.component.css"], // css 파일 포함
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    // RichText용 컨테이너 초기화
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: Richtext;
+
+    ngOnInit() {
+        // RichText 컴포넌트 초기화
+        this._editor = new Richtext(this.richtext_container.nativeElement, {});
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor(); // RichText 소멸
+    }
+}
+~~~
+
+#### 스타일 추가 {#adding-styles}
+
+RichText를 올바르게 표시하려면 해당 스타일을 제공해야 합니다. 이를 위해 **src/app/richtext/** 폴더에 **richtext.component.css** 파일을 생성하고 RichText 및 컨테이너에 대한 중요한 스타일을 지정합니다:
+
+~~~css title="richtext.component.css"
+/* RichText 스타일 가져오기 */
+@import "@dhx/trial-richtext/dist/richtext.css";
+
+/* 초기 페이지 스타일 지정 */
+html,
+body{
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* RichText 컨테이너 스타일 지정 */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* RichText 위젯 스타일 지정 */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### 데이터 로드하기 {#loading-data}
+
+RichText에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. **src/app/richtext/** 폴더에 **data.ts** 파일을 생성하고 데이터를 추가합니다:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+그런 다음 ***richtext.component.ts*** 파일을 엽니다. 데이터가 있는 파일을 가져오고, 아래와 같이 `ngOnInit()` 메서드 내에서 RichText의 구성 객체에 해당 데이터 속성을 지정합니다:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // 데이터 가져오기
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // 데이터 속성 초기화
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            value
+            // 다른 구성 속성들
+        });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+Angular의 `ngOnInit()` 메서드 내에서 [`setValue()`](api/methods/set-value.md) 메서드를 사용하여 RichText에 데이터를 로드할 수도 있습니다.
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // 데이터 가져오기
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // 데이터 속성 초기화
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            // 다른 구성 속성들
+        });
+
+        // setValue() 메서드를 통해 데이터 적용
+        this._editor.setValue({ value });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+이제 RichText 컴포넌트를 사용할 준비가 되었습니다. 요소가 페이지에 추가되면 데이터와 함께 RichText가 초기화됩니다. 필요한 구성 설정도 제공할 수 있습니다. [RichText API 문서](api/overview/main_overview.md)를 방문하여 사용 가능한 전체 속성 목록을 확인하십시오.
+
+#### 이벤트 처리 {#handling-events}
+
+사용자가 RichText에서 어떤 동작을 수행하면 이벤트가 발생합니다. 이러한 이벤트를 사용하여 동작을 감지하고 원하는 코드를 실행할 수 있습니다. [전체 이벤트 목록](api/overview/events_overview.md)을 참조하십시오.
+
+**richtext.component.ts** 파일을 열고 `ngOnInit()` 메서드를 다음과 같이 완성합니다:
+
+~~~jsx {} title="richtext.component.ts"
+// ...
+ngOnInit() {
+    this._editor = new Richtext(this.richtext_container.nativeElement, {});
+
+    this._editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+}
+
+ngOnDestroy(): void {
+    this._editor.destructor();
+}
+~~~
+
+### 3단계: 앱에 RichText 추가하기 {#step-3-adding-richtext-into-the-app}
+
+***RichTextComponent*** 컴포넌트를 앱에 추가하려면 ***src/app/app.component.ts*** 파일을 열고 기본 코드를 다음으로 교체합니다:
+
+~~~jsx {} title="app.component.ts"
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "app-root",
+    template: `<richtext/>`
+})
+export class AppComponent {
+    name = "";
+}
+~~~
+
+그런 다음 ***src/app/*** 폴더에 ***app.module.ts*** 파일을 생성하고 아래와 같이 *RichTextComponent*를 지정합니다:
+
+~~~jsx {} title="app.module.ts"
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from "./app.component";
+import { RichTextComponent } from "./richtext/richtext.component";
+
+@NgModule({
+    declarations: [AppComponent, RichTextComponent],
+    imports: [BrowserModule],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}
+~~~
+
+마지막으로 ***src/main.ts*** 파일을 열고 기존 코드를 다음으로 교체합니다:
+
+~~~jsx title="main.ts"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
+platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch((err) => console.error(err));
+~~~
+
+이후 앱을 시작하면 페이지에 데이터가 로드된 RichText를 확인할 수 있습니다.
+
+<div className="img_border">
+![RichText 초기화](../assets/trial_richtext.png)
+</div>
+
+이제 DHTMLX RichText를 Angular와 통합하는 방법을 알게 되었습니다. 요구 사항에 맞게 코드를 커스터마이즈할 수 있습니다. 최종 고급 예제는 [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo)에서 확인할 수 있습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
new file mode 100644
index 0000000..601a986
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
@@ -0,0 +1,253 @@
+---
+sidebar_label: React와의 통합
+title: React와의 통합
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 React와의 통합 방법을 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# React와의 통합
+
+:::tip[팁]
+이 문서를 읽기 전에 [**React**](https://react.dev)의 기본 개념과 패턴에 익숙해지시기 바랍니다. 지식을 복습하려면 [**React 문서**](https://react.dev/learn)를 참조하십시오.
+:::
+
+DHTMLX RichText는 **React**와 호환됩니다. DHTMLX RichText를 **React**와 함께 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 해당 [**GitHub 예제**](https://github.com/DHTMLX/react-richtext-demo)를 참조하십시오.
+
+## 프로젝트 생성하기 {#creating-a-project}
+
+:::info[정보]
+새 프로젝트를 시작하기 전에 [**Vite**](https://vite.dev/) (선택 사항)와 [**Node.js**](https://nodejs.org/en/)를 설치하십시오.
+:::
+
+기본 **React** 프로젝트를 생성하거나 **React with Vite**를 사용할 수 있습니다. 프로젝트 이름을 **my-react-richtext-app**으로 지정합니다:
+
+~~~json
+npx create-react-app my-react-richtext-app
+~~~
+
+### 의존성 설치 {#installation-of-dependencies}
+
+새로 생성된 앱 폴더로 이동합니다:
+
+~~~json
+cd my-react-richtext-app
+~~~
+
+의존성을 설치하고 dev server를 시작합니다. 패키지 매니저를 사용합니다:
+
+- [**yarn**](https://yarnpkg.com/)을 사용하는 경우 다음 명령어를 실행합니다:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- [**npm**](https://www.npmjs.com/)을 사용하는 경우 다음 명령어를 실행합니다:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+앱은 localhost에서 실행됩니다 (예: `http://localhost:3000`).
+
+## RichText 생성하기 {#creating-richtext}
+
+이제 DHTMLX RichText 소스 코드를 가져와야 합니다. 먼저 앱을 중지하고 RichText 패키지 설치를 진행합니다.
+
+### 1단계: 패키지 설치 {#step-1-package-installation}
+
+[**trial RichText 패키지**](/how_to_start/#installing-richtext-via-npm-or-yarn)를 다운로드하고 README 파일에 설명된 단계를 따르십시오. trial RichText는 30일 동안만 사용 가능합니다.
+
+### 2단계: 컴포넌트 생성 {#step-2-component-creation}
+
+이제 애플리케이션에 RichText를 추가하기 위한 React 컴포넌트를 생성해야 합니다. ***src/*** 폴더에 새 파일을 생성하고 ***Richtext.jsx***로 이름을 지정합니다.
+
+#### 소스 파일 가져오기 {#importing-source-files}
+
+***Richtext.jsx*** 파일을 열고 RichText 소스 파일을 가져옵니다. 참고 사항:
+
+- PRO 버전을 사용하고 로컬 폴더에서 RichText 패키지를 설치한 경우, 가져오기 경로는 다음과 같습니다:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+~~~
+
+- trial 버전의 RichText를 사용하는 경우, 다음 경로를 지정하십시오:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from '@dhx/trial-richtext';
+import "@dhx/trial-richtext/dist/richtext.css";
+~~~
+
+이 튜토리얼에서는 RichText의 **trial** 버전을 구성하는 방법을 확인할 수 있습니다.
+
+#### 컨테이너 설정 및 RichText 추가 {#setting-containers-and-adding-richtext}
+
+페이지에 RichText를 표시하려면 RichText용 컨테이너를 생성하고 해당 생성자를 사용하여 컴포넌트를 초기화해야 합니다:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css'; // RichText 스타일 포함
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef(); // RichText용 컨테이너 초기화
+
+    useEffect(() => {
+        // RichText 컴포넌트 초기화
+        const editor = new Richtext(richtext_container.current, {});
+
+        return () => {
+            editor.destructor(); // RichText 소멸
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+#### 스타일 추가 {#adding-styles}
+
+RichText를 올바르게 표시하려면 프로젝트의 메인 CSS 파일에 RichText 및 컨테이너에 대한 중요한 스타일을 지정해야 합니다:
+
+~~~css title="index.css"
+/* 초기 페이지 스타일 지정 */
+html,
+body,
+#root {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* RichText 컨테이너 스타일 지정 */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* RichText 위젯 스타일 지정 */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### 데이터 로드하기 {#loading-data}
+
+RichText에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. ***src/*** 폴더에 ***data.js*** 파일을 생성하고 데이터를 추가합니다:
+
+~~~jsx {} title="data.js"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+그런 다음 ***App.js*** 파일을 열고 데이터를 가져옵니다. 이후 새로 생성된 `<RichText/>` 컴포넌트에 데이터를 **props**로 전달할 수 있습니다:
+
+~~~jsx {2,5-6} title="App.js"
+import RichText from "./Richtext";
+import { getData } from "./data";
+
+function App() {
+    const { value } = getData();
+    return <RichText value={value} />;
+}
+
+export default App;
+~~~
+
+***Richtext.jsx*** 파일로 이동하여 전달된 **props**를 RichText 구성 객체에 적용합니다:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            value: props.value, // 값 적용
+            // 다른 구성 속성들
+        });
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+React의 `useEffect()` 메서드 내에서 [`setValue()`](api/methods/set-value.md) 메서드를 사용하여 RichText에 데이터를 로드할 수도 있습니다:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    let value = props.value;
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            // 구성 속성들
+        });
+
+        editor.setValue(value);
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+이제 RichText 컴포넌트가 준비되었습니다. 요소가 페이지에 추가되면 데이터와 함께 RichText가 초기화됩니다. 필요한 구성 설정도 제공할 수 있습니다. [RichText API 문서](api/overview/main_overview.md)를 방문하여 사용 가능한 전체 속성 목록을 확인하십시오.
+
+#### 이벤트 처리 {#handling-events}
+
+사용자가 RichText에서 어떤 동작을 수행하면 이벤트가 발생합니다. 이러한 이벤트를 사용하여 동작을 감지하고 원하는 코드를 실행할 수 있습니다. [전체 이벤트 목록](api/overview/events_overview.md)을 참조하십시오.
+
+***Richtext.jsx***를 열고 `useEffect()` 메서드를 다음과 같이 완성합니다:
+
+~~~jsx {} title="Richtext.jsx"
+// ...
+useEffect(() => {
+    const editor = new Richtext(richtext_container.current, {});
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+
+    return () => {
+        editor.destructor();
+    };
+}, []);
+// ...
+~~~
+
+이후 앱을 시작하면 페이지에 데이터가 로드된 RichText를 확인할 수 있습니다.
+
+<div className="img_border">
+![RichText 초기화](../assets/trial_richtext.png)
+</div>
+
+이제 DHTMLX RichText를 React와 통합하는 방법을 알게 되었습니다. 요구 사항에 맞게 코드를 커스터마이즈할 수 있습니다. 최종 고급 예제는 [**GitHub**](https://github.com/DHTMLX/react-richtext-demo)에서 확인할 수 있습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
new file mode 100644
index 0000000..e2470a3
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
@@ -0,0 +1,263 @@
+---
+sidebar_label: Svelte와의 통합
+title: Svelte와의 통합
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 Svelte와의 통합 방법을 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# Svelte와의 통합
+
+:::tip[팁]
+이 문서를 읽기 전에 **Svelte**의 기본 개념과 패턴에 익숙해지시기 바랍니다. 지식을 복습하려면 [**Svelte 문서**](https://svelte.dev/)를 참조하십시오.
+:::
+
+DHTMLX RichText는 **Svelte**와 호환됩니다. DHTMLX RichText를 **Svelte**와 함께 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 해당 [**GitHub 예제**](https://github.com/DHTMLX/svelte-richtext-demo)를 참조하십시오.
+
+## 프로젝트 생성하기 {#creating-a-project}
+
+:::info[정보]
+새 프로젝트를 시작하기 전에 [**Vite**](https://vite.dev/) (선택 사항)와 [**Node.js**](https://nodejs.org/en/)를 설치하십시오.
+:::
+
+**Svelte** 프로젝트를 생성하는 방법은 여러 가지가 있습니다:
+
+- [**SvelteKit**](https://kit.svelte.dev/)을 사용할 수 있습니다
+
+또는
+
+- **Svelte with Vite** (SvelteKit 없이)를 사용할 수도 있습니다:
+
+~~~json
+npm create vite@latest
+~~~
+
+자세한 내용은 [관련 문서](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit)를 확인하십시오.
+
+### 의존성 설치 {#installation-of-dependencies}
+
+프로젝트 이름을 **my-svelte-richtext-app**으로 지정하고 앱 폴더로 이동합니다:
+
+~~~json
+cd my-svelte-richtext-app
+~~~
+
+의존성을 설치하고 dev server를 시작합니다. 패키지 매니저를 사용합니다:
+
+- [**yarn**](https://yarnpkg.com/)을 사용하는 경우 다음 명령어를 실행합니다:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- [**npm**](https://www.npmjs.com/)을 사용하는 경우 다음 명령어를 실행합니다:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+앱은 localhost에서 실행됩니다 (예: `http://localhost:3000`).
+
+## RichText 생성하기 {#creating-richtext}
+
+이제 DHTMLX RichText 소스 코드를 가져와야 합니다. 먼저 앱을 중지하고 RichText 패키지 설치를 진행합니다.
+
+### 1단계: 패키지 설치 {#step-1-package-installation}
+
+[**trial RichText 패키지**](/how_to_start/#installing-richtext-via-npm-or-yarn)를 다운로드하고 README 파일에 설명된 단계를 따르십시오. trial RichText는 30일 동안만 사용 가능합니다.
+
+### 2단계: 컴포넌트 생성 {#step-2-component-creation}
+
+이제 애플리케이션에 RichText를 추가하기 위한 Svelte 컴포넌트를 생성해야 합니다. ***src/*** 폴더에 새 파일을 생성하고 ***Richtext.svelte***로 이름을 지정합니다.
+
+#### 소스 파일 가져오기 {#importing-source-files}
+
+***Richtext.svelte*** 파일을 열고 RichText 소스 파일을 가져옵니다. 참고 사항:
+
+- PRO 버전을 사용하고 로컬 폴더에서 RichText 패키지를 설치한 경우, 가져오기 경로는 다음과 같습니다:
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- trial 버전의 RichText를 사용하는 경우, 다음 경로를 지정하십시오:
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+<script>
+~~~
+
+이 튜토리얼에서는 RichText의 **trial** 버전을 구성하는 방법을 확인할 수 있습니다.
+
+#### 컨테이너 설정 및 RichText 추가 {#setting-containers-and-adding-richtext}
+
+페이지에 RichText를 표시하려면 RichText용 컨테이너를 생성하고 해당 생성자를 사용하여 컴포넌트를 초기화해야 합니다:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+let richtext_container; // RichText용 컨테이너 초기화
+let editor;
+
+onMount(() => {
+    // RichText 컴포넌트 초기화
+    editor = new Richtext(richtext_container, {});
+});
+
+onDestroy(() => {
+    editor?.destructor(); // RichText 소멸
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+#### 데이터 로드하기 {#loading-data}
+
+RichText에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. ***src/*** 폴더에 ***data.js*** 파일을 생성하고 데이터를 추가합니다:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+그런 다음 ***App.svelte*** 파일을 열고 데이터를 가져와 새로 생성된 `<RichText/>` 컴포넌트에 **props**로 전달합니다:
+
+~~~html {} title="App.svelte"
+<script>
+import RichText from "./Richtext.svelte";
+import { getData } from "./data.js";
+
+const { value } = getData();
+</script>
+
+<RichText value={value} />
+~~~
+
+***Richtext.svelte*** 파일로 이동하여 전달된 **props**를 RichText 구성 객체에 적용합니다:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        value
+        // 다른 구성 속성들
+    })
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+Svelte의 `onMount()` 메서드 내에서 [`setValue()`](/api/methods/set-value.md) 메서드를 사용하여 RichText에 데이터를 로드할 수도 있습니다:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value;
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        // 다른 구성 속성들
+    })
+
+    editor.setValue(value);
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+이제 RichText 컴포넌트를 사용할 준비가 되었습니다. 요소가 페이지에 추가되면 데이터와 함께 RichText가 초기화됩니다. 필요한 구성 설정도 제공할 수 있습니다. [RichText API 문서](api/overview/main_overview.md)를 방문하여 사용 가능한 전체 속성 목록을 확인하십시오.
+
+#### 이벤트 처리 {#handling-events}
+
+사용자가 RichText에서 어떤 동작을 수행하면 이벤트가 발생합니다. 이러한 이벤트를 사용하여 동작을 감지하고 원하는 코드를 실행할 수 있습니다. [전체 이벤트 목록](api/overview/events_overview.md)을 참조하십시오.
+
+***Richtext.svelte***를 열고 `onMount()` 메서드를 다음과 같이 완성합니다:
+
+~~~html {} title="Richtext.svelte"
+<script>
+// ...
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {})
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+});
+
+onDestroy(() => {
+    editor?.destructor();
+});
+</script>
+
+// ...
+~~~
+
+### 3단계: 앱에 RichText 추가하기 {#step-3-adding-richtext-into-the-app}
+
+컴포넌트를 앱에 추가하려면 **App.svelte** 파일을 열고 기본 코드를 다음으로 교체합니다:
+
+~~~html title="App.svelte"
+<script>
+    import RichText from "./Richtext.svelte";
+    import { getData } from "./data.js";
+
+    const { value } = getData();
+</script>
+
+<RichText value={value}  />
+~~~
+
+이후 앱을 시작하면 페이지에 데이터가 로드된 RichText를 확인할 수 있습니다.
+
+<div className="img_border">
+![RichText 초기화](../assets/trial_richtext.png)
+</div>
+
+이제 DHTMLX RichText를 Svelte와 통합하는 방법을 알게 되었습니다. 요구 사항에 맞게 코드를 커스터마이즈할 수 있습니다. 최종 고급 예제는 [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo)에서 확인할 수 있습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
new file mode 100644
index 0000000..3ca8880
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
@@ -0,0 +1,279 @@
+---
+sidebar_label: Vue와의 통합
+title: Vue와의 통합
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 Vue와의 통합 방법을 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# Vue와의 통합
+
+:::tip[팁]
+이 문서를 읽기 전에 [**Vue**](https://vuejs.org/)의 기본 개념과 패턴에 익숙해지시기 바랍니다. 지식을 복습하려면 [**Vue 3 문서**](https://vuejs.org/guide/introduction.html#getting-started)를 참조하십시오.
+:::
+
+DHTMLX RichText는 **Vue**와 호환됩니다. DHTMLX RichText를 **Vue 3**와 함께 사용하는 방법에 대한 코드 예제를 준비했습니다. 자세한 내용은 해당 [**GitHub 예제**](https://github.com/DHTMLX/vue-richtext-demo)를 참조하십시오.
+
+## 프로젝트 생성하기 {#creating-a-project}
+
+:::info[정보]
+새 프로젝트를 시작하기 전에 [**Node.js**](https://nodejs.org/en/)를 설치하십시오.
+:::
+
+**Vue** 프로젝트를 생성하려면 다음 명령어를 실행합니다:
+
+~~~json
+npm create vue@latest
+~~~
+
+이 명령어는 공식 **Vue** 프로젝트 스캐폴딩 도구인 `create-vue`를 설치하고 실행합니다. 자세한 내용은 [Vue.js 빠른 시작](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)을 확인하십시오.
+
+프로젝트 이름을 **my-vue-richtext-app**으로 지정합니다.
+
+### 의존성 설치 {#installation-of-dependencies}
+
+앱 폴더로 이동합니다:
+
+~~~json
+cd my-vue-richtext-app
+~~~
+
+의존성을 설치하고 dev server를 시작합니다. 패키지 매니저를 사용합니다:
+
+- [**yarn**](https://yarnpkg.com/)을 사용하는 경우 다음 명령어를 실행합니다:
+
+~~~jsx
+yarn
+yarn start // 또는 yarn dev
+~~~
+
+- [**npm**](https://www.npmjs.com/)을 사용하는 경우 다음 명령어를 실행합니다:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+앱은 localhost에서 실행됩니다 (예: `http://localhost:3000`).
+
+## RichText 생성하기 {#creating-richtext}
+
+이제 DHTMLX RichText 소스 코드를 가져와야 합니다. 먼저 앱을 중지하고 RichText 패키지 설치를 진행합니다.
+
+### 1단계: 패키지 설치 {#step-1-package-installation}
+
+[**trial RichText 패키지**](/how_to_start/#installing-richtext-via-npm-or-yarn)를 다운로드하고 README 파일에 설명된 단계를 따르십시오. trial RichText는 30일 동안만 사용 가능합니다.
+
+### 2단계: 컴포넌트 생성 {#step-2-component-creation}
+
+이제 애플리케이션에 RichText를 추가하기 위한 Vue 컴포넌트를 생성해야 합니다. ***src/components/*** 폴더에 새 파일을 생성하고 ***Richtext.vue***로 이름을 지정합니다.
+
+#### 소스 파일 가져오기 {#import-source-files}
+
+***Richtext.vue*** 파일을 열고 RichText 소스 파일을 가져옵니다. 참고 사항:
+
+- PRO 버전을 사용하고 로컬 폴더에서 RichText 패키지를 설치한 경우, 가져오기 경로는 다음과 같습니다:
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- trial 버전의 RichText를 사용하는 경우, 다음 경로를 지정하십시오:
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+</script>
+~~~
+
+이 튜토리얼에서는 RichText의 **trial** 버전을 구성하는 방법을 확인할 수 있습니다.
+
+#### 컨테이너 설정 및 RichText 추가 {#setting-containers-and-adding-richtext}
+
+페이지에 RichText를 표시하려면 RichText용 컨테이너를 생성하고 해당 생성자를 사용하여 컴포넌트를 초기화해야 합니다:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    mounted() {
+        // RichText 컴포넌트 초기화
+        this.editor = new Richtext(this.$refs.richtext_container, {});
+    },
+
+    unmounted() {
+        this.editor.destructor(); // RichText 소멸
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+#### 스타일 추가 {#adding-styles}
+
+RichText를 올바르게 표시하려면 프로젝트의 메인 CSS 파일에 RichText 및 컨테이너에 대한 중요한 스타일을 지정해야 합니다:
+
+~~~css title="main.css"
+/* 초기 페이지 스타일 지정 */
+html,
+body,
+#app { /* #app 루트 컨테이너를 사용하는지 확인하십시오 */
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* RichText 컨테이너 스타일 지정 */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* RichText 위젯 스타일 지정 */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### 데이터 로드하기 {#loading-data}
+
+RichText에 데이터를 추가하려면 데이터 세트를 제공해야 합니다. ***src/*** 폴더에 ***data.js*** 파일을 생성하고 데이터를 추가합니다:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+그런 다음 ***App.vue*** 파일을 열고 데이터를 가져와 내부 `data()` 메서드를 통해 초기화합니다. 이후 새로 생성된 `<RichText/>` 컴포넌트에 데이터를 **props**로 전달할 수 있습니다:
+
+~~~html {} title="App.vue"
+<script>
+import RichText from "./components/Richtext.vue";
+import { getData } from "./data";
+
+export default {
+    components: { RichText },
+    data() {
+        const { value } = getData();
+        return { value };
+    }
+};
+</script>
+
+<template>
+    <RichText :value="value" />
+</template>
+~~~
+
+***Richtext.vue*** 파일로 이동하여 전달된 **props**를 RichText 구성 객체에 적용합니다:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            value: this.value,
+            // 다른 구성 속성들
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+Vue의 `mounted()` 메서드 내에서 [`setValue()`](api/methods/set-value.md) 메서드를 사용하여 RichText에 데이터를 로드할 수도 있습니다:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            // 다른 구성 속성들
+        });
+
+        this.editor.setValue(this.value);
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+이제 RichText 컴포넌트를 사용할 준비가 되었습니다. 요소가 페이지에 추가되면 데이터와 함께 RichText가 초기화됩니다. 필요한 구성 설정도 제공할 수 있습니다. [RichText API 문서](api/overview/main_overview.md)를 방문하여 사용 가능한 전체 속성 목록을 확인하십시오.
+
+#### 이벤트 처리 {#handling-events}
+
+사용자가 RichText에서 어떤 동작을 수행하면 이벤트가 발생합니다. 이러한 이벤트를 사용하여 동작을 감지하고 원하는 코드를 실행할 수 있습니다. [전체 이벤트 목록](api/overview/events_overview.md)을 참조하십시오.
+
+***Richtext.vue***를 열고 `mounted()` 메서드를 완성합니다:
+
+~~~html {} title="Richtext.vue"
+<script>
+// ...
+export default {
+    // ...
+    mounted() {
+        this.editor = new Richtext(this.$refs.cont, {});
+
+        this.editor.api.on("print", () => {
+            console.log("The document is printing");
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+}
+</script>
+
+// ...
+~~~
+
+이후 앱을 시작하면 페이지에 데이터가 로드된 RichText를 확인할 수 있습니다.
+
+<div className="img_border">
+![RichText 초기화](../assets/trial_richtext.png)
+</div>
+
+이제 DHTMLX RichText를 Vue와 통합하는 방법을 알게 되었습니다. 요구 사항에 맞게 코드를 커스터마이즈할 수 있습니다. 최종 고급 예제는 [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo)에서 확인할 수 있습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md
new file mode 100644
index 0000000..e555047
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md
@@ -0,0 +1,474 @@
+---
+sidebar_label: 로컬라이제이션
+title: 로컬라이제이션
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 로컬라이제이션 방법을 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# 로컬라이제이션
+
+JavaScript RichText 인터페이스의 모든 레이블을 로컬라이즈할 수 있습니다. 이를 위해 새 로케일을 생성하거나 기본 제공 로케일을 수정한 후 RichText에 적용합니다.
+
+## 기본 로케일 {#default-locale}
+
+기본값으로 **영어** 로케일이 사용됩니다:
+
+~~~jsx
+const en = {
+    richtext: {
+        // 버튼/동작
+        Undo: "Undo",
+        Redo: "Redo",
+        Style: "Style",
+        "Font family": "Font family",
+        "Font size": "Font size",
+        Bold: "Bold",
+        Italic: "Italic",
+        Underline: "Underline",
+        Strikethrough: "Strikethrough",
+        Subscript: "Subscript",
+        Superscript: "Superscript",
+        "Text color": "Text color",
+        "Background color": "Background color",
+        "Left align": "Left align",
+        "Center align": "Center align",
+        "Right align": "Right align",
+        Justify: "Justify",
+        "Line height": "Line height",
+        Outdent: "Outdent",
+        Indent: "Indent",
+        "Insert link": "Insert link",
+        "Insert image": "Insert image",
+        "Insert horizontal line": "Insert horizontal line",
+        "Clear formatting": "Clear formatting",
+        Print: "Print",
+        "Fullscreen mode": "Fullscreen mode",
+        "Layout mode": "Layout mode",
+        "Classic mode": "Classic mode",
+        "Document mode": "Document mode",
+
+        // menubar 전용 옵션
+        File: "File",
+        Import: "Import",
+        Export: "Export",
+        Edit: "Edit",
+        Cut: "Cut",
+        Copy: "Copy",
+        Paste: "Paste",
+        View: "View",
+        Insert: "Insert",
+        Format: "Format",
+        Help: "Help",
+        New: "New",
+        Link: "Link",
+        Image: "Image",
+        "Horizontal line": "Horizontal line",
+        Text: "Text",
+        "Heading 1": "Heading 1",
+        "Heading 2": "Heading 2",
+        "Heading 3": "Heading 3",
+        "Heading 4": "Heading 4",
+        "Heading 5": "Heading 5",
+        "Heading 6": "Heading 6",
+        Align: "Align",
+        Left: "Left",
+        Center: "Center",
+        Right: "Right",
+        Justified: "Justified",
+        "Keyboard shortcuts": "Keyboard shortcuts",
+
+        // 클립보드
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation failed. Please check your browser's clipboard permissions.",
+
+        // 블록 스타일 드롭다운
+        Heading: "Heading",
+        Quote: "Quote",
+        Paragraph: "Paragraph",
+        "Text style": "Text style",
+        Lists: "Lists",
+
+        normal: "normal",
+        default: "default",
+
+        // 목록
+        "Bulleted list": "Bulleted list",
+        "Numbered list": "Numbered list",
+
+        // 링크
+        "Enter text to display": "Enter text to display",
+        "Paste link": "Paste link",
+        "Link copied to clipboard": "Link copied to clipboard",
+
+        // 단축키 그룹
+        "Text formatting": "Text formatting",
+        Editing: "Editing",
+        "Special actions": "Special actions",
+
+        // 색상
+        Black: "Black",
+        Gray: "Gray",
+        White: "White",
+        Red: "Red",
+        Orange: "Orange",
+        Yellow: "Yellow",
+        Lime: "Lime",
+        Green: "Green",
+        Teal: "Teal",
+        Cyan: "Cyan",
+        Blue: "Blue",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // 음영
+        "Light gray": "Light gray",
+        "Medium gray": "Medium gray",
+        "Dark gray": "Dark gray",
+        "Light red": "Light red",
+        "Medium red": "Medium red",
+        "Dark red": "Dark red",
+        "Light orange": "Light orange",
+        "Medium orange": "Medium orange",
+        "Dark orange": "Dark orange",
+        "Light yellow": "Light yellow",
+        "Medium yellow": "Medium yellow",
+        "Dark yellow": "Dark yellow",
+        "Light lime": "Light lime",
+        "Medium lime": "Medium lime",
+        "Dark lime": "Dark lime",
+        "Light green": "Light green",
+        "Medium green": "Medium green",
+        "Dark green": "Dark green",
+        "Light teal": "Light teal",
+        "Medium teal": "Medium teal",
+        "Dark teal": "Dark teal",
+        "Light cyan": "Light cyan",
+        "Medium cyan": "Medium cyan",
+        "Dark cyan": "Dark cyan",
+        "Light blue": "Light blue",
+        "Medium blue": "Medium blue",
+        "Dark blue": "Dark blue",
+        "Light indigo": "Light indigo",
+        "Medium indigo": "Medium indigo",
+        "Dark indigo": "Dark indigo",
+        "Light magenta": "Light magenta",
+        "Medium magenta": "Medium magenta",
+        "Dark magenta": "Dark magenta"
+    }
+};
+~~~
+
+:::info[정보]
+기본 ***en*** 로케일(*영어*) 외에도 RichText에는 내장된 ***de*** (*독일어*)와 ***cn*** (*중국어*) 로케일도 포함되어 있습니다.
+:::
+
+<details>
+<summary><b>de</b> 로케일</summary>
+
+~~~jsx
+const de = {
+    richtext: {
+        // 버튼/동작
+        Undo: "Rückgängig",
+        Redo: "Wiederholen",
+        Style: "Stil",
+        "Font family": "Schriftart",
+        "Font size": "Schriftgröße",
+        Bold: "Fett",
+        Italic: "Kursiv",
+        Underline: "Unterstrichen",
+        Strikethrough: "Durchgestrichen",
+        Subscript: "Tiefgestellt",
+        Superscript: "Hochgestellt",
+        "Text color": "Textfarbe",
+        "Background color": "Hintergrundfarbe",
+        "Left align": "Linksbündig",
+        "Center align": "Zentriert",
+        "Right align": "Rechtsbündig",
+        Justify: "Blocksatz",
+        "Line height": "Zeilenhöhe",
+        Outdent: "Einzug verringern",
+        Indent: "Einzug erhöhen",
+        "Insert link": "Link einfügen",
+        "Insert image": "Bild einfügen",
+        "Insert horizontal line": "Horizontale Linie einfügen",
+        "Clear formatting": "Formatierung löschen",
+        Print: "Drucken",
+        "Fullscreen mode": "Vollbildmodus",
+        "Layout mode": "Layout-Modus",
+        "Classic mode": "Klassischer Modus",
+        "Document mode": "Dokumentenmodus",
+
+        // menubar 전용 옵션
+        File: "Datei",
+        Import: "Importieren",
+        Export: "Exportieren",
+        Edit: "Bearbeiten",
+        Cut: "Ausschneiden",
+        Copy: "Kopieren",
+        Paste: "Einfügen",
+        View: "Ansicht",
+        Insert: "Einfügen",
+        Format: "Format",
+        Help: "Hilfe",
+        New: "Neu",
+        Link: "Link",
+        Image: "Bild",
+        "Horizontal line": "Horizontale Linie",
+        Text: "Text",
+        "Heading 1": "Überschrift 1",
+        "Heading 2": "Überschrift 2",
+        "Heading 3": "Überschrift 3",
+        "Heading 4": "Überschrift 4",
+        "Heading 5": "Überschrift 5",
+        "Heading 6": "Überschrift 6",
+        Align: "Ausrichten",
+        Left: "Links",
+        Center: "Zentriert",
+        Right: "Rechts",
+        Justified: "Blocksatz",
+        "Keyboard shortcuts": "Tastenkürzel",
+
+        // 클립보드
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.",
+
+        // 블록 스타일 드롭다운
+        Heading: "Überschrift",
+        Quote: "Zitat",
+        Paragraph: "Absatz",
+        "Text style": "Textstil",
+        Lists: "Listen",
+
+        normal: "normal",
+        default: "standard",
+
+        // 목록
+        "Bulleted list": "Liste mit Aufzählungszeichen",
+        "Numbered list": "Nummerierte Liste",
+
+        // 링크
+        "Enter text to display": "Text zum Anzeigen eingeben",
+        "Paste link": "Link einfügen",
+        "Link copied to clipboard": "Link in die Zwischenablage kopiert",
+
+        // 단축키 그룹
+        "Text formatting": "Textformatierung",
+        Editing: "Bearbeitung",
+        "Special actions": "Spezielle Aktionen",
+
+        // 색상
+        Black: "Schwarz",
+        Gray: "Grau",
+        White: "Weiß",
+        Red: "Rot",
+        Orange: "Orange",
+        Yellow: "Gelb",
+        Lime: "Limette",
+        Green: "Grün",
+        Teal: "Türkis",
+        Cyan: "Cyan",
+        Blue: "Blau",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // 음영
+        "Light gray": "Hellgrau",
+        "Medium gray": "Mittelgrau",
+        "Dark gray": "Dunkelgrau",
+        "Light red": "Hellrot",
+        "Medium red": "Mittelrot",
+        "Dark red": "Dunkelrot",
+        "Light orange": "Hellorange",
+        "Medium orange": "Mittelorange",
+        "Dark orange": "Dunkelorange",
+        "Light yellow": "Hellgelb",
+        "Medium yellow": "Mittleres Gelb",
+        "Dark yellow": "Dunkelgelb",
+        "Light lime": "Hellgrün",
+        "Medium lime": "Mittleres Grün",
+        "Dark lime": "Dunkelgrün",
+        "Light green": "Hellgrün",
+        "Medium green": "Mittleres Grün",
+        "Dark green": "Dunkelgrün",
+        "Light teal": "Hellblau",
+        "Medium teal": "Mittelblau",
+        "Dark teal": "Dunkelblau",
+        "Light cyan": "Hellcyan",
+        "Medium cyan": "Mittleres Cyan",
+        "Dark cyan": "Dunkelcyan",
+        "Light blue": "Hellblau",
+        "Medium blue": "Mittelblau",
+        "Dark blue": "Dunkelblau",
+        "Light indigo": "Hellindigo",
+        "Medium indigo": "Mittelindigo",
+        "Dark indigo": "Dunkelindigo",
+        "Light magenta": "Hellmagenta",
+        "Medium magenta": "Mittleres Magenta",
+        "Dark magenta": "Dunkelmagenta"
+    }
+};
+~~~
+</details>
+
+<details>
+<summary><b>cn</b> 로케일</summary>
+
+~~~jsx
+const cn = {
+    richtext: {
+        // 버튼/동작
+        Undo: "撤销",
+        Redo: "重做",
+        Style: "样式",
+        "Font family": "字体",
+        "Font size": "字体大小",
+        Bold: "粗体",
+        Italic: "斜体",
+        Underline: "下划线",
+        Strikethrough: "删除线",
+        Subscript: "下标",
+        Superscript: "上标",
+        "Text color": "文本颜色",
+        "Background color": "背景颜色",
+        "Left align": "左对齐",
+        "Center align": "居中对齐",
+        "Right align": "右对齐",
+        Justify: "两端对齐",
+        "Line height": "行高",
+        Outdent: "减少缩进",
+        Indent: "增加缩进",
+        "Insert link": "插入链接",
+        "Insert image": "插入图片",
+        "Insert horizontal line": "插入水平线",
+        "Clear formatting": "清除格式",
+        Print: "打印",
+        "Fullscreen mode": "全屏模式",
+        "Layout mode": "布局模式",
+        "Classic mode": "经典模式",
+        "Document mode": "文档模式",
+
+        // menubar 전용 옵션
+        File: "文件",
+        Import: "导入",
+        Export: "导出",
+        Edit: "编辑",
+        Cut: "剪切",
+        Copy: "复制",
+        Paste: "粘贴",
+        View: "视图",
+        Insert: "插入",
+        Format: "格式",
+        Help: "帮助",
+        New: "新建",
+        Link: "链接",
+        Image: "图片",
+        "Horizontal line": "水平线",
+        Text: "文本",
+        "Heading 1": "标题 1",
+        "Heading 2": "标题 2",
+        "Heading 3": "标题 3",
+        "Heading 4": "标题 4",
+        "Heading 5": "标题 5",
+        "Heading 6": "标题 6",
+        Align: "对齐",
+        Left: "左",
+        Center: "居中",
+        Right: "右",
+        Justified: "两端对齐",
+        "Keyboard shortcuts": "键盘快捷键",
+
+        // 클립보드
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "操作失败。请检查浏览器的剪贴板权限。",
+
+        // 블록 스타일 드롭다운
+        Heading: "标题",
+        Quote: "引用",
+        Paragraph: "段落",
+        "Text style": "文本样式",
+        Lists: "列表",
+
+        normal: "普通的",
+        default: "默认",
+
+        // 목록
+        "Bulleted list": "项目符号列表",
+        "Numbered list": "编号列表",
+
+        // 링크
+        "Enter text to display": "输入要显示的文本",
+        "Paste link": "粘贴链接",
+        "Link copied to clipboard": "链接已复制到剪贴板",
+
+        // 단축키 그룹
+        "Text formatting": "文本格式化",
+        Editing: "编辑",
+        "Special actions": "特殊操作",
+
+        // 색상
+        Black: "黑色",
+        Gray: "灰色",
+        White: "白色",
+        Red: "红色",
+        Orange: "橙色",
+        Yellow: "黄色",
+        Lime: "酸橙色",
+        Green: "绿色",
+        Teal: "水鸭色",
+        Cyan: "青色",
+        Blue: "蓝色",
+        Indigo: "靛蓝色",
+        Magenta: "洋红色",
+
+        // 음영
+        "Light gray": "浅灰色",
+        "Medium gray": "中灰色",
+        "Dark gray": "深灰色",
+        "Light red": "浅红色",
+        "Medium red": "中红色",
+        "Dark red": "深红色",
+        "Light orange": "浅橙色",
+        "Medium orange": "中橙色",
+        "Dark orange": "深橙色",
+        "Light yellow": "浅黄色",
+        "Medium yellow": "中黄色",
+        "Dark yellow": "深黄色",
+        "Light lime": "浅酸橙色",
+        "Medium lime": "中酸橙色",
+        "Dark lime": "深酸橙色",
+        "Light green": "浅绿色",
+        "Medium green": "中绿色",
+        "Dark green": "深绿色",
+        "Light teal": "浅水鸭色",
+        "Medium teal": "中水鸭色",
+        "Dark teal": "深水鸭色",
+        "Light cyan": "浅青色",
+        "Medium cyan": "中青色",
+        "Dark cyan": "深青色",
+        "Light blue": "浅蓝色",
+        "Medium blue": "中蓝色",
+        "Dark blue": "深蓝色",
+        "Light indigo": "浅靛蓝色",
+        "Medium indigo": "中靛蓝色",
+        "Dark indigo": "深靛蓝色",
+        "Light magenta": "浅洋红色",
+        "Medium magenta": "中洋红色",
+        "Dark magenta": "深洋红色"
+    }
+};
+~~~
+</details>
+
+## 사용자 정의 로케일 {#custom-locale}
+
+사용자 정의 로케일을 적용하려면 다음을 수행합니다:
+
+- 사용자 정의 로케일을 생성하거나 기본 로케일을 수정하고, 모든 텍스트 레이블에 대한 번역을 제공합니다 (원하는 언어를 사용할 수 있습니다)
+
+- [`locale`](api/config/locale.md) 속성을 통해 새 로케일을 **RichText**에 적용하거나, [`setLocale()`](api/methods/set-locale.md) 메서드를 사용합니다
+
+## 예제 {#example}
+
+이 스니펫에서 여러 로케일 간에 전환하는 방법을 확인할 수 있습니다:
+
+<iframe src="https://snippet.dhtmlx.com/zxjrin3i?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/stylization.md
new file mode 100644
index 0000000..d86f3ad
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/stylization.md
@@ -0,0 +1,89 @@
+---
+title: 스타일링
+sidebar_label: 스타일링
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 스타일링 방법을 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# 스타일링
+
+CSS 변수를 재정의하고 위젯의 특정 부분에 사용자 정의 스타일을 적용하여 DHTMLX RichText의 외관을 완전히 커스터마이즈할 수 있습니다.
+
+이 가이드에서는 **다크 테마**를 적용하는 방법과, 편집기의 menubar, toolbar, 팝업, 콘텐츠 영역을 스타일링하는 데 사용할 수 있는 클래스 이름을 설명합니다.
+
+## 기본 구조와 클래스 이름 {#default-structure-and-class-names}
+
+RichText는 다음과 같은 핵심 클래스를 사용하여 UI를 구성합니다:
+
+| 클래스 이름             | 설명                                        |
+|------------------------|---------------------------------------------|
+| `.wx-richtext`         | RichText 위젯의 루트 컨테이너               |
+| `.wx-richtext-menubar` | menubar 컨테이너                            |
+| `.wx-richtext-menu`    | menubar 드롭다운 메뉴 컨테이너              |
+| `.wx-richtext-toolbar` | toolbar 컨테이너                            |
+| `.wx-editor-area`      | 메인 편집 가능 콘텐츠 영역 컨테이너         |
+
+이러한 클래스를 사용자 정의 CSS 선택자에 사용하여 RichText 편집기의 외관을 재정의할 수 있습니다.
+
+## 기본 스타일 재정의 {#overriding-default-styles}
+
+`#root` 컨테이너 또는 특정 하위 요소에서 CSS 변수를 재정의하여 RichText의 기본 스타일을 재정의할 수 있습니다:
+
+```html
+<div id="root" style="width: 100%; height: 100%;"></div>
+
+<style>
+  #root,
+  .wx-richtext-menu {
+    --wx-background: #404151;
+    --wx-background-alt: #212329;
+    --wx-color-primary: #14B195;
+    --wx-color-font: #FFFFFF;
+    --wx-border: 1px solid #6B6C79;
+    --wx-color-secondary-hover: rgba(20, 177, 149, 0.12);
+    --wx-button-active: rgba(20, 177, 149, 0.22);
+    --wx-icon-color: var(--wx-color-font);
+    --wx-color-font-alt: #9FA1AE;
+    --wx-color-font-disabled: #9FA1AE;
+    --wx-popup-border: var(--wx-border);
+
+    color-scheme: dark;
+  }
+
+  .wx-richtext-menu {
+    border: var(--wx-border);
+  }
+</style>
+```
+
+:::note[참고]
+이 스타일을 적용하면 어두운 배경이 설정되고, 버튼 및 아이콘 색상이 조정되며, 다크 UI 테마에서의 가시성이 개선됩니다.
+:::
+
+## 지원되는 CSS 변수 목록 {#list-of-supported-css-variables}
+
+| 변수 이름                    | 설명                                         |
+| ---------------------------- | -------------------------------------------- |
+| `--wx-background`            | 편집기 및 팝업의 배경색                       |
+| `--wx-background-alt`        | menubar의 대체 배경색                         |
+| `--wx-color-primary`         | 링크, 인용구, 이미지 크기 조정 테두리의 강조색 |
+| `--wx-color-font`            | 주요 글꼴 색상 (편집기, menubar, toolbar)     |
+| `--wx-color-font-alt`        | 대체 글꼴 색상                                |
+| `--wx-color-font-disabled`   | 비활성화된 텍스트 색상 (menubar 및 toolbar 요소) |
+| `--wx-border`                | 편집기 전반에 사용되는 테두리 스타일          |
+| `--wx-color-secondary-hover` | menubar 및 toolbar 내 버튼의 hover 상태 배경  |
+| `--wx-button-active`         | menubar 및 toolbar 내 버튼의 활성 상태 배경   |
+| `--wx-icon-color`            | 드롭다운에 사용되는 toolbar 화살표 아이콘 색상 |
+| `--wx-popup-border`          | 팝업 요소의 테두리                            |
+
+## 모범 사례 {#best-practices}
+
+* 다크 모드에서 네이티브 입력 스타일링을 개선하려면 `color-scheme: dark`를 사용하십시오
+* 꼭 필요한 경우가 아니라면 레이아웃 관련 속성 (`display`, `position` 등)의 변경을 피하십시오
+
+## 라이브 데모 {#live-demo}
+
+이 스니펫에서 RichText에 사용자 정의 스타일을 적용하는 방법을 확인할 수 있습니다:
+
+<iframe src="https://snippet.dhtmlx.com/q8j4qqq9?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+
+**관련 문서:** [Customization](guides/configuration.md)
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md
new file mode 100644
index 0000000..7399eed
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: TypeScript 지원
+title: TypeScript 지원
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 TypeScript 사용 방법을 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.
+---
+
+# TypeScript 지원
+
+v2.0부터 DHTMLX RichText 라이브러리는 TypeScript 정의를 사용할 수 있는 기능을 제공합니다. 내장된 TypeScript 지원은 별도의 설정 없이 즉시 사용할 수 있습니다.
+
+:::note[참고]
+<a href="https://snippet.dhtmlx.com/ziynafp7?tag=richtext" target="_blank">스니펫 도구</a>에서 직접 기능을 체험해 볼 수 있습니다.
+:::
+
+## TypeScript 사용의 장점 {#advantages-of-using-typescript}
+
+왜 DHTMLX RichText를 TypeScript와 함께 사용해야 할까요?
+
+TypeScript의 주요 장점은 개발 프로세스의 효율성을 크게 향상시킬 수 있다는 점입니다.
+
+자동 완성과 함께 타입 검사를 통해 잠재적인 실수를 방지할 수 있으므로 애플리케이션 구축 방식이 더욱 견고해집니다. 또한 TypeScript는 DHTMLX RichText 라이브러리의 API를 사용할 때 어떤 유형의 데이터를 사용해야 하는지에 대한 정보를 제공합니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md
new file mode 100644
index 0000000..004288d
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md
@@ -0,0 +1,109 @@
+---
+sidebar_label: 시작하기
+title: 시작하기
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 DHTMLX RichText 사용을 시작하는 방법을 확인하실 수 있습니다. 개발자 가이드 및 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드하십시오.
+---
+
+# 시작하기
+
+이 명확하고 포괄적인 튜토리얼은 페이지에서 완전히 작동하는 RichText를 구성하기 위해 필요한 단계를 안내합니다.
+
+<div className="img_border">
+![DHTMLX RichText 클래식 모드](./assets/richtext/classic_mode.png)
+</div>
+
+## 1단계. 소스 파일 포함 {#step-1-including-source-files}
+
+HTML 파일을 생성하고 *index.html*로 저장하는 것부터 시작하십시오. 그런 다음 생성된 파일에 RichText 소스 파일을 포함시키십시오.
+
+다음 두 가지 파일이 필요합니다:
+
+- RichText의 JS 파일
+- RichText의 CSS 파일
+
+~~~html {5-6} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <script>
+        // 여기에 코드를 작성하십시오
+        </script>
+    </body>
+</html>
+~~~
+
+### npm 또는 yarn으로 RichText 설치 {#installing-richtext-via-npm-or-yarn}
+
+**yarn** 또는 **npm** 패키지 관리자를 사용하여 JavaScript RichText를 프로젝트에 가져올 수 있습니다.
+
+#### npm 또는 yarn으로 체험판 RichText 설치 {#installing-trial-richtext-via-npm-or-yarn}
+
+:::info[정보]
+RichText 체험판을 사용하려면 [**체험판 RichText 패키지**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml)를 다운로드하고 *README* 파일에 명시된 단계를 따르십시오. 체험판 RichText는 30일 동안만 사용할 수 있습니다.
+:::
+
+#### npm 또는 yarn으로 PRO RichText 설치 {#installing-pro-richtext-via-npm-or-yarn}
+
+:::info[정보]
+[고객 영역](https://dhtmlx.com/clients/)에서 **npm** 로그인 및 비밀번호를 생성하여 DHTMLX 프라이빗 **npm**에 직접 접근할 수 있습니다. 상세한 설치 안내도 해당 페이지에서 확인할 수 있습니다. 프라이빗 **npm** 접근은 독점 RichText 라이선스가 활성 상태인 동안에만 가능합니다.
+:::
+
+## 2단계. RichText 생성 {#step-2-creating-richtext}
+
+이제 페이지에 RichText를 추가할 준비가 되었습니다. 먼저 RichText를 위한 `<div>` 컨테이너를 생성하겠습니다. 다음 단계를 따르십시오:
+
+- *index.html* 파일에 DIV 컨테이너 지정
+- `richtext.Richtext` 생성자를 사용하여 RichText 초기화
+
+생성자는 RichText가 배치될 HTML 컨테이너의 유효한 CSS 선택자와 해당 구성 객체를 매개변수로 받습니다.
+
+~~~html {9,12-14} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <div id="root"></div>
+
+        <script>
+            const editor = new richtext.Richtext("#root", {
+                // 구성 속성
+            });
+        </script>
+    </body>
+</html>
+~~~
+
+## 3단계. RichText 구성 {#step-3-configuring-richtext}
+
+다음으로 초기화 시 RichText 컴포넌트에 적용할 구성 속성을 지정할 수 있습니다.
+
+RichText 작업을 시작하려면 먼저 [`value`](api/config/value.md) 속성을 통해 에디터의 초기 데이터를 제공해야 합니다. 또한 [**메뉴바**](api/config/menubar.md) 활성화, [**툴바**](api/config/toolbar.md) 커스터마이징, [**전체 화면**](api/config/fullscreen-mode.md) 및 [**레이아웃**](api/config/layout-mode.md) 모드 지정, 새 [**로케일**](api/config/locale.md) 적용, [**기본 스타일**](api/config/default-styles.md) 설정이 가능합니다.
+
+~~~jsx {2-12}
+const editor = new richtext.Richtext("#root", {
+    menubar: true,
+    toolbar: false,
+    fullscreenMode: true,
+    layoutMode: "document",
+    locale: richtext.locales.cn
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        // 기타 설정
+    }
+});
+~~~
+
+## 다음 단계 {#whats-next}
+
+이것으로 끝입니다. 단 세 가지 간단한 단계만으로 콘텐츠를 편집하기 위한 편리한 도구를 갖추게 되었습니다. 이제 콘텐츠 작업을 시작하거나 JavaScript RichText의 내부 세계를 계속 탐색하실 수 있습니다.
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/index.md
new file mode 100644
index 0000000..a1ffbd1
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/index.md
@@ -0,0 +1,126 @@
+---
+sidebar_label: RichText 개요
+title: RichText 개요
+slug: /
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 전체 개요를 확인하실 수 있습니다. 개발자 가이드 및 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드하십시오.
+---
+
+# RichText 개요
+
+**DHTMLX RichText**는 JavaScript로 구축된 유연하고 경량의 WYSIWYG 에디터입니다. 현대 웹 애플리케이션에서 원활한 편집 경험을 제공하도록 설계된 RichText는 깔끔한 UI, 풍부한 서식 기능, 그리고 콘텐츠 렌더링에 대한 완전한 제어를 제공합니다. CMS, 내부 관리 도구, 또는 임베디드 문서 에디터를 구축하는 경우 모두, RichText는 필요에 맞게 쉽게 통합하고 커스터마이징할 수 있습니다.
+
+**DHTMLX RichText** 컴포넌트에는 다음 기능이 포함됩니다:
+
+- 두 가지 [**레이아웃 모드**](api/config/layout-mode.md)
+
+- 일반 텍스트 및 HTML 형식의 콘텐츠 직렬화
+
+- 기본 제공 버튼 및 커스텀 버튼을 포함한 구성 가능한 [**툴바**](api/config/toolbar.md)
+
+- 표시하거나 숨길 수 있는 정적 [**메뉴바**](api/config/menubar.md)
+
+- 이미지 업로드, 풍부한 서식, 커스텀 스타일, 전체 화면 모드
+
+- [이벤트 처리](api/overview/event_bus_methods_overview.md), [콘텐츠 조작](api/overview/methods_overview.md), [반응형 상태 관리](api/overview/state_methods_overview.md)를 위한 [전체 API 접근](api/overview/main_overview.md)
+
+RichText는 프레임워크에 구애받지 않으며 [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md), [Svelte](guides/integration_with_svelte.md) 프레임워크와 쉽게 통합할 수 있어 다양한 프론트엔드 생태계에 적합합니다.
+
+이 문서는 설치, 구성, 사용 및 커스터마이징에 대한 상세한 안내를 제공합니다. 일반적인 시나리오에 대한 예제, [전체 API 참조](api/overview/main_overview.md), 그리고 RichText를 애플리케이션에 임베드하기 위한 모범 사례를 찾아보실 수 있습니다.
+
+## RichText 구조 {#richtext-structure}
+
+### 메뉴바 {#menubar}
+
+RichText 메뉴바는 새 문서 작성, 인쇄, 콘텐츠 가져오기/내보내기 등의 편집 작업에 접근할 수 있게 합니다. 기본적으로 숨겨져 있습니다.
+
+[`menubar`](api/config/menubar.md) 속성을 사용하여 표시 여부를 전환하십시오. 메뉴바는 활성화 또는 비활성화할 수 있지만, 현재 시점에서 내용은 구성할 수 없습니다.
+
+<div className="img_border">
+![메뉴바](./assets/richtext/menubar.png)
+</div>
+
+### 툴바 {#toolbar}
+
+RichText 툴바는 텍스트 서식 및 구조적 편집 기능에 빠르게 접근할 수 있게 합니다. 기본적으로 [툴바](api/config/toolbar.md#default-config)가 활성화되어 있으며 굵게, 기울임꼴, 글꼴 설정, 목록 서식 등 일반적으로 사용되는 컨트롤의 사전 정의된 세트가 표시됩니다.
+
+[`toolbar`](api/config/toolbar.md) 속성을 통해 툴바의 내용과 레이아웃을 완전히 커스터마이징할 수 있습니다. 툴바를 활성화 또는 비활성화하거나, 기본 컨트롤을 재배열하거나, 사전 정의된 버튼 식별자 배열과 커스텀 버튼 객체를 사용하여 완전히 커스텀 툴바를 정의할 수 있습니다.
+
+<div className="img_border">
+![툴바](./assets/richtext/toolbar.png)
+</div>
+
+### 에디터 {#editor}
+
+RichText 에디터는 사용자가 콘텐츠를 작성하고 서식을 지정하는 중앙 영역입니다. [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md), [`defaultStyles`](api/config/default-styles.md)와 같은 구성 옵션을 통해 에디터의 외관과 동작을 제어할 수 있습니다. RichText는 또한 커스텀 스타일링, 이미지 임베딩, 그리고 애플리케이션 요구에 맞는 반응형 레이아웃 조정을 지원합니다.
+
+#### 두 가지 작동 모드 {#two-working-modes}
+
+DHTMLX RichText는 "classic" 및 "document" 모드로 콘텐츠를 다룰 수 있습니다. 텍스트를 편집할 때 가장 편안한 모드를 선택할 수 있습니다. [`layoutMode`](api/config/layout-mode.md) 속성을 사용하여 프로그래밍 방식으로 모드를 전환하십시오.
+
+- **"classic"**
+
+<div className="img_border">
+![클래식 모드](./assets/richtext/classic_mode.png)
+</div>
+
+- **"document"**
+
+<div className="img_border">
+![문서 모드](./assets/richtext/document_mode.png)
+</div>
+
+## 지원 형식 {#supported-formats}
+
+RichText 에디터는 **HTML** 및 일반 텍스트 형식의 콘텐츠 [파싱](api/methods/set-value.md)과 [직렬화](api/methods/get-value.md)를 지원합니다.
+
+#### HTML 형식 {#html-format}
+
+<div className="img_border">
+![HTML 형식](./assets/richtext/html_format.png)
+</div>
+
+#### 텍스트 형식 {#text-format}
+
+<div className="img_border">
+![텍스트 형식](./assets/richtext/text_format.png)
+</div>
+
+## 키보드 단축키 {#keyboard-shortcuts}
+
+RichText 에디터는 빠른 서식 지정 및 편집을 위한 일반적인 키보드 단축키 세트를 지원합니다. 단축키는 플랫폼 규약을 따르며 **Windows/Linux** (`Ctrl`)와 **macOS** (`⌘`) 모두에서 사용할 수 있습니다.
+
+### 텍스트 서식 {#text-formatting}
+
+| 작업            | Windows/Linux   | macOS         |
+|-----------------|-----------------|---------------|
+| 굵게*           | `Ctrl+B`        | `⌘B`          |
+| 기울임꼴        | `Ctrl+I`        | `⌘I`          |
+| 밑줄            | `Ctrl+U`        | `⌘U`          |
+| 취소선          | `Ctrl+Shift+X`  | `⌘⇧X`         |
+
+### 편집 {#editing}
+
+| 작업     | Windows/Linux            | macOS         |
+|----------|--------------------------|---------------|
+| 실행 취소 | `Ctrl+Z`                | `⌘Z`          |
+| 다시 실행 | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z`  |
+| 잘라내기  | `Ctrl+X`                | `⌘X`          |
+| 복사      | `Ctrl+C`                | `⌘C`          |
+| 붙여넣기  | `Ctrl+V`                | `⌘V`          |
+
+### 특수 작업 {#special-actions}
+
+| 작업         | Windows/Linux | macOS |
+|--------------|---------------|-------|
+| 링크 삽입    | `Ctrl+K`      | `⌘K`  |
+| 인쇄         | `Ctrl+P`      | `⌘P`  |
+
+:::info[정보]
+향후 업데이트에서 더 많은 단축키가 추가될 수 있습니다.
+:::
+
+RichText 키보드 단축키에 대한 최신 참조를 확인하려면 **도움말**을 누르고 **키보드 단축키** 옵션을 선택하십시오:
+
+<div className="img_border">
+![키보드 단축키](./assets/richtext/shortcut_reference.png)
+</div>
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/ko/docusaurus-plugin-content-docs/current/news/migration.md
new file mode 100644
index 0000000..b70356c
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/news/migration.md
@@ -0,0 +1,167 @@
+---
+sidebar_label: 최신 버전으로 마이그레이션
+title: 최신 버전으로 마이그레이션
+description: DHTMLX JavaScript RichText 라이브러리 문서에서 최신 버전으로의 마이그레이션에 대해 확인하실 수 있습니다. 개발자 가이드 및 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드하십시오.
+---
+
+# 최신 버전으로 마이그레이션
+
+## 1.2 -> 2.0 {#12---20}
+
+### 속성 마이그레이션 {#properties-migration}
+
+| 기존 속성       | 대체 항목                 | 비고                                          |
+| --------------- | ------------------------- | --------------------------------------------- |
+| `customStats`   | *(제거됨)*                | 새 버전 2.0에서 사용 불가                     |
+| `toolbarBlocks` | `toolbar`                 | 이제 상세한 툴바 구조를 지원합니다            |
+| `defaultStyles` | `defaultStyles` (업데이트) | 구조가 이제 블록별 및 CSS 기반으로 변경되었습니다 |
+| `mode`          | `layoutMode`              | 더 엄격한 열거형 기반 설정으로 대체되었습니다 |
+
+### - `customStats` {#--customstats}
+
+`customStats` 속성이 제거되었습니다. 현재 버전의 RichText는 더 이상 사용자 정의 통계(예: 문자 수, 단어 수, 문장 수) 표시를 지원하지 않습니다.
+
+텍스트 지표를 계산해야 하는 경우, 에디터 콘텐츠에 접근하여 수동으로 처리함으로써 외부에서 수행할 수 있습니다:
+
+```jsx
+const content = editor.getValue();
+const wordCount = content.split(/\s+/).length;
+```
+
+### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) {#--toolbarblocks--toolbar}
+
+**2.0** 이전에는 컨트롤이 포함된 블록만 지정할 수 있었습니다
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+  toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"]
+});
+```
+
+**2.0**부터는 개별 컨트롤을 지정할 수 있습니다
+```jsx{2-4} title="From 2.0"
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo", "style", "bold", "italic", "underline", "text-color",
+        "align", "link"
+    ]
+});
+```
+
+### - [`defaultStyles`](api/config/default-styles.md) {#--defaultstyles}
+
+**2.0** 이전에는 툴바 선택 컨트롤의 기본값을 정의할 수 있었습니다
+```jsx title="Before 2.0"
+defaultStyles: {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+}
+```
+
+**2.0**부터는 특정 블록 유형에 대한 기본 스타일 값을 지정할 수 있습니다
+```jsx title="From 2.0"
+defaultStyles: {
+  "*": {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+  },
+  h1: {
+    "font-size": "32px",
+    "color": "#333"
+  }
+}
+```
+
+:::note[참고]
+`*`를 사용하여 모든 블록의 기본값을 정의한 다음, 특정 요소(p, h1, blockquote 등)를 재정의하십시오.
+:::
+
+### - `mode` → [`layoutMode`](api/config/layout-mode.md) {#--mode--layoutmode}
+
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+    mode: "document"
+});
+```
+
+```jsx{2} title="From 2.0"
+new Richtext("#root", {
+    layoutMode: "document" // 또는 "classic"
+});
+```
+
+새 [`layoutMode`](api/config/layout-mode.md)는 `"classic"` 및 `"document"` 값만 엄격히 지원합니다.
+
+### 메서드 마이그레이션 {#methods-migration}
+
+| 기존 메서드             | 새 동등 항목                         | 비고                                                              |
+| ----------------------- | ------------------------------------ | ----------------------------------------------------------------- |
+| `getValue(mode)`        | `getValue(encoder)`                  | 인코더가 문자열 모드를 대체하며, 인코더에는 별도의 가져오기가 필요합니다 |
+| `setValue(value, mode)` | `setValue(value, encoder)`           | 인코더가 문자열 모드를 대체하며, 인코더에는 별도의 가져오기가 필요합니다 |
+| `getStats()`            | *제거됨*                             | 대체 항목 없음; 수동 로직 필요                                    |
+| `getEditorAPI()`        | *제거됨*                             | 내부용; 대신 공개 API 사용                                        |
+| `fire()`                | *제거됨*                             | `exec()` 및 `intercept()`로 대체됨                                |
+| `on()`, `detach()`      | ✅ 유지됨 (`api.on`, `api.detach`)   | 이제 `richtext.api`를 통해 접근                                   |
+| `fullScreen()`          | *제거됨*                             | `fullscreenMode` 구성 속성 사용                                   |
+| `exitFullScreen()`      | *제거됨*                             | `fullscreenMode` 구성 속성 사용                                   |
+| `paint()`               | *제거됨*                             | 더 이상 필요하지 않음                                             |
+| `destructor()`          | ✅ 여전히 사용 가능                  | 변경 없음                                                         |
+| `setConfig()`           | ✅ 신규                              | 실시간 구성 업데이트 가능                                         |
+| `setLocale()`           | ✅ 신규                              | 동적 로케일 전환 허용                                             |
+| `getReactiveState()`    | ✅ 신규                              | 반응형 상태 추적 가능                                             |
+| `getState()`            | ✅ 신규                              | 현재 정적 구성 상태 제공                                          |
+| `intercept()`           | ✅ 신규                              | 내부 작업 인터셉트                                                |
+| `exec()`                | ✅ 신규                              | 내부 작업 실행                                                    |
+
+### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) {#--setvalue--getvalue}
+
+```jsx title="Before 2.0"
+...
+editor.setValue("<p>Hello</p>", "html");
+editor.getValue("text");
+```
+
+```jsx title="From 2.0"
+const fromTextEncoder = richtext.text.fromText;
+const fromHTMLEncoder = richtext.html.fromHTML;
+
+const toTextEncoder = richtext.text.toText;
+const toHTMLEncoder = richtext.html.toHTML;
+...
+editor.setValue("<p>Hello</p>", fromHTMLEncoder);
+editor.getValue(toTextEncoder);
+```
+
+:::note[참고]
+인코더 없이 `getValue()` 및 `setValue()`를 호출할 수도 있습니다 — 기본적으로 HTML이 사용됩니다
+:::
+
+### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) {#--on--detach}
+
+```jsx title="Before 2.0"
+editor.events.on("Change", function(action, canUndo, canRedo){
+  // 여기에 코드를 작성하십시오
+});
+
+editor.events.detach("Change");
+```
+
+```jsx title="From 2.0"
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+```
+
+### - `fire()` → [`exec()`](api/internal/exec.md) 및 [`intercept()`](api/internal/intercept.md) 사용 {#--fire--use-exec-and-intercept}
+
+```jsx title="Before 2.0"
+editor.events.fire("some-event", [data]);
+```
+
+```jsx title="From 2.0"
+editor.api.exec("some-event", obj);
+
+// 실행 방지
+editor.api.intercept("some-event", (obj) => false);
+```
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/ko/docusaurus-plugin-content-docs/current/news/whats_new.md
new file mode 100644
index 0000000..8c915d8
--- /dev/null
+++ b/i18n/ko/docusaurus-plugin-content-docs/current/news/whats_new.md
@@ -0,0 +1,192 @@
+---
+sidebar_label: 새 소식
+title: 새 소식
+description: DHTMLX JavaScript UI 라이브러리 문서에서 DHTMLX RichText의 새 소식과 릴리스 이력을 확인하실 수 있습니다. 개발자 가이드 및 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드하십시오.
+---
+
+## 버전 2.0.5 {#version-205}
+
+2026년 3월 6일 출시
+
+### 수정 사항 {#fixes}
+
+- IME 입력이 올바르게 처리되지 않는 문제
+- 데스크탑에서 조합 기반 입력(예: 중국어, 일본어, 한국어)이 올바르게 처리되지 않는 문제
+- HTML 파싱 시 `margin-left` 및 `line-height` 속성이 무시되는 문제
+- 인라인 요소가 블록 수준 부모의 속성을 상속하는 문제
+- 두 에디터 인스턴스 간에 텍스트를 복사할 수 없는 문제
+- 두 개 이상의 에디터 인스턴스가 활성화된 경우 선택 영역이 올바르게 처리되지 않는 문제
+- 단락 내 유일한 콘텐츠가 이미지인 경우 커서가 올바르게 위치하지 않는 문제
+- 아래 첨자 및 위 첨자 요소의 무한 래핑 문제
+- 이미지를 붙여넣을 때 먼저 업로드하지 않고 인라인으로 삽입되는 문제
+- 특정 위치(첫 번째 또는 마지막 줄)에서 빈 인라인 블록을 제거할 수 없는 문제
+- 타이핑 시 에디터가 커서로 스크롤되지 않는 문제
+- Android에서 입력이 올바르게 처리되지 않는 문제
+- HR 요소에 대한 선택 처리가 올바르지 않은 문제
+- 빈 초기값으로 렌더링이 올바르지 않은 문제
+- 자기 닫힘 블록이 포함된 경우 콘텐츠 복사가 실패할 수 있는 문제
+- Chrome: 컨텍스트 메뉴에서 이모지를 삽입할 수 없는 문제
+- Firefox: 전체 선택(CTRL+A)이 올바르게 처리되지 않는 문제
+
+## 버전 2.0.4 {#version-204}
+
+2025년 10월 15일 출시
+
+### 수정 사항 {#fixes-1}
+
+- 단락에 대한 범위 선택이 올바르지 않은 문제
+- 링크된 이미지에 인접한 경우 링크 팝업이 표시되지 않는 문제
+- 초기 툴바 값이 실제 콘텐츠를 정확히 반영하지 않는 문제
+
+## 버전 2.0.3 {#version-203}
+
+2025년 8월 27일 출시
+
+### 수정 사항 {#fixes-2}
+
+- 수평선 클릭 시 스크립트 오류가 발생하는 문제
+- 기본 줄 높이가 올바르지 않은 문제
+- 콘텐츠 스타일에 중복 선택자가 포함되는 문제
+- 일반 텍스트 블록이 HTML 파싱 시 스타일 변경을 무시하는 문제
+- 파서가 HTML에서 이스케이프된 글꼴 이름을 무시하는 문제
+- 파서가 HTML에서 `margin-left` 및 `line-height` 속성을 무시하는 문제
+
+## 버전 2.0.2 {#version-202}
+
+2025년 8월 4일 출시
+
+### 수정 사항 {#fixes-3}
+
+- 패키지 내용 업데이트
+
+## 버전 2.0.1 {#version-201}
+
+2025년 7월 30일 출시
+
+### 수정 사항 {#fixes-4}
+
+- `defaultStyles` 속성의 타입 정의 업데이트
+
+## 버전 2.0 {#version-20}
+
+2025년 7월 30일 출시
+
+:::note[참고]
+v1.2의 API는 v2.0과 호환되지 않습니다. 추가 정보는 [**마이그레이션 가이드**](news/migration.md)를 참조하십시오.
+:::
+
+### 새 기능 {#new-functionality}
+
+- **차세대 텍스트 렌더링**
+  새 엔진으로 더 부드럽고 빠르며 정확한 텍스트 렌더링을 경험하십시오
+
+- **세밀한 툴바 구성**
+  툴바를 완전히 제어하십시오:
+  - [개별 툴바 컨트롤](guides/configuration.md/#default-toolbar-controls) 및 순서 정의
+  - [커스텀 컨트롤](guides/configuration.md/#custom-toolbar-controls) 추가
+
+- **선택적 [메뉴바](api/config/menubar.md)**
+  에디터 상단에 클래식 메뉴 스타일 인터페이스 활성화
+
+- **향상된 [문서 모드](guides/configuration.md/#layout-modes)**
+  다양한 문서 크기 지원 추가
+
+- **이미지 지원**
+  - [업로드 기능](api/config/image-upload-url.md)을 통한 이미지 삽입
+  - 이미지 [대화형 크기 조정](api/events/resize-image.md)
+
+- **개선된 링크 경험**
+  더 나은 사용성을 위한 [팝업 상호작용](api/events/show-popup.md) 재설계
+
+- **새 서식 도구**
+  - 텍스트 정렬: **균등 배분**
+  - [수평선](api/events/insert-line.md) 삽입
+  - [들여쓰기](api/events/indent.md) / [내어쓰기](api/events/outdent.md)
+  - [줄 높이](api/events/set-line-height.md) 설정
+  - [아래 첨자](api/events/subscript.md) / [위 첨자](api/events/superscript.md) 적용
+
+- **목록 관리**
+  콘텐츠에서 [목록을 쉽게 삽입 및 관리](api/events/insert-list.md)
+
+- **가져오기/내보내기 및 인쇄**
+  - [DOCX 가져오기](api/events/import.md)
+  - 콘텐츠를 DOCX 또는 PDF로 [내보내기](api/events/export.md)
+  - 에디터에서 직접 문서 [인쇄](api/events/print.md)
+
+- **키보드 단축키**
+  일반적인 서식 및 편집 단축키에 대한 지원 확장
+
+### 새 API {#new-api}
+
+#### 새 속성 {#new-properties}
+
+- [`fullscreenMode`](api/config/fullscreen-mode.md)
+- [`imageUploadUrl`](api/config/image-upload-url.md)
+- [`layoutMode`](api/config/layout-mode.md)
+- [`locale`](api/config/locale.md)
+- [`menubar`](api/config/menubar.md)
+- [`toolbar`](api/config/toolbar.md)
+- [`value`](api/config/value.md)
+
+#### 새 메서드 {#new-methods}
+
+- [`setConfig()`](api/methods/set-config.md) — 구성 동적 업데이트
+- [`setLocale()`](api/methods/set-locale.md) — 실시간 로케일 변경
+
+#### 새 내부 메서드 {#new-internal-methods}
+
+- [`api.exec()`](api/internal/exec.md)
+- [`api.intercept()`](api/internal/intercept.md)
+- [`api.getReactiveState()`](api/internal/get-reactive-state.md)
+- [`api.getState()`](api/internal/get-state.md)
+
+#### 새 이벤트 {#new-events}
+
+새 이벤트 전체 목록은 [여기](api/overview/events_overview.md)에서 확인하실 수 있습니다
+
+### 업데이트된 API {#updated-api}
+
+#### 업데이트된 속성 {#updated-properties}
+
+- [`defaultStyles`](api/config/default-styles.md)
+
+#### 업데이트된 메서드 {#updated-methods}
+
+- [`setValue()`](api/methods/set-value.md)
+- [`getValue()`](api/methods/get-value.md)
+
+#### 업데이트된 내부 메서드 {#updated-internal-methods}
+
+- [`api.detach()`](api/internal/detach.md)
+- [`api.on()`](api/internal/on.md)
+
+## 제거된 API {#removed-api}
+
+:::warning[경고]
+제거된 API를 프로젝트에 사용하지 마십시오! <br/> 자세한 내용은 [마이그레이션](news/migration.md) 항목을 참조하십시오.
+:::
+
+### [제거된 속성](news/migration.md#properties-migration) {#removed-properties}
+
+- [`customStats`](news/migration.md#--customstats)
+- [`mode`](news/migration.md#--mode--layoutmode)
+- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar)
+
+### [제거된 메서드](news/migration.md#methods-migration) {#removed-methods}
+
+- `exitFullScreen()`
+- `fullScreen()`
+- `getEditorAPI()`
+- `getStats()`
+- `paint()`
+
+### 제거된 내부 메서드 {#removed-internal-methods}
+
+- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept)
+
+### 제거된 이벤트 {#removed-events}
+
+- `Action`
+- `Change`
+- `selectionChange`
+- `selectionRefresh`
diff --git a/i18n/ko/docusaurus-theme-classic/footer.json b/i18n/ko/docusaurus-theme-classic/footer.json
new file mode 100644
index 0000000..cb5c883
--- /dev/null
+++ b/i18n/ko/docusaurus-theme-classic/footer.json
@@ -0,0 +1,62 @@
+{
+  "link.title.Development center": {
+    "message": "Development center",
+    "description": "The title of the footer links column with title=Development center in the footer"
+  },
+  "link.title.Community": {
+    "message": "Community",
+    "description": "The title of the footer links column with title=Community in the footer"
+  },
+  "link.title.Company": {
+    "message": "Company",
+    "description": "The title of the footer links column with title=Company in the footer"
+  },
+  "link.item.label.Download RichText": {
+    "message": "Download RichText",
+    "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml"
+  },
+  "link.item.label.Examples": {
+    "message": "Examples",
+    "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext"
+  },
+  "link.item.label.Blog": {
+    "message": "Blog",
+    "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/"
+  },
+  "link.item.label.Forum": {
+    "message": "Forum",
+    "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/"
+  },
+  "link.item.label.GitHub": {
+    "message": "GitHub",
+    "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX"
+  },
+  "link.item.label.Youtube": {
+    "message": "Youtube",
+    "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx"
+  },
+  "link.item.label.Facebook": {
+    "message": "Facebook",
+    "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx"
+  },
+  "link.item.label.Twitter": {
+    "message": "Twitter",
+    "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx"
+  },
+  "link.item.label.Linkedin": {
+    "message": "Linkedin",
+    "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/"
+  },
+  "link.item.label.About us": {
+    "message": "About us",
+    "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml"
+  },
+  "link.item.label.Contact us": {
+    "message": "Contact us",
+    "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml"
+  },
+  "link.item.label.Licensing": {
+    "message": "Licensing",
+    "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses"
+  }
+}
diff --git a/i18n/ko/docusaurus-theme-classic/navbar.json b/i18n/ko/docusaurus-theme-classic/navbar.json
new file mode 100644
index 0000000..cdc91aa
--- /dev/null
+++ b/i18n/ko/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,26 @@
+{
+  "title": {
+    "message": "JavaScript RichText Documentation",
+    "description": "The title in the navbar"
+  },
+  "logo.alt": {
+    "message": "DHTMLX RichText Documentation",
+    "description": "The alt text of navbar logo"
+  },
+  "item.label.Examples": {
+    "message": "Examples",
+    "description": "Navbar item with label Examples"
+  },
+  "item.label.Forum": {
+    "message": "Forum",
+    "description": "Navbar item with label Forum"
+  },
+  "item.label.Support": {
+    "message": "Support",
+    "description": "Navbar item with label Support"
+  },
+  "item.label.Download": {
+    "message": "Download",
+    "description": "Navbar item with label Download"
+  }
+}
diff --git a/i18n/ru/code.json b/i18n/ru/code.json
new file mode 100644
index 0000000..8a00c56
--- /dev/null
+++ b/i18n/ru/code.json
@@ -0,0 +1,560 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "На странице произошёл сбой.",
+    "description": "The title of the fallback page when the page crashed"
+  },
+  "theme.BackToTopButton.buttonAriaLabel": {
+    "message": "Прокрутка к началу",
+    "description": "The ARIA label for the back to top button"
+  },
+  "theme.blog.archive.title": {
+    "message": "Архив",
+    "description": "The page & hero title of the blog archive page"
+  },
+  "theme.blog.archive.description": {
+    "message": "Архив",
+    "description": "The page & hero description of the blog archive page"
+  },
+  "theme.blog.paginator.navAriaLabel": {
+    "message": "Навигация по странице списка блогов",
+    "description": "The ARIA label for the blog pagination"
+  },
+  "theme.blog.paginator.newerEntries": {
+    "message": "Следующие записи",
+    "description": "The label used to navigate to the newer blog posts page (previous page)"
+  },
+  "theme.blog.paginator.olderEntries": {
+    "message": "Предыдущие записи",
+    "description": "The label used to navigate to the older blog posts page (next page)"
+  },
+  "theme.blog.post.paginator.navAriaLabel": {
+    "message": "Навигация по странице поста блога",
+    "description": "The ARIA label for the blog posts pagination"
+  },
+  "theme.blog.post.paginator.newerPost": {
+    "message": "Следующий пост",
+    "description": "The blog post button label to navigate to the newer/previous post"
+  },
+  "theme.blog.post.paginator.olderPost": {
+    "message": "Предыдущий пост",
+    "description": "The blog post button label to navigate to the older/next post"
+  },
+  "theme.tags.tagsPageLink": {
+    "message": "Посмотреть все теги",
+    "description": "The label of the link targeting the tag list page"
+  },
+  "theme.colorToggle.ariaLabel.mode.system": {
+    "message": "system mode",
+    "description": "The name for the system color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.light": {
+    "message": "Светлый режим",
+    "description": "The name for the light color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.dark": {
+    "message": "Тёмный режим",
+    "description": "The name for the dark color mode"
+  },
+  "theme.colorToggle.ariaLabel": {
+    "message": "Переключение между темным и светлым режимом (сейчас используется {mode})",
+    "description": "The ARIA label for the color mode toggle"
+  },
+  "theme.docs.breadcrumbs.navAriaLabel": {
+    "message": "Навигационная цепочка текущей страницы",
+    "description": "The ARIA label for the breadcrumbs"
+  },
+  "theme.docs.DocCard.categoryDescription.plurals": {
+    "message": "{count} элемент|{count} элемента|{count} элементов",
+    "description": "The default description for a category card in the generated index about how many items this category includes"
+  },
+  "theme.docs.paginator.navAriaLabel": {
+    "message": "Страница документа",
+    "description": "The ARIA label for the docs pagination"
+  },
+  "theme.docs.paginator.previous": {
+    "message": "Предыдущая страница",
+    "description": "The label used to navigate to the previous doc"
+  },
+  "theme.docs.paginator.next": {
+    "message": "Следующая страница",
+    "description": "The label used to navigate to the next doc"
+  },
+  "theme.docs.tagDocListPageTitle.nDocsTagged": {
+    "message": "Одна страница|{count} страницы|{count} страниц",
+    "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.docs.tagDocListPageTitle": {
+    "message": "{nDocsTagged} с тегом \"{tagName}\"",
+    "description": "The title of the page for a docs tag"
+  },
+  "theme.docs.versionBadge.label": {
+    "message": "Версия: {versionLabel}"
+  },
+  "theme.docs.versions.unreleasedVersionLabel": {
+    "message": "Это документация для будущей версии {siteTitle} {versionLabel}.",
+    "description": "The label used to tell the user that he's browsing an unreleased doc version"
+  },
+  "theme.docs.versions.unmaintainedVersionLabel": {
+    "message": "Это документация {siteTitle} для версии {versionLabel}, которая уже не поддерживается.",
+    "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+  },
+  "theme.docs.versions.latestVersionSuggestionLabel": {
+    "message": "Актуальная документация находится на странице {latestVersionLink} ({versionLabel}).",
+    "description": "The label used to tell the user to check the latest version"
+  },
+  "theme.docs.versions.latestVersionLinkLabel": {
+    "message": "последней версии",
+    "description": "The label used for the latest version suggestion link label"
+  },
+  "theme.common.editThisPage": {
+    "message": "Отредактировать эту страницу",
+    "description": "The link label to edit the current page"
+  },
+  "theme.common.headingLinkTitle": {
+    "message": "Прямая ссылка на {heading}",
+    "description": "Title for link to heading"
+  },
+  "theme.lastUpdated.atDate": {
+    "message": " {date}",
+    "description": "The words used to describe on which date a page has been last updated"
+  },
+  "theme.lastUpdated.byUser": {
+    "message": " от {user}",
+    "description": "The words used to describe by who the page has been last updated"
+  },
+  "theme.lastUpdated.lastUpdatedAtBy": {
+    "message": "Последнее обновление{atDate}{byUser}",
+    "description": "The sentence used to display when a page has been last updated, and by who"
+  },
+  "theme.NotFound.title": {
+    "message": "Страница не найдена",
+    "description": "The title of the 404 page"
+  },
+  "theme.navbar.mobileVersionsDropdown.label": {
+    "message": "Версии",
+    "description": "The label for the navbar versions dropdown on mobile view"
+  },
+  "theme.tags.tagsListLabel": {
+    "message": "Теги:",
+    "description": "The label alongside a tag list"
+  },
+  "theme.admonition.caution": {
+    "message": "предупреждение",
+    "description": "The default label used for the Caution admonition (:::caution)"
+  },
+  "theme.admonition.danger": {
+    "message": "осторожно",
+    "description": "The default label used for the Danger admonition (:::danger)"
+  },
+  "theme.admonition.info": {
+    "message": "к сведению",
+    "description": "The default label used for the Info admonition (:::info)"
+  },
+  "theme.admonition.note": {
+    "message": "примечание",
+    "description": "The default label used for the Note admonition (:::note)"
+  },
+  "theme.admonition.tip": {
+    "message": "подсказка",
+    "description": "The default label used for the Tip admonition (:::tip)"
+  },
+  "theme.admonition.warning": {
+    "message": "warning",
+    "description": "The default label used for the Warning admonition (:::warning)"
+  },
+  "theme.AnnouncementBar.closeButtonAriaLabel": {
+    "message": "Закрыть",
+    "description": "The ARIA label for close button of announcement bar"
+  },
+  "theme.blog.sidebar.navAriaLabel": {
+    "message": "Навигация по последним постам в блоге",
+    "description": "The ARIA label for recent posts in the blog sidebar"
+  },
+  "theme.DocSidebarItem.expandCategoryAriaLabel": {
+    "message": "Expand sidebar category '{label}'",
+    "description": "The ARIA label to expand the sidebar category"
+  },
+  "theme.DocSidebarItem.collapseCategoryAriaLabel": {
+    "message": "Collapse sidebar category '{label}'",
+    "description": "The ARIA label to collapse the sidebar category"
+  },
+  "theme.IconExternalLink.ariaLabel": {
+    "message": "(opens in new tab)",
+    "description": "The ARIA label for the external link icon"
+  },
+  "theme.NavBar.navAriaLabel": {
+    "message": "Main",
+    "description": "The ARIA label for the main navigation"
+  },
+  "theme.NotFound.p1": {
+    "message": "К сожалению, мы не смогли найти запрашиваемую вами страницу.",
+    "description": "The first paragraph of the 404 page"
+  },
+  "theme.NotFound.p2": {
+    "message": "Пожалуйста, обратитесь к владельцу сайта, с которого вы перешли на эту ссылку, чтобы сообщить ему, что ссылка не работает.",
+    "description": "The 2nd paragraph of the 404 page"
+  },
+  "theme.navbar.mobileLanguageDropdown.label": {
+    "message": "Языки",
+    "description": "The label for the mobile language switcher dropdown"
+  },
+  "theme.TOCCollapsible.toggleButtonLabel": {
+    "message": "Содержание этой страницы",
+    "description": "The label used by the button on the collapsible TOC component"
+  },
+  "theme.blog.post.readMore": {
+    "message": "Читать дальше",
+    "description": "The label used in blog post item excerpts to link to full blog posts"
+  },
+  "theme.blog.post.readMoreLabel": {
+    "message": "Подробнее о {title}",
+    "description": "The ARIA label for the link to full blog posts from excerpts"
+  },
+  "theme.blog.post.readingTime.plurals": {
+    "message": "{readingTime} мин. чтения|{readingTime} мин. чтения|{readingTime} мин. чтения",
+    "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.CodeBlock.copy": {
+    "message": "Скопировать",
+    "description": "The copy button label on code blocks"
+  },
+  "theme.CodeBlock.copied": {
+    "message": "Скопировано",
+    "description": "The copied button label on code blocks"
+  },
+  "theme.CodeBlock.copyButtonAriaLabel": {
+    "message": "Скопировать в буфер обмена",
+    "description": "The ARIA label for copy code blocks button"
+  },
+  "theme.CodeBlock.wordWrapToggle": {
+    "message": "Переключить перенос по строкам",
+    "description": "The title attribute for toggle word wrapping button of code block lines"
+  },
+  "theme.docs.breadcrumbs.home": {
+    "message": "Главная страница",
+    "description": "The ARIA label for the home page in the breadcrumbs"
+  },
+  "theme.docs.sidebar.collapseButtonTitle": {
+    "message": "Свернуть сайдбар",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.collapseButtonAriaLabel": {
+    "message": "Свернуть сайдбар",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.navAriaLabel": {
+    "message": "Docs sidebar",
+    "description": "The ARIA label for the sidebar navigation"
+  },
+  "theme.docs.sidebar.closeSidebarButtonAriaLabel": {
+    "message": "Закрыть панель навигации",
+    "description": "The ARIA label for close button of mobile sidebar"
+  },
+  "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+    "message": "← Перейти к главному меню",
+    "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+  },
+  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+    "message": "Переключить навигационную панель",
+    "description": "The ARIA label for hamburger menu button of mobile navigation"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": {
+    "message": "Expand the dropdown",
+    "description": "The ARIA label of the button to expand the mobile dropdown navbar item"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": {
+    "message": "Collapse the dropdown",
+    "description": "The ARIA label of the button to collapse the mobile dropdown navbar item"
+  },
+  "theme.docs.sidebar.expandButtonTitle": {
+    "message": "Развернуть сайдбар",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.sidebar.expandButtonAriaLabel": {
+    "message": "Развернуть сайдбар",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.SearchBar.seeAll": {
+    "message": "Посмотреть все результаты ({count})"
+  },
+  "theme.SearchPage.documentsFound.plurals": {
+    "message": "{count} документ|{count} документа|{count} документов",
+    "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.SearchPage.existingResultsTitle": {
+    "message": "Результаты поиска по запросу \"{query}\"",
+    "description": "The search page title for non-empty query"
+  },
+  "theme.SearchPage.emptyResultsTitle": {
+    "message": "Поиск по сайту",
+    "description": "The search page title for empty query"
+  },
+  "theme.SearchPage.inputPlaceholder": {
+    "message": "Введите фразу для поиска",
+    "description": "The placeholder for search page input"
+  },
+  "theme.SearchPage.inputLabel": {
+    "message": "Поиск",
+    "description": "The ARIA label for search page input"
+  },
+  "theme.SearchPage.algoliaLabel": {
+    "message": "При поддержке Algolia",
+    "description": "The description label for Algolia mention"
+  },
+  "theme.SearchPage.noResultsText": {
+    "message": "По запросу ничего не найдено",
+    "description": "The paragraph for empty search result"
+  },
+  "theme.SearchPage.fetchingNewResults": {
+    "message": "Загрузка новых результатов поиска...",
+    "description": "The paragraph for fetching new search results"
+  },
+  "theme.SearchBar.label": {
+    "message": "Поиск",
+    "description": "The ARIA label and placeholder for search button"
+  },
+  "theme.SearchModal.searchBox.resetButtonTitle": {
+    "message": "Очистить",
+    "description": "The label and ARIA label for search box reset button"
+  },
+  "theme.SearchModal.searchBox.cancelButtonText": {
+    "message": "Отменить",
+    "description": "The label and ARIA label for search box cancel button"
+  },
+  "theme.SearchModal.searchBox.placeholderText": {
+    "message": "Search docs",
+    "description": "The placeholder text for the main search input field"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAi": {
+    "message": "Ask another question...",
+    "description": "The placeholder text when in AI question mode"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": {
+    "message": "Answering...",
+    "description": "The placeholder text for search box when AI is streaming an answer"
+  },
+  "theme.SearchModal.searchBox.enterKeyHint": {
+    "message": "search",
+    "description": "The hint for the search box enter key text"
+  },
+  "theme.SearchModal.searchBox.enterKeyHintAskAi": {
+    "message": "enter",
+    "description": "The hint for the Ask AI search box enter key text"
+  },
+  "theme.SearchModal.searchBox.searchInputLabel": {
+    "message": "Search",
+    "description": "The ARIA label for search input"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonText": {
+    "message": "Back to keyword search",
+    "description": "The text for back to keyword search button"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": {
+    "message": "Back to keyword search",
+    "description": "The ARIA label for back to keyword search button"
+  },
+  "theme.SearchModal.startScreen.recentSearchesTitle": {
+    "message": "Недавнее",
+    "description": "The title for recent searches"
+  },
+  "theme.SearchModal.startScreen.noRecentSearchesText": {
+    "message": "Нет истории поиска",
+    "description": "The text when there are no recent searches"
+  },
+  "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
+    "message": "Сохранить поисковый запрос",
+    "description": "The title for save recent search button"
+  },
+  "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
+    "message": "Удалить запись из историю",
+    "description": "The title for remove recent search button"
+  },
+  "theme.SearchModal.startScreen.favoriteSearchesTitle": {
+    "message": "Избранное",
+    "description": "The title for favorite searches"
+  },
+  "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
+    "message": "Удалить запись из избранное",
+    "description": "The title for remove favorite search button"
+  },
+  "theme.SearchModal.startScreen.recentConversationsTitle": {
+    "message": "Recent conversations",
+    "description": "The title for recent conversations"
+  },
+  "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": {
+    "message": "Remove this conversation from history",
+    "description": "The title for remove recent conversation button"
+  },
+  "theme.SearchModal.errorScreen.titleText": {
+    "message": "Невозможно загрузить результаты поиска",
+    "description": "The title for error screen"
+  },
+  "theme.SearchModal.errorScreen.helpText": {
+    "message": "Проверьте подключение к интернету.",
+    "description": "The help text for error screen"
+  },
+  "theme.SearchModal.resultsScreen.askAiPlaceholder": {
+    "message": "Ask AI: ",
+    "description": "The placeholder text for Ask AI input"
+  },
+  "theme.SearchModal.askAiScreen.disclaimerText": {
+    "message": "Answers are generated with AI which can make mistakes. Verify responses.",
+    "description": "The disclaimer text for AI answers"
+  },
+  "theme.SearchModal.askAiScreen.relatedSourcesText": {
+    "message": "Related sources",
+    "description": "The text for related sources"
+  },
+  "theme.SearchModal.askAiScreen.thinkingText": {
+    "message": "Thinking...",
+    "description": "The text when AI is thinking"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonText": {
+    "message": "Copy",
+    "description": "The text for copy button"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonCopiedText": {
+    "message": "Copied!",
+    "description": "The text for copy button when copied"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonTitle": {
+    "message": "Copy",
+    "description": "The title for copy button"
+  },
+  "theme.SearchModal.askAiScreen.likeButtonTitle": {
+    "message": "Like",
+    "description": "The title for like button"
+  },
+  "theme.SearchModal.askAiScreen.dislikeButtonTitle": {
+    "message": "Dislike",
+    "description": "The title for dislike button"
+  },
+  "theme.SearchModal.askAiScreen.thanksForFeedbackText": {
+    "message": "Thanks for your feedback!",
+    "description": "The text for thanks for feedback"
+  },
+  "theme.SearchModal.askAiScreen.preToolCallText": {
+    "message": "Searching...",
+    "description": "The text before tool call"
+  },
+  "theme.SearchModal.askAiScreen.duringToolCallText": {
+    "message": "Searching for ",
+    "description": "The text during tool call"
+  },
+  "theme.SearchModal.askAiScreen.afterToolCallText": {
+    "message": "Searched for",
+    "description": "The text after tool call"
+  },
+  "theme.SearchModal.footer.selectText": {
+    "message": "выбрать",
+    "description": "The select text for footer"
+  },
+  "theme.SearchModal.footer.submitQuestionText": {
+    "message": "Submit question",
+    "description": "The submit question text for footer"
+  },
+  "theme.SearchModal.footer.selectKeyAriaLabel": {
+    "message": "Клавиша Enter",
+    "description": "The ARIA label for select key in footer"
+  },
+  "theme.SearchModal.footer.navigateText": {
+    "message": "навигация",
+    "description": "The navigate text for footer"
+  },
+  "theme.SearchModal.footer.navigateUpKeyAriaLabel": {
+    "message": "Клавиша стрелка вверх",
+    "description": "The ARIA label for navigate up key in footer"
+  },
+  "theme.SearchModal.footer.navigateDownKeyAriaLabel": {
+    "message": "Клавиша стрелка вниз",
+    "description": "The ARIA label for navigate down key in footer"
+  },
+  "theme.SearchModal.footer.closeText": {
+    "message": "закрыть",
+    "description": "The close text for footer"
+  },
+  "theme.SearchModal.footer.closeKeyAriaLabel": {
+    "message": "Клавиша Escape",
+    "description": "The ARIA label for close key in footer"
+  },
+  "theme.SearchModal.footer.searchByText": {
+    "message": "Поиск от",
+    "description": "The 'Powered by' text for footer"
+  },
+  "theme.SearchModal.footer.backToSearchText": {
+    "message": "Back to search",
+    "description": "The back to search text for footer"
+  },
+  "theme.SearchModal.noResultsScreen.noResultsText": {
+    "message": "Нет результатов по запросу",
+    "description": "The text when there are no results"
+  },
+  "theme.SearchModal.noResultsScreen.suggestedQueryText": {
+    "message": "Попробуйте",
+    "description": "The text for suggested query"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsText": {
+    "message": "Нет подходящего результата поиска?",
+    "description": "The text for reporting missing results"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
+    "message": "Сообщите нам.",
+    "description": "The link text for reporting missing results"
+  },
+  "theme.SearchModal.placeholder": {
+    "message": "Поиск",
+    "description": "The placeholder of the input of the DocSearch pop-up modal"
+  },
+  "theme.blog.post.plurals": {
+    "message": "{count} запись|{count} записи|{count} записей",
+    "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.tagTitle": {
+    "message": "{nPosts} с тегом \"{tagName}\"",
+    "description": "The title of the page for a blog tag"
+  },
+  "theme.blog.author.pageTitle": {
+    "message": "{authorName} - {nPosts}",
+    "description": "The title of the page for a blog author"
+  },
+  "theme.blog.authorsList.pageTitle": {
+    "message": "Authors",
+    "description": "The title of the authors page"
+  },
+  "theme.blog.authorsList.viewAll": {
+    "message": "View All Authors",
+    "description": "The label of the link targeting the blog authors page"
+  },
+  "theme.blog.author.noPosts": {
+    "message": "This author has not written any posts yet.",
+    "description": "The text for authors with 0 blog post"
+  },
+  "theme.contentVisibility.unlistedBanner.title": {
+    "message": "Unlisted page",
+    "description": "The unlisted content banner title"
+  },
+  "theme.contentVisibility.unlistedBanner.message": {
+    "message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.",
+    "description": "The unlisted content banner message"
+  },
+  "theme.contentVisibility.draftBanner.title": {
+    "message": "Draft page",
+    "description": "The draft content banner title"
+  },
+  "theme.contentVisibility.draftBanner.message": {
+    "message": "This page is a draft. It will only be visible in dev and be excluded from the production build.",
+    "description": "The draft content banner message"
+  },
+  "theme.ErrorPageContent.tryAgain": {
+    "message": "Попробуйте ещё раз",
+    "description": "The label of the button to try again rendering when the React error boundary captures an error"
+  },
+  "theme.common.skipToMainContent": {
+    "message": "Перейти к основному содержимому",
+    "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+  },
+  "theme.tags.tagsPageTitle": {
+    "message": "Теги",
+    "description": "The title of the tag list page"
+  }
+}
diff --git a/i18n/ru/docusaurus-plugin-content-blog/options.json b/i18n/ru/docusaurus-plugin-content-blog/options.json
new file mode 100644
index 0000000..9239ff7
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-blog/options.json
@@ -0,0 +1,14 @@
+{
+  "title": {
+    "message": "Blog",
+    "description": "The title for the blog used in SEO"
+  },
+  "description": {
+    "message": "Blog",
+    "description": "The description for the blog used in SEO"
+  },
+  "sidebar.title": {
+    "message": "Recent posts",
+    "description": "The label for the left sidebar"
+  }
+}
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current.json b/i18n/ru/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 0000000..801e612
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,62 @@
+{
+  "version.label": {
+    "message": "Next",
+    "description": "The label for version current"
+  },
+  "sidebar.docs.category.What's new and migration": {
+    "message": "Что нового и миграция",
+    "description": "The label for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.What's new and migration.link.generated-index.title": {
+    "message": "Что нового и миграция",
+    "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.API": {
+    "message": "API",
+    "description": "The label for category 'API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText methods": {
+    "message": "Методы RichText",
+    "description": "The label for category 'RichText methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API": {
+    "message": "Внутренний API RichText",
+    "description": "The label for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API.link.generated-index.title": {
+    "message": "Обзор внутреннего API",
+    "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Event Bus methods": {
+    "message": "Методы Event Bus",
+    "description": "The label for category 'Event Bus methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.State methods": {
+    "message": "Методы состояния",
+    "description": "The label for category 'State methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText events": {
+    "message": "События RichText",
+    "description": "The label for category 'RichText events' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText properties": {
+    "message": "Свойства RichText",
+    "description": "The label for category 'RichText properties' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks": {
+    "message": "Интеграция с фреймворками",
+    "description": "The label for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks.link.generated-index.title": {
+    "message": "Интеграция с фреймворками",
+    "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides": {
+    "message": "Руководства",
+    "description": "The label for category 'Guides' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides.link.generated-index.title": {
+    "message": "Руководства",
+    "description": "The generated-index page title for category 'Guides' in sidebar 'docs'"
+  }
+}
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default-styles.md
new file mode 100644
index 0000000..8387833
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default-styles.md
@@ -0,0 +1,144 @@
+---
+sidebar_label: defaultStyles
+title: Конфигурация defaultStyles
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с конфигурационным параметром defaultStyles. Изучайте руководства разработчика и справочник API, запускайте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# defaultStyles
+
+### Описание {#description}
+
+@short: Необязательный. Задаёт значения стилей по умолчанию для определённых типов блоков
+
+### Использование {#usage}
+
+~~~jsx {}
+defaultStyles?: {
+    "*"?: { // влияет на все блоки, позволяя задавать общие свойства для всех из них
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+:::important[Важно]
+Свойство `defaultStyles` НЕ применяет фактические CSS-стили к затронутым блокам. CSS-стили необходимо задавать отдельно:
+
+```jsx title="index.js"
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+<style>
+    #root h2 {
+        font-family: Roboto;
+        font-size: 28px;
+        color: purple;
+        background: #FFC0CB;
+    }
+</style>
+```
+
+В этом примере всем блокам `h2` назначается шрифт `"Roboto"` с размером 28px, а также изменяются цвет текста и цвет фона. CSS-стили применяются к блокам `h2` отдельно.
+:::
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+const defaultStyles = {
+    "*": { "font-family": "Arial" },
+    p: { "font-size": "14px" },
+    blockquote: { "font-size": "14px" },
+    h1: { "font-size": "32px" },
+    h2: { "font-size": "24px" },
+    h3: { "font-size": "18px" },
+    h4: { "font-size": "16px" },
+    h5: { "font-size": "14px" },
+    h6: { "font-size": "12px" }
+};
+~~~
+
+### Пример {#example}
+
+~~~jsx {3-13}
+// инициализация RichText
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        h5: {
+            "font-family": "Roboto"
+        },
+        h6: {
+            "font-family": "Roboto"
+        }
+    },
+    // другие свойства конфигурации
+});
+~~~
+
+**История изменений:** Свойство обновлено в v2.0
+
+**Связанные статьи:** [Конфигурация](guides/configuration.md)
+
+**Связанный пример:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
new file mode 100644
index 0000000..a983ca8
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: fullscreenMode
+title: Конфигурация fullscreenMode
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с конфигурационным параметром fullscreenMode. Изучайте руководства разработчика и справочник API, запускайте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# fullscreenMode
+
+### Описание {#description}
+
+@short: Необязательный. Включает полноэкранный режим RichText
+
+### Использование {#usage}
+
+~~~jsx {}
+fullscreenMode?: boolean;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+fullscreenMode: false;
+~~~
+
+### Пример {#example}
+
+~~~jsx {3}
+// инициализация RichText
+new richtext.Richtext("#root", {
+    fullscreenMode: true
+    // другие свойства конфигурации
+});
+~~~
+
+**История изменений:** Свойство добавлено в v2.0
+
+**Связанные статьи:** [Конфигурация](guides/configuration.md)
+
+**Связанный пример:** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7?tag=richtext)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
new file mode 100644
index 0000000..4bf699d
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: imageUploadUrl
+title: Конфигурация imageUploadUrl
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с конфигурационным параметром imageUploadUrl. Изучайте руководства разработчика и справочник API, запускайте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# imageUploadUrl
+
+### Описание {#description}
+
+@short: Необязательный. Задаёт URL, используемый для загрузки изображений
+
+### Использование {#usage}
+
+~~~jsx {}
+imageUploadUrl?: string;
+~~~
+
+### Пример {#example}
+
+~~~jsx {3}
+// инициализация RichText
+new richtext.Richtext("#root", {
+    imageUploadUrl: "some URL"
+    // другие свойства конфигурации
+});
+~~~
+
+**История изменений:** Свойство добавлено в v2.0
+
+**Связанные статьи:** [Конфигурация](guides/configuration.md)
+
+**Связанный пример:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
new file mode 100644
index 0000000..0c46464
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: layoutMode
+title: Конфигурация layoutMode
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с конфигурационным параметром layoutMode. Изучайте руководства разработчика и справочник API, запускайте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# layoutMode
+
+### Описание {#description}
+
+@short: Необязательный. Задаёт режим отображения основной области редактора
+
+### Использование {#usage}
+
+~~~jsx {}
+layoutMode: "classic" | "document";
+~~~
+
+Режим `"classic"` представляет область редактирования, растянутую на всю страницу. Режим `"document"` имитирует реальные размеры документа (используются форматы: A4, A5, A6, A7).
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+layoutMode: "classic";
+~~~
+
+### Пример {#example}
+
+~~~jsx {3}
+// инициализация RichText
+new richtext.Richtext("#root", {
+    layoutMode: "document"  // инициализирует RichText в режиме "document" по умолчанию
+    // другие свойства конфигурации
+});
+~~~
+
+**История изменений:** Свойство добавлено в v2.0 вместо удалённого свойства `mode`
+
+**Связанные статьи:** [Конфигурация](guides/configuration.md)
+
+**Связанный пример:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/locale.md
new file mode 100644
index 0000000..597f54d
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/locale.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: locale
+title: Конфигурация locale
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с конфигурационным параметром locale. Изучайте руководства разработчика и справочник API, запускайте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# locale
+
+### Описание {#description}
+
+@short: Необязательный. Объект, содержащий метки локализации RichText
+
+:::info[Информация]
+Объект **locale** должен включать все метки RichText с соответствующими переводами.
+:::
+
+### Использование {#usage}
+
+~~~jsx {}
+locale?: object;
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+По умолчанию RichText использует **английскую** локаль. Вы также можете задать пользовательскую локаль.
+
+:::tip[Совет]
+Чтобы динамически изменить текущую локаль, используйте метод [**setLocale()**](api/methods/set-locale.md) RichText
+:::
+
+### Пример {#example}
+
+~~~jsx {3}
+// инициализация RichText
+const editor = new richtext.RichText("#root", {
+    locale: richtext.locales.cn // изначально будет установлена китайская локаль
+    // locale: richtext.locales.en // изначально будет установлена английская локаль
+    // locale: richtext.locales.de // изначально будет установлена немецкая локаль
+    // другие свойства конфигурации
+});
+~~~
+
+**История изменений:** Свойство добавлено в v2.0
+
+**Связанные статьи:** [Локализация](guides/localization.md)
+
+**Связанный пример:** [RichText. Localization](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/menubar.md
new file mode 100644
index 0000000..f518ad9
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/menubar.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: menubar
+title: Конфигурация menubar
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с конфигурационным параметром menubar. Изучайте руководства разработчика и справочник API, запускайте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# menubar
+
+### Описание {#description}
+
+@short: Необязательный. Включает верхний menubar RichText
+
+### Использование {#usage}
+
+~~~jsx {}
+menubar?: boolean;
+~~~
+
+### Пример {#example}
+
+~~~jsx {3}
+// инициализация RichText
+new richtext.Richtext("#root", {
+    menubar: true
+    // другие свойства конфигурации
+});
+~~~
+
+**История изменений:** Свойство добавлено в v2.0
+
+**Связанные статьи:** [Конфигурация](guides/configuration.md)
+
+**Связанный пример:** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7?tag=richtext)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/toolbar.md
new file mode 100644
index 0000000..3288c3f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/toolbar.md
@@ -0,0 +1,219 @@
+---
+sidebar_label: toolbar
+title: Конфигурация toolbar
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с конфигурационным параметром toolbar. Изучайте руководства разработчика и справочник API, запускайте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# toolbar
+
+### Описание {#description}
+
+@short: Необязательный. Включает toolbar и позволяет задавать и настраивать кнопки, отображаемые в нём
+
+### Использование {#usage}
+
+~~~jsx {}
+toolbar?: boolean | Array<string | { id: string, type: string, label?: string, tooltip?: string, css?: string, handler?: () => any }>;
+~~~
+
+#### Доступные кнопки в toolbar {#available-buttons-within-toolbar}
+
+В toolbar RichText можно использовать следующие кнопки:
+
+| Кнопка              | Описание                                                                                      |
+|---------------------|-----------------------------------------------------------------------------------------------|
+| `undo`              | Отменяет последнее действие пользователя.                                                     |
+| `redo`              | Повторяет отменённое действие.                                                                |
+| `style`             | Позволяет выбрать стиль текста (например, заголовки, абзац и т.д.).                          |
+| `font-family`       | Изменяет шрифт выделенного текста.                                                            |
+| `font-size`         | Изменяет размер выделенного текста.                                                           |
+| `bold`              | Применяет полужирное форматирование к выделенному тексту.                                    |
+| `italic`            | Применяет курсивное форматирование к выделенному тексту.                                     |
+| `underline`         | Подчёркивает выделенный текст.                                                                |
+| `strike`            | Применяет зачёркивание.                                                                       |
+| `subscript`         | Форматирует текст как подстрочный индекс.                                                     |
+| `superscript`       | Форматирует текст как надстрочный индекс.                                                     |
+| `text-color`        | Изменяет цвет текста.                                                                         |
+| `background-color`  | Изменяет цвет фона (выделения) текста.                                                        |
+| `align`             | Задаёт выравнивание текста (по левому краю, по центру, по правому краю, по ширине).           |
+| `indent`            | Увеличивает отступ текстового блока.                                                          |
+| `outdent`           | Уменьшает отступ абзаца.                                                                      |
+| `line-height`       | Изменяет межстрочный интервал.                                                                |
+| `quote`             | Форматирует текст как цитату.                                                                 |
+| `bulleted-list`     | Создаёт маркированный список.                                                                 |
+| `numbered-list`     | Создаёт нумерованный список.                                                                  |
+| `link`              | Вставляет гиперссылку.                                                                        |
+| `image`             | Вставляет изображение.                                                                        |
+| `line`              | Вставляет горизонтальную линию.                                                               |
+| `clear`             | Удаляет всё форматирование выделенного текста.                                                |
+| `print`             | Открывает диалоговое окно печати.                                                             |
+| `fullscreen`        | Переключает полноэкранный режим.                                                              |
+| `mode`              | Переключает [режимы отображения](api/config/layout-mode.md) (classic/document)               |
+| `shortcuts`         | Отображает список доступных сочетаний клавиш.                                                 |
+| `separator`         | Добавляет визуальный разделитель между группами кнопок toolbar.                               |
+
+Эти строки можно использовать для настройки кнопок toolbar следующим образом:
+
+~~~jsx {2-7}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // другие кнопки
+    ],
+    // другие свойства конфигурации
+});
+~~~
+
+#### Пользовательские кнопки в toolbar {#custom-buttons-within-toolbar}
+
+Пользовательские кнопки задаются в виде объектов со следующими параметрами:
+
+- `type` — (обязательный) задаёт тип пользовательского элемента управления. Доступные типы: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` — (необязательный) идентификатор пользовательского элемента управления (не должен совпадать с существующим ID)
+- `label` — (необязательный) подпись кнопки (отображается вместе с иконкой)
+- `tooltip` — (необязательный) всплывающая подсказка при наведении (если не задана, используется значение из `"label"`)
+- `css` — (необязательный) CSS-класс, назначаемый элементу управления (поддерживаемые классы по умолчанию: wx-primary, wx-secondary)
+- `handler` — (необязательный) колбэк-функция, вызываемая при нажатии на кнопку
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // кнопки (строки представляют только кнопки)
+        "bold",
+        "italic",
+        // предопределённые кнопки (пользователь не может задавать дополнительные параметры — ни подписи, ни всплывающие подсказки, ни опции; только ({ type: "button", id: string }))
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // для использования предопределённого элемента управления необходимо указать правильный тип (например, richselect/colorpicker)
+        // при несовпадении типа элемент будет проигнорирован и не добавлен в toolbar
+        {
+            type: "richselect", // type: "button" — некорректно, будет проигнорировано
+            id: "mode",
+        },
+        // пользовательские кнопки (поддерживаемые параметры указаны ниже)
+        // пользователь может определять только кнопки (поддержка richselect/colorpicker пока не реализована)
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* custom logic */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* custom logic */}
+        }
+    ],
+    // другие свойства конфигурации
+});
+~~~
+
+#### Скрытие toolbar {#hide-toolbar}
+
+Чтобы скрыть toolbar, установите свойство `toolbar` в значение `false`:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false
+    // другие свойства конфигурации
+});
+~~~
+
+### Конфигурация по умолчанию {#default-config}
+
+~~~jsx
+const defaultToolbarButtons = {
+    "undo",
+    "redo",
+    "separator",
+    "style",
+    "separator",
+    "font-family",
+    "font-size",
+    "separator",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "separator",
+    "text-color",
+    "background-color",
+    "separator",
+    "align",
+    "line-height",
+    "outdent",
+    "indent",
+    "separator",
+    "bulleted-list",
+    "numbered-list",
+    "quote",
+    "separator",
+    "link",
+    "image",
+    "separator",
+    "clear",
+    "separator",
+    "fullscreen",
+    "mode"
+};
+~~~
+
+:::tip[Совет]
+Кнопки toolbar по умолчанию экспортируются виджетом RichText и доступны через `richtext.defaultToolbarButtons`.
+
+```jsx{4}
+// инициализация RichText
+new richtext.Richtext("#root", {
+    toolbar: [
+        ...richtext.defaultToolbarButtons,
+        {
+            type: "button",
+            id: "btn1", // идентификатор кнопки (не должен совпадать с существующими ID, если требуется пользовательская логика)
+            icon: "wxo-help", // иконка кнопки (отображается вместе с подписью)
+            css: "rounded", // CSS-класс, назначаемый элементу управления (поддерживаемые классы по умолчанию: wx-primary, wx-secondary)
+            label: "Custom button", // подпись кнопки (отображается вместе с иконкой)
+            tooltip: "Some tooltip", // всплывающая подсказка при наведении (если не задана, используется значение из "label")
+        }
+    ]
+    // другие свойства конфигурации
+});
+```
+:::
+
+### Пример {#example}
+
+~~~jsx {3-18}
+// инициализация RichText
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // пользовательские кнопки (ниже используются все поддерживаемые параметры)
+        // пользователь может определять только кнопки (поддержка richselect/colorpicker пока не реализована)
+        {
+            type: "button",
+            id: "btn1", // идентификатор кнопки (не должен совпадать с существующими ID, если требуется пользовательская логика)
+            icon: "wxo-help", // иконка кнопки (отображается вместе с подписью)
+            css: "rounded", // CSS-класс, назначаемый элементу управления (поддерживаемые классы по умолчанию: wx-primary, wx-secondary)
+            label: "Custom button", // подпись кнопки (отображается вместе с иконкой)
+            tooltip: "Some tooltip", // всплывающая подсказка при наведении (если не задана, используется значение из "label")
+            handler: () => ..., // пользовательская логика для этой кнопки
+        }
+    ]
+    // другие свойства конфигурации
+});
+~~~
+
+**История изменений:** Свойство добавлено в v2.0
+
+**Связанные статьи:** [Конфигурация](guides/configuration.md)
+
+**Связанный пример:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md
new file mode 100644
index 0000000..124538f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: value
+title: Конфигурация value
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с конфигурационным параметром value. Изучайте руководства разработчика и справочник API, запускайте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# value
+
+### Описание {#description}
+
+@short: Необязательный. Задаёт начальное значение (содержимое), отображаемое в области редактора RichText
+
+:::tip[Совет]
+Если вы хотите задать значение (содержимое) в пользовательском формате, используйте встроенный метод [`setValue()`](api/methods/set-value.md).
+:::
+
+### Использование {#usage}
+
+~~~jsx {}
+value?: string;
+~~~
+
+### Пример {#example}
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    value: "<h1>some value</h1>" // задаёт значение по умолчанию (в формате HTML)
+    // другие свойства конфигурации
+});
+~~~
+
+**История изменений:** Свойство добавлено в v2.0
+
+**Связанные статьи:** [Конфигурация](guides/configuration.md)
+
+**Связанный пример:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/align.md
new file mode 100644
index 0000000..2511729
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/align.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: align
+title: Событие align
+description: Вы можете узнать о событии align в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# align
+
+### Описание {#description}
+
+@short: Срабатывает при изменении выравнивания текста через меню/панель инструментов или методы Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+"align": ({
+    align: "left" | "center" | "right" | "justify"
+}) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **align** может принимать объект со следующим параметром:
+
+- `align` - выравнивание текста. Можно указать одно из следующих значений: `"left" | "center" | "right" | "justify"`
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-12}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "align" event
+editor.api.on("align", (obj) => {
+    console.log(`Align to: ${obj.align}`);
+});
+// align the text to the left
+editor.api.exec("align", {
+    align: "left"
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
new file mode 100644
index 0000000..93f9012
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: clear-text-format
+title: Событие clear-text-format
+description: Вы можете узнать о событии clear-text-format в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# clear-text-format
+
+### Описание {#description}
+
+@short: Срабатывает при очистке форматирования текста через меню/панель инструментов или методы Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+"clear-text-format": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-10}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "clear-text-format" event
+editor.api.on("clear-text-format", () => {
+    console.log("Text format was cleared");
+});
+// clear text format
+editor.api.exec("clear-text-format", {});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/copy.md
new file mode 100644
index 0000000..79e1026
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/copy.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: copy
+title: Событие copy
+description: Вы можете узнать о событии copy в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# copy
+
+### Описание {#description}
+
+@short: Срабатывает при копировании выделенного текста
+
+### Использование {#usage}
+
+~~~jsx {}
+"copy": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "copy" event
+editor.api.on("copy", () => {
+    console.log("Selected text was copied");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/create-new.md
new file mode 100644
index 0000000..73b3461
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/create-new.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: create-new
+title: Событие create-new
+description: Вы можете узнать о событии create-new в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# create-new
+
+### Описание {#description}
+
+@short: Срабатывает при нажатии пункта «New» в меню или через методы Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+"create-new": ({ reset?: boolean }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **create-new** может принимать объект со следующим параметром:
+
+- `reset` - сбрасывает историю при создании нового файла
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-10}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "create-new" event
+editor.api.on("create-new", ({ reset }) => {
+    console.log(`Document has been cleared. History has ${reset ? "" : "not"} been reset.`);
+});
+// create new file and reset the history
+editor.api.exec("create-new", { reset: true });
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/cut.md
new file mode 100644
index 0000000..dd1ebb8
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/cut.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: cut
+title: Событие cut
+description: Вы можете узнать о событии cut в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# cut
+
+### Описание {#description}
+
+@short: Срабатывает при вырезании выделенного текста
+
+### Использование {#usage}
+
+~~~jsx {}
+"cut": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "cut" event
+editor.api.on("cut", () => {
+    console.log("Selected text was cut");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/delete-link.md
new file mode 100644
index 0000000..825822e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/delete-link.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: delete-link
+title: Событие delete-link
+description: Вы можете узнать о событии delete-link в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# delete-link
+
+### Описание {#description}
+
+@short: Срабатывает при удалении ссылки
+
+### Использование {#usage}
+
+~~~jsx {}
+"delete-link": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "delete-link" event
+editor.api.on("delete-link", () => {
+    console.log("The link was deleted");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/export.md
new file mode 100644
index 0000000..9c6acf7
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/export.md
@@ -0,0 +1,59 @@
+---
+sidebar_label: export
+title: Событие export
+description: Вы можете узнать о событии export в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# export
+
+### Описание {#description}
+
+@short: Срабатывает после нажатия пункта «Export» в меню или через методы Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+"export": ({ options: IExportOptions; result?: any }) => boolean | void;
+
+interface IExportOptions {
+    format?: "docx" | "pdf";
+    url?: string;
+    download?: boolean;
+    fileName?: string;
+}
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **export** может принимать объект со следующими параметрами:
+
+- `format` - формат файла
+- `url` - базовый URL для экспорта файла
+- `download` - позволяет указать, нужно ли скачивать файл после получения ответа от сервера. Если свойство установлено в `false`, файл не будет загружен, но пользователь сможет получить данные blob из объекта события (см. свойство `result` в определении события)
+- `fileName` - имя экспортируемого файла
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-15}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "export" event
+editor.api.on("export", (obj) => {
+    console.log(obj);
+    console.log("The file was exported");
+});
+// export value as pdf file
+editor.api.exec("export", {
+    format: "pdf",
+    download: false,
+    fileName: "some file"
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/import.md
new file mode 100644
index 0000000..97e5bcc
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/import.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: import
+title: Событие import
+description: Вы можете узнать о событии import в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# import
+
+### Описание {#description}
+
+@short: Срабатывает после нажатия пункта «Import» в меню или через методы Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+"import": ({ html?: string }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **import** может принимать объект со следующим параметром:
+
+- `html` - текстовое значение в формате HTML
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "import" event
+editor.api.on("import", (obj) => {
+    console.log(obj.html);
+    console.log("The new value was imported");
+});
+// import new value
+editor.api.exec("import", {
+    html: "<h2>some value</h2>" // simply calls setValue
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/indent.md
new file mode 100644
index 0000000..f52fc79
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/indent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: indent
+title: Событие indent
+description: Вы можете узнать о событии indent в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# indent
+
+### Описание {#description}
+
+@short: Срабатывает при увеличении отступа блока
+
+### Использование {#usage}
+
+~~~jsx {}
+"indent": ({ step: number }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **indent** может принимать объект со следующим параметром:
+
+- `step` - шаг, на который был увеличен отступ
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "indent" event
+editor.api.on("indent", (obj) => {
+    console.log(obj);
+    console.log("The indention was increased");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-image.md
new file mode 100644
index 0000000..153cee2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-image.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: insert-image
+title: Событие insert-image
+description: Вы можете узнать о событии insert-image в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# insert-image
+
+### Описание {#description}
+
+@short: Срабатывает при вставке изображения
+
+### Использование {#usage}
+
+~~~jsx {}
+"insert-image": (IImageContext) => boolean | void;
+
+interface IImageContext {
+    id: TID;
+    value: string;
+    width: number;
+    height: number;
+    // extra props from uploader ctx, not required for the actual action
+    name?: string;
+    file?: File;
+    status?: string;
+    selected: (ctx: IImageContext) => void;
+    uploaded: (ctx: IImageContext) => void;
+}
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "insert-image" event
+editor.api.on("insert-image", (obj) => {
+    console.log(obj);
+    console.log("The image was inserted");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-line.md
new file mode 100644
index 0000000..57ab3b1
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-line.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: insert-line
+title: Событие insert-line
+description: Вы можете узнать о событии insert-line в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# insert-line
+
+### Описание {#description}
+
+@short: Срабатывает при вставке горизонтальной линии
+
+### Использование {#usage}
+
+~~~jsx {}
+"insert-line": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "insert-line" event
+editor.api.on("insert-line", () => {
+    console.log("The horizontal line was inserted");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-link.md
new file mode 100644
index 0000000..f16f7e7
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-link.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: insert-link
+title: Событие insert-link
+description: Вы можете узнать о событии insert-link в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# insert-link
+
+### Описание {#description}
+
+@short: Срабатывает при вставке ссылки
+
+### Использование {#usage}
+
+~~~jsx {}
+"insert-link": ({ url: string }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **update-link** может принимать объект со следующим параметром:
+
+- `url` - URL, который будет вставлен
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "insert-link" event
+editor.api.on("insert-link", (obj) => {
+    console.log(obj)
+    console.log("The following link was inserted: " + obj.url);
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-list.md
new file mode 100644
index 0000000..5f7b46d
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-list.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: insert-list
+title: Событие insert-list
+description: Вы можете узнать о событии insert-list в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# insert-list
+
+### Описание {#description}
+
+@short: Срабатывает при вставке списка
+
+### Использование {#usage}
+
+~~~jsx {}
+"insert-list": ({ type: TListType }) => boolean | void;
+
+type TListType = "bulleted" | "numbered";
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **insert-list** может принимать объект со следующим параметром:
+
+- `type` - тип вставляемого списка. Можно указать следующие значения:
+    - `"bulleted"` - маркированный список
+    - `"numbered"` - нумерованный список
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "insert-list" event
+editor.api.on("insert-list", (obj) => {
+    console.log(obj.type);
+    console.log("The list was inserted");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/outdent.md
new file mode 100644
index 0000000..df626d7
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/outdent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: outdent
+title: Событие outdent
+description: Вы можете узнать о событии outdent в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# outdent
+
+### Описание {#description}
+
+@short: Срабатывает при уменьшении отступа блока
+
+### Использование {#usage}
+
+~~~jsx {}
+"outdent": ({ step: number }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **outdent** может принимать объект со следующим параметром:
+
+- `step` - шаг, на который был уменьшен отступ
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "outdent" event
+editor.api.on("outdent", (obj) => {
+    console.log(obj);
+    console.log("The indention was decreased");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/paste.md
new file mode 100644
index 0000000..539ea11
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/paste.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: paste
+title: Событие paste
+description: Вы можете узнать о событии paste в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# paste
+
+### Описание {#description}
+
+@short: Срабатывает при вставке содержимого
+
+### Использование {#usage}
+
+~~~jsx {}
+"paste": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "paste" event
+editor.api.on("paste", () => {
+    console.log("Content was pasted");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/print.md
new file mode 100644
index 0000000..2010678
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/print.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: print
+title: Событие print
+description: Вы можете узнать о событии print в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# print
+
+### Описание {#description}
+
+@short: Срабатывает при печати документа
+
+### Использование {#usage}
+
+~~~jsx {}
+"print": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+// configuration properties
+});
+// subscribe to the "print" event
+editor.api.on("print", () => {
+    console.log("The document is printing");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/redo.md
new file mode 100644
index 0000000..4984f09
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/redo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: redo
+title: Событие redo
+description: Вы можете узнать о событии redo в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# redo
+
+### Описание {#description}
+
+@short: Срабатывает при нажатии кнопки «Redo» в строке меню/панели инструментов или через методы Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+"redo": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "redo" event
+editor.api.on("redo", () => {
+    console.log("Redo operation was performed");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/resize-image.md
new file mode 100644
index 0000000..1bcd2bf
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/resize-image.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: resize-image
+title: Событие resize-image
+description: Вы можете узнать о событии resize-image в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# resize-image
+
+### Описание {#description}
+
+@short: Срабатывает при изменении размера изображения
+
+### Использование {#usage}
+
+~~~jsx {}
+"resize-image": ({ id: number, width: number, height: number }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **resize-image** может принимать объект со следующими параметрами:
+
+- `id` - идентификатор изображения
+- `width` - ширина изображения
+- `height` - высота изображения
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+// configuration properties
+});
+// subscribe to the "resize-image" event
+editor.api.on("resize-image", (obj) => {
+    console.log(obj);
+    console.log("The image was resized")
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
new file mode 100644
index 0000000..6e23629
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-family
+title: Событие set-font-family
+description: Вы можете узнать о событии set-font-family в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# set-font-family
+
+### Описание {#description}
+
+@short: Срабатывает при установке семейства шрифтов
+
+### Использование {#usage}
+
+~~~jsx {}
+"set-font-family": ({ fontFamily: string }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **set-font-family** может принимать объект со следующим параметром:
+
+- `fontFamily` - семейство шрифтов, которое необходимо применить. Доступны следующие шрифты: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"`
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "set-font-family" event
+editor.api.on("set-font-family", (obj) => {
+    console.log(obj.fontFamily);
+    console.log("The font family was changed");
+});
+// apply new font family
+editor.api.exec("set-font-family", {
+    fontFamily: "Roboto"
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
new file mode 100644
index 0000000..aa149f5
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-size
+title: Событие set-font-size
+description: Вы можете узнать о событии set-font-size в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# set-font-size
+
+### Описание {#description}
+
+@short: Срабатывает при установке размера шрифта
+
+### Использование {#usage}
+
+~~~jsx {}
+"set-font-size": ({ fontSize: string }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **set-font-size** может принимать объект со следующим параметром:
+
+- `fontSize` - размер шрифта, который необходимо применить
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "set-font-size" event
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+    console.log("The font size was changed");
+});
+// apply new font size
+editor.api.exec("set-font-size", {
+    fontSize: "11px"
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
new file mode 100644
index 0000000..be693e9
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-line-height
+title: Событие set-line-height
+description: Вы можете узнать о событии set-line-height в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# set-line-height
+
+### Описание {#description}
+
+@short: Срабатывает при установке межстрочного интервала
+
+### Использование {#usage}
+
+~~~jsx {}
+"set-line-height": ({ lineHeight: string }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **set-line-height** может принимать объект со следующим параметром:
+
+- `lineHeight` - межстрочный интервал
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "set-line-height" event
+editor.api.on("set-line-height", (obj) => {
+    console.log(obj);
+    console.log("The line height was changed");
+});
+// apply a new line height
+editor.api.exec("set-line-height", {
+   lineHeight: "15px"
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
new file mode 100644
index 0000000..b7c11ef
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: set-text-color
+title: Событие set-text-color
+description: Вы можете узнать о событии set-text-color в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# set-text-color
+
+### Описание {#description}
+
+@short: Срабатывает при установке цвета текста и/или цвета фона текста
+
+### Использование {#usage}
+
+~~~jsx {}
+"set-text-color": (ITextColor) => boolean | void;
+
+interface ITextColor {
+    color?: string;
+    background?: string;
+}
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **set-text-color** может принимать объект со следующими параметрами:
+
+- `color` - цвет текста
+- `background` - цвет фона текста
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-14}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "set-text-color" event
+editor.api.on("set-text-color", (obj) => {
+    console.log(obj);
+    console.log("The text color and/or background text color were changed");
+});
+// apply text color and background
+editor.api.exec("set-text-color", {
+   color: "red",
+   background: "blue"
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
new file mode 100644
index 0000000..3b3de64
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: set-text-format
+title: Событие set-text-format
+description: Вы можете узнать о событии set-text-format в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# set-text-format
+
+### Описание {#description}
+
+@short: Срабатывает при установке формата текста
+
+### Использование {#usage}
+
+~~~jsx {}
+"set-text-format": (ITextFormat) => boolean | void;
+
+interface ITextFormat {
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+    underline?: boolean;
+}
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Параметры {#parameters}
+
+Колбэк события **set-text-format** может принимать объект со следующими параметрами:
+
+- `bold` - жирный формат текста
+- `italic` - курсивный формат текста
+- `strike` - зачёркнутый формат текста
+- `underline` - подчёркнутый формат текста
+
+### Пример {#example}
+
+~~~jsx {5-14}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "set-text-format" event
+editor.api.on("set-text-format", (obj) => {
+    console.log(obj);
+    console.log("The text format was changed");
+});
+// apply the "italic" and bold text format
+editor.api.exec("set-text-format", {
+    italic: true,
+    bold: true
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
new file mode 100644
index 0000000..3a02d91
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: set-text-style
+title: Событие set-text-style
+description: Вы можете узнать о событии set-text-style в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# set-text-style
+
+### Описание {#description}
+
+@short: Срабатывает при установке стиля текста
+
+### Использование {#usage}
+
+~~~jsx {}
+"set-text-style": ({ tag: TBlockType }) => boolean | void;
+
+type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **set-text-style** может принимать объект со следующими параметрами:
+
+- `tag` - стиль текста
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "set-text-style" event
+editor.api.on("set-text-style", (obj) => {
+    console.log(obj.tag);
+    console.log("The text style was changed");
+});
+// apply new text style
+editor.api.exec("set-text-style", {
+    tag: "blockquote"
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/show-popup.md
new file mode 100644
index 0000000..ba862c1
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/show-popup.md
@@ -0,0 +1,53 @@
+---
+sidebar_label: show-popup
+title: Событие show-popup
+description: Вы можете узнать о событии show-popup в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# show-popup
+
+### Описание {#description}
+
+@short: Срабатывает при отображении или скрытии всплывающего окна
+
+### Использование {#usage}
+
+~~~jsx {}
+"show-popup": (IPopupConfig) => boolean | void;
+
+interface IPopupConfig {
+    type: "link" | null;
+    image?: boolean;
+}
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **show-popup** может принимать объект со следующими параметрами:
+
+- `type` - тип всплывающего окна
+- `image` - предоставляет доступ к дополнительному контексту (указывает ли текущий курсор на изображение)
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "show-popup" event
+editor.api.on("show-popup", (obj) => {
+    console.log(obj);
+    console.log("The popup was shown/hidden");
+});
+// show-popup the text to the left
+editor.api.exec("show-popup", {
+    type: "link"
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/subscript.md
new file mode 100644
index 0000000..bb1d84f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/subscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: subscript
+title: Событие subscript
+description: Вы можете узнать о событии subscript в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# subscript
+
+### Описание {#description}
+
+@short: Срабатывает при нажатии кнопки «Subscript» в строке меню/панели инструментов или через методы Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+"subscript": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-10}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "subscript" event
+editor.api.on("subscript", () => {
+    console.log("Subscript was applied");
+});
+// trigger the "subscript" event
+editor.api.exec("subscript", {});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/superscript.md
new file mode 100644
index 0000000..642b3a2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/superscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: superscript
+title: Событие superscript
+description: Вы можете узнать о событии superscript в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# superscript
+
+### Описание {#description}
+
+@short: Срабатывает при нажатии кнопки «Superscript» в строке меню/панели инструментов или через методы Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+"superscript": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "superscript" event
+editor.api.on("superscript", () => {
+    console.log("Superscript was applied");
+});
+// trigger the "superscript" event
+editor.api.exec("superscript", {});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
new file mode 100644
index 0000000..07a9f57
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-fullscreen-mode
+title: Событие toggle-fullscreen-mode
+description: Вы можете узнать о событии toggle-fullscreen-mode в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# toggle-fullscreen-mode
+
+### Описание {#description}
+
+@short: Срабатывает при переключении полноэкранного режима
+
+### Использование {#usage}
+
+~~~jsx {}
+"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **toggle-fullscreen-mode** может принимать объект со следующим параметром:
+
+- `mode` - включает полноэкранный режим
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "toggle-fullscreen-mode" event
+editor.api.on("toggle-fullscreen-mode", (obj) => {
+    console.log(obj);
+    console.log("The full screen mode was changed");
+});
+// enable the full screen mode
+editor.api.exec("toggle-fullscreen-mode", { mode: true });
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
new file mode 100644
index 0000000..9f4afcc
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-layout-mode
+title: Событие toggle-layout-mode
+description: Вы можете узнать о событии toggle-layout-mode в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# toggle-layout-mode
+
+### Описание {#description}
+
+@short: Срабатывает при переключении режима разметки
+
+### Использование {#usage}
+
+~~~jsx {}
+"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **toggle-layout-mode** может принимать объект со следующими параметрами:
+
+- `mode` - режим разметки. Доступны следующие режимы: `"classic" | "document"`
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-11}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "toggle-layout-mode" event
+editor.api.on("toggle-layout-mode", (obj) => {
+    console.log(obj);
+    console.log("The layout mode was changed");
+});
+// set the "document" layout mode
+editor.api.exec("toggle-layout-mode", { mode: "document" });
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
new file mode 100644
index 0000000..d0ae5b9
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-shortcut-info
+title: Событие toggle-shortcut-info
+description: Вы можете узнать о событии toggle-shortcut-info в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# toggle-shortcut-info
+
+### Описание {#description}
+
+@short: Срабатывает при переключении отображения информации о горячих клавишах
+
+### Использование {#usage}
+
+~~~jsx {}
+"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **toggle-shortcut-info** может принимать объект со следующим параметром:
+
+- `mode` - включает отображение информации о горячих клавишах; `true` — показать всплывающее окно с информацией о горячих клавишах, `false` — скрыть его
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "toggle-shortcut-info" event
+editor.api.on("toggle-shortcut-info", (obj) => {
+    console.log(obj);
+    console.log("The shortcut info was shown");
+});
+// enable the shortcut info
+editor.api.exec("toggle-shortcut-info", { mode: true });
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/undo.md
new file mode 100644
index 0000000..c6ac878
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/undo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: undo
+title: Событие undo
+description: Вы можете узнать о событии undo в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# undo
+
+### Описание {#description}
+
+@short: Срабатывает при нажатии кнопки «Undo» в строке меню/панели инструментов или через методы Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+"undo": () => boolean | void;
+~~~
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "undo" event
+editor.api.on("undo", () => {
+    console.log("Undo operation was performed");
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/update-link.md
new file mode 100644
index 0000000..7c26dc6
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/update-link.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: update-link
+title: Событие update-link
+description: Вы можете узнать о событии update-link в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# update-link
+
+### Описание {#description}
+
+@short: Срабатывает при обновлении ссылки
+
+### Использование {#usage}
+
+~~~jsx {}
+"update-link": ({ id: number, url: string }) => boolean | void;
+~~~
+
+### Параметры {#parameters}
+
+Колбэк события **update-link** может принимать объект со следующими параметрами:
+
+- `id` - идентификатор ссылки
+- `url` - изменённый URL
+
+:::info[Информация]
+Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-9}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "update-link" event
+editor.api.on("update-link", (obj) => {
+    console.log(obj);
+    console.log("The following link was updated:" + obj.url);
+});
+~~~
+
+**История изменений:** Событие добавлено в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/detach.md
new file mode 100644
index 0000000..d3ffdad
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/detach.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: api.detach()
+title: Метод on
+description: Вы можете узнать о методе on в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# api.detach()
+
+### Описание {#description}
+
+@short: Позволяет удалять/отсоединять обработчики событий
+
+### Использование {#usage}
+
+~~~jsx {}
+api.detach( tag: string ): void;
+~~~
+
+### Параметры {#parameters}
+
+- `tag` - (обязательный) имя тега действия
+
+### События {#events}
+
+:::info[Информация]
+Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {6-8,10}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+~~~
+
+**История изменений:** Метод был обновлён в v2.0. Параметры `name` и `context` были удалены
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/exec.md
new file mode 100644
index 0000000..694f817
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/exec.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.exec()
+title: Метод exec
+description: Вы можете узнать о методе exec в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# api.exec()
+
+### Описание {#description}
+
+@short: Позволяет инициировать внутренние события
+
+### Использование {#usage}
+
+~~~jsx {}
+api.exec(
+    event: string,
+    config: object
+): void;
+~~~
+
+### Параметры {#parameters}
+
+- `event` - (обязательный) событие, которое необходимо вызвать
+- `config` - (обязательный) объект конфигурации с параметрами (см. вызываемое событие)
+
+### События {#events}
+
+:::info[Информация]
+Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// set the text font size
+editor.api.exec("set-font-size", {
+    fontSize: "16px"
+});
+~~~
+
+**История изменений:** Метод был добавлен в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
new file mode 100644
index 0000000..d3fac5b
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getReactiveState()
+title: Метод getReactiveState
+description: Вы можете узнать о методе getReactiveState в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# api.getReactiveState()
+
+### Описание {#description}
+
+@short: Возвращает объект с реактивными свойствами RichText
+
+### Использование {#usage}
+
+~~~jsx {}
+api.getReactiveState(): object;
+~~~
+
+### Возвращает {#returns}
+
+Метод возвращает объект со следующими параметрами:
+
+~~~jsx {}
+{
+    cursorState: { subscribe: any },
+    defaultStyles {...},
+    document {...},
+    fullscreen {...},
+    history {...},
+    layoutMode {...},
+    popup {...},
+    selection {...}
+}
+~~~
+
+### Пример {#example}
+
+~~~jsx {5-7}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// get the Reactive State of RichText
+const reactive_state = editor.api.getReactiveState();
+console.log(reactive_state)
+~~~
+
+**История изменений:** Метод был добавлен в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-state.md
new file mode 100644
index 0000000..5c70db2
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getState()
+title: Метод getState
+description: Вы можете узнать о методе getState в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# api.getState()
+
+### Описание {#description}
+
+@short: Возвращает объект со свойствами StateStore компонента RichText
+
+### Использование {#usage}
+
+~~~jsx {}
+api.getState(): object;
+~~~
+
+### Возвращает {#returns}
+
+Метод возвращает объект со следующими параметрами:
+
+~~~jsx {}
+{
+    cursorState: {},
+    defaultStyles: {},
+    document: {},
+    fullscreen: boolean,
+    history: []
+    layoutMode: string,
+    popup: any,
+    selection: {}
+}
+~~~
+
+### Пример {#example}
+
+~~~jsx {5-7}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// get the State of RichText
+const state = editor.api.getState();
+console.log(state);
+~~~
+
+**История изменений:** Метод был добавлен в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/intercept.md
new file mode 100644
index 0000000..68d9cc8
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/intercept.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.intercept()
+title: Метод intercept
+description: Вы можете узнать о методе intercept в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# api.intercept()
+
+### Описание {#description}
+
+@short: Позволяет перехватывать и предотвращать внутренние события
+
+### Использование {#usage}
+
+~~~jsx {}
+api.intercept(
+    event: string,
+    callback: function
+): void;
+~~~
+
+### Параметры {#parameters}
+
+- `event` - (обязательный) событие, которое необходимо вызвать
+- `callback` - (обязательный) колбэк, который будет выполнен (аргументы колбэка зависят от вызываемого события)
+
+### События {#events}
+
+:::info[Информация]
+Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-10}
+// create RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// forbid changing the font size
+editor.api.intercept("set-font-size", (obj) => {
+    if(obj.fontSize !== "36px" ){
+        return false;
+    }
+});
+~~~
+
+**История изменений:** Метод был добавлен в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/on.md
new file mode 100644
index 0000000..f06fb52
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/on.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.on()
+title: Метод on
+description: Вы можете узнать о методе on в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# api.on()
+
+### Описание {#description}
+
+@short: Позволяет прикреплять обработчик к внутренним событиям
+
+### Использование {#usage}
+
+~~~jsx {}
+api.on(
+    event: string,
+    handler: function
+): void;
+~~~
+
+### Параметры {#parameters}
+
+- `event` - (обязательный) событие, которое необходимо вызвать
+- `handler` - (обязательный) обработчик, который будет прикреплён (аргументы обработчика зависят от вызываемого события)
+
+### События {#events}
+
+:::info[Информация]
+Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md)
+:::
+
+### Пример {#example}
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "set-font-size" event
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+});
+~~~
+
+**История изменений:** Метод был обновлён в v2.0. Параметр `context` был удалён
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/set-next.md
new file mode 100644
index 0000000..d7d2906
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/set-next.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: api.setNext()
+title: Метод setNext
+description: Вы можете узнать о методе setNext в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# api.setNext()
+
+### Описание {#description}
+
+@short: Позволяет добавлять действие в очередь Event Bus
+
+### Использование {#usage}
+
+~~~jsx {}
+api.setNext(next: any): void;
+~~~
+
+### Параметры {#parameters}
+
+- `next` - (обязательный) действие, которое необходимо включить в очередь **Event Bus**
+
+### Пример {#example}
+
+~~~jsx {10-11}
+const server = "https://some-backend-url";
+// Assume that you have a custom server service class named someServerService
+const someServerService = new ServerDataService(server);
+
+fetch(server + "/data").then((res) => res.json()).then((data) => {
+    const editor = new richtext.Richtext("#root", {
+        value: data
+    });
+
+    // Integrate someServerService into the Event Bus order of widget
+    editor.api.setNext(someServerService);
+});
+~~~
+
+**История изменений:** Метод был добавлен в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/destructor.md
new file mode 100644
index 0000000..1469491
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/destructor.md
@@ -0,0 +1,28 @@
+---
+sidebar_label: destructor()
+title: Метод destructor
+description: Вы можете узнать о методе destructor в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# destructor()
+
+### Описание {#description}
+
+@short: Удаляет все HTML-элементы RichText и отсоединяет все связанные события
+
+### Использование {#usage}
+
+~~~jsx {}
+destructor(): void;
+~~~
+
+### Пример {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+
+// remove RichText
+editor.destructor();
+~~~
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md
new file mode 100644
index 0000000..c7b9c98
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: getValue()
+title: Метод getValue
+description: Вы можете узнать о методе getValue в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# getValue()
+
+### Описание {#description}
+
+@short: Возвращает значение RichText
+
+### Использование {#usage}
+
+~~~jsx {}
+getValue(encoder?: any): string;
+~~~
+
+### Параметры {#parameters}
+
+- `encoder` - (необязательный) парсер, используемый для кодирования содержимого RichText в пользовательский формат. Доступны следующие форматы: `html` (по умолчанию) и `text`
+
+Получить необходимый энкодер можно следующим образом:
+
+```jsx
+const toTextEncoder = richtext.text.toText; // text encoder
+const toHTMLEncoder = richtext.html.toHTML; // html encoder
+```
+
+### Пример {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // sets the default value (HTML format)
+    // other configuration properties
+});
+
+const toTextEncoder = richtext.text.toText;
+const editor_value = editor.getValue(toTextEncoder);
+console.log(editor_value);
+~~~
+
+**История изменений:** Метод был обновлён в v2.0. Параметр `mode` был удалён. Параметр `encoder` был добавлен
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-config.md
new file mode 100644
index 0000000..822cc9e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-config.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: setConfig()
+title: Метод setConfig
+description: Вы можете узнать о методе setConfig в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# setConfig()
+
+### Описание {#description}
+
+@short: Применяет новые параметры конфигурации к RichText
+
+### Использование {#usage}
+
+~~~jsx {}
+setConfig(config: { [key:any]: any }): void;
+~~~
+
+### Параметры {#parameters}
+
+- `config` - (обязательный) объект параметров конфигурации RichText. Полный список свойств см. [здесь](api/overview/properties_overview.md)
+
+:::note[Примечание]
+Метод `setConfig()` сохраняет все ранее заданные параметры, которые явно не указаны при вызове метода `setConfig()`.
+:::
+
+### Пример {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "<h1>Some text</h1>",
+    // other configuration properties
+});
+
+editor.setConfig({
+    layoutMode: "document"
+});
+~~~
+
+**История изменений:** Метод был добавлен в v2.0
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
new file mode 100644
index 0000000..0d6fde4
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: setLocale()
+title: Метод setLocale
+description: Вы можете узнать о методе setLocale в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# setLocale()
+
+### Описание {#description}
+
+@short: Применяет новую локаль к RichText
+
+### Использование {#usage}
+
+~~~jsx {}
+setLocale(null | locale?: object): void;
+~~~
+
+### Параметры {#parameters}
+
+- `null` - (необязательный) сбрасывает на локаль по умолчанию (*английскую*)
+- `locale` - (необязательный) объект с данными новой локали, которую необходимо применить
+
+:::info[Информация]
+Используйте метод `setLocale()` для применения новой локали к RichText. Чтобы сбросить RichText на локаль по умолчанию, вызовите метод `setLocale()` без аргументов (или со значением *null*).
+:::
+
+### Пример {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+
+// apply the "de" locale to RichText
+editor.setLocale(de);
+~~~
+
+**История изменений:** Метод был добавлен в v2.0
+
+**Связанные статьи:** [Локализация](guides/localization.md)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-value.md
new file mode 100644
index 0000000..ec7fe97
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-value.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: setValue()
+title: Метод setValue
+description: Вы можете узнать о методе setValue в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник API, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# setValue()
+
+### Описание {#description}
+
+@short: Применяет новое значение к RichText
+
+### Использование {#usage}
+
+~~~jsx {}
+setValue: (value: string, encoder?: any): void;
+~~~
+
+### Параметры {#parameters}
+
+- `value` - (обязательный) значение, которое необходимо вставить в RichText
+- `encoder` - (необязательный) пользовательский парсер для кодирования содержимого RichText в пользовательский формат. Доступны следующие форматы: `html` (по умолчанию) и `text`
+
+Получить необходимый энкодер можно следующим образом:
+
+```jsx
+const fromTextEncoder = richtext.text.fromText; // text encoder
+const fromHTMLEncoder = richtext.html.fromHTML; // html encoder
+```
+
+### Пример {#example}
+
+~~~jsx {7-8}
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+
+const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
+
+const fromTextEncoder = richtext.text.fromText;
+editor.setValue(editor_value, fromTextEncoder);
+~~~
+
+**История изменений:** Метод был обновлён в v2.0. Параметр `mode` был удалён. Параметр `encoder` был добавлен
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
new file mode 100644
index 0000000..4098dae
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Методы Event Bus
+title: Методы Event Bus
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете найти обзор методов внутренней шины событий (Event Bus) редактора JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Методы Event Bus {#event-bus-methods}
+
+На этой странице приведён список методов, связанных с внутренней шиной событий (Event Bus) редактора DHTMLX RichText.
+Эти методы предназначены для расширенных интеграций и реализации нестандартного поведения на основе внутренней системы событий.
+
+| Имя                                               | Описание                                     |
+| ------------------------------------------------- | -------------------------------------------- |
+| [](api/internal/detach.md)                         | @getshort(api/internal/detach.md)             |
+| [](api/internal/exec.md)                           | @getshort(api/internal/exec.md)               |
+| [](api/internal/intercept.md)                      | @getshort(api/internal/intercept.md)          |
+| [](api/internal/on.md)                             | @getshort(api/internal/on.md)                 |
+| [](api/internal/set-next.md)                       | @getshort(api/internal/set-next.md)           |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
new file mode 100644
index 0000000..29568a7
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: Обзор событий
+title: Обзор событий
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете найти обзор событий редактора JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Обзор событий {#events-overview}
+
+На этой странице перечислены все события, генерируемые редактором DHTMLX RichText.
+Вы можете использовать эти события для расширения функциональности, отслеживания действий пользователя или запуска пользовательского поведения.
+
+| Имя                                                    | Описание                                      |
+| ------------------------------------------------------ | --------------------------------------------- |
+| [](api/events/align.md)                                 | @getshort(api/events/align.md)                 |
+| [](api/events/clear-text-format.md)                     | @getshort(api/events/clear-text-format.md)     |
+| [](api/events/copy.md)                                  | @getshort(api/events/copy.md)                  |
+| [](api/events/create-new.md)                            | @getshort(api/events/create-new.md)            |
+| [](api/events/cut.md)                                   | @getshort(api/events/cut.md)                   |
+| [](api/events/delete-link.md)                           | @getshort(api/events/delete-link.md)           |
+| [](api/events/export.md)                                | @getshort(api/events/export.md)                |
+| [](api/events/import.md)                                | @getshort(api/events/import.md)                |
+| [](api/events/indent.md)                                | @getshort(api/events/indent.md)                |
+| [](api/events/insert-image.md)                          | @getshort(api/events/insert-image.md)          |
+| [](api/events/insert-line.md)                           | @getshort(api/events/insert-line.md)           |
+| [](api/events/insert-link.md)                           | @getshort(api/events/insert-link.md)           |
+| [](api/events/insert-list.md)                           | @getshort(api/events/insert-list.md)           |
+| [](api/events/outdent.md)                               | @getshort(api/events/outdent.md)               |
+| [](api/events/paste.md)                                 | @getshort(api/events/paste.md)                 |
+| [](api/events/print.md)                                 | @getshort(api/events/print.md)                 |
+| [](api/events/redo.md)                                  | @getshort(api/events/redo.md)                  |
+| [](api/events/resize-image.md)                          | @getshort(api/events/resize-image.md)          |
+| [](api/events/set-font-family.md)                       | @getshort(api/events/set-font-family.md)       |
+| [](api/events/set-font-size.md)                         | @getshort(api/events/set-font-size.md)         |
+| [](api/events/set-line-height.md)                       | @getshort(api/events/set-line-height.md)       |
+| [](api/events/set-text-color.md)                        | @getshort(api/events/set-text-color.md)        |
+| [](api/events/set-text-format.md)                       | @getshort(api/events/set-text-format.md)       |
+| [](api/events/set-text-style.md)                        | @getshort(api/events/set-text-style.md)        |
+| [](api/events/show-popup.md)                            | @getshort(api/events/show-popup.md)            |
+| [](api/events/subscript.md)                             | @getshort(api/events/subscript.md)             |
+| [](api/events/superscript.md)                           | @getshort(api/events/superscript.md)           |
+| [](api/events/toggle-fullscreen-mode.md)                | @getshort(api/events/toggle-fullscreen-mode.md)|
+| [](api/events/toggle-layout-mode.md)                    | @getshort(api/events/toggle-layout-mode.md)    |
+| [](api/events/toggle-shortcut-info.md)                  | @getshort(api/events/toggle-shortcut-info.md)  |
+| [](api/events/undo.md)                                  | @getshort(api/events/undo.md)                  |
+| [](api/events/update-link.md)                           | @getshort(api/events/update-link.md)           |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
new file mode 100644
index 0000000..df7cb77
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
@@ -0,0 +1,97 @@
+---
+sidebar_label: Обзор API
+title: Обзор API
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете найти обзор API редактора JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Обзор API {#api-overview}
+
+## Конструктор RichText {#richtext-constructor}
+
+~~~js
+new richtext.RichText("#root", {
+    // configuration parameters
+});
+~~~
+
+**Параметры**:
+
+- HTML-контейнер (например, CSS-селектор или DOM-элемент)
+- объект конфигурации ([см. свойства](api/overview/properties_overview.md))
+
+## Методы RichText {#richtext-methods}
+
+| Имя                                           | Описание                                  |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/methods/get-value.md)                   | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                   | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                  | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                  | @getshort(api/methods/set-locale.md)       |
+| [](api/methods/destructor.md)                  | @getshort(api/methods/destructor.md)       |
+
+## Методы Event Bus {#event-bus-methods}
+
+| Имя                                           | Описание                                  |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/exec.md)                       | @getshort(api/internal/exec.md)            |
+| [](api/internal/intercept.md)                  | @getshort(api/internal/intercept.md)       |
+| [](api/internal/on.md)                         | @getshort(api/internal/on.md)              |
+| [](api/internal/detach.md)                     | @getshort(api/internal/detach.md)          |
+| [](api/internal/set-next.md)                   | @getshort(api/internal/set-next.md)        |
+
+## Методы состояния {#state-methods}
+
+| Имя                                           | Описание                                  |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/get-state.md)                  | @getshort(api/internal/get-state.md)       |
+| [](api/internal/get-reactive-state.md)         | @getshort(api/internal/get-reactive-state.md) |
+
+## События {#events}
+
+| Имя                                            | Описание                                  |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/events/align.md)                        | @getshort(api/events/align.md)             |
+| [](api/events/clear-text-format.md)            | @getshort(api/events/clear-text-format.md) |
+| [](api/events/copy.md)                         | @getshort(api/events/copy.md)              |
+| [](api/events/create-new.md)                   | @getshort(api/events/create-new.md)        |
+| [](api/events/cut.md)                          | @getshort(api/events/cut.md)               |
+| [](api/events/delete-link.md)                  | @getshort(api/events/delete-link.md)       |
+| [](api/events/export.md)                       | @getshort(api/events/export.md)            |
+| [](api/events/import.md)                       | @getshort(api/events/import.md)            |
+| [](api/events/indent.md)                       | @getshort(api/events/indent.md)            |
+| [](api/events/insert-image.md)                 | @getshort(api/events/insert-image.md)      |
+| [](api/events/insert-line.md)                  | @getshort(api/events/insert-line.md)       |
+| [](api/events/insert-link.md)                  | @getshort(api/events/insert-link.md)       |
+| [](api/events/insert-list.md)                  | @getshort(api/events/insert-list.md)       |
+| [](api/events/outdent.md)                      | @getshort(api/events/outdent.md)           |
+| [](api/events/paste.md)                        | @getshort(api/events/paste.md)             |
+| [](api/events/print.md)                        | @getshort(api/events/print.md)             |
+| [](api/events/redo.md)                         | @getshort(api/events/redo.md)              |
+| [](api/events/resize-image.md)                 | @getshort(api/events/resize-image.md)      |
+| [](api/events/set-font-family.md)              | @getshort(api/events/set-font-family.md)   |
+| [](api/events/set-font-size.md)                | @getshort(api/events/set-font-size.md)     |
+| [](api/events/set-line-height.md)              | @getshort(api/events/set-line-height.md)   |
+| [](api/events/set-text-color.md)               | @getshort(api/events/set-text-color.md)    |
+| [](api/events/set-text-format.md)              | @getshort(api/events/set-text-format.md)   |
+| [](api/events/set-text-style.md)               | @getshort(api/events/set-text-style.md)    |
+| [](api/events/show-popup.md)                   | @getshort(api/events/show-popup.md)        |
+| [](api/events/subscript.md)                    | @getshort(api/events/subscript.md)         |
+| [](api/events/superscript.md)                  | @getshort(api/events/superscript.md)       |
+| [](api/events/toggle-fullscreen-mode.md)       | @getshort(api/events/toggle-fullscreen-mode.md) |
+| [](api/events/toggle-layout-mode.md)           | @getshort(api/events/toggle-layout-mode.md) |
+| [](api/events/toggle-shortcut-info.md)         | @getshort(api/events/toggle-shortcut-info.md) |
+| [](api/events/undo.md)                         | @getshort(api/events/undo.md)              |
+| [](api/events/update-link.md)                  | @getshort(api/events/update-link.md)       |
+
+## Свойства {#properties}
+
+| Имя                                           | Описание                                  |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/config/default-styles.md)               | @getshort(api/config/default-styles.md)    |
+| [](api/config/fullscreen-mode.md)              | @getshort(api/config/fullscreen-mode.md)   |
+| [](api/config/image-upload-url.md)             | @getshort(api/config/image-upload-url.md)  |
+| [](api/config/layout-mode.md)                  | @getshort(api/config/layout-mode.md)       |
+| [](api/config/locale.md)                       | @getshort(api/config/locale.md)            |
+| [](api/config/menubar.md)                      | @getshort(api/config/menubar.md)           |
+| [](api/config/toolbar.md)                      | @getshort(api/config/toolbar.md)           |
+| [](api/config/value.md)                        | @getshort(api/config/value.md)             |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
new file mode 100644
index 0000000..404749c
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Обзор методов
+title: Обзор методов
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете найти обзор методов редактора JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Обзор методов {#methods-overview}
+
+На этой странице представлен краткий обзор основных методов редактора DHTMLX RichText.
+Используйте этот справочник для быстрого перехода к подробным описаниям каждого метода, понимания его назначения и просмотра примеров использования.
+
+| Имя                                                    | Описание                                  |
+| ------------------------------------------------------ | ----------------------------------------- |
+| [](api/methods/destructor.md)                           | @getshort(api/methods/destructor.md)       |
+| [](api/methods/get-value.md)                            | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                            | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                           | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                           | @getshort(api/methods/set-locale.md)       |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
new file mode 100644
index 0000000..e6b9b6c
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: Обзор свойств
+title: Обзор свойств
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете найти обзор свойств редактора JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Обзор свойств {#properties-overview}
+
+На этой странице перечислены все свойства конфигурации, которые можно использовать при инициализации редактора DHTMLX RichText.
+Они позволяют управлять макетом, панелью инструментов, значением, локализацией и другими аспектами редактора.
+
+| Имя                                                     | Описание                                     |
+| --------------------------------------------------------|----------------------------------------------|
+| [](api/config/default-styles.md)                         | @getshort(api/config/default-styles.md)       |
+| [](api/config/fullscreen-mode.md)                        | @getshort(api/config/fullscreen-mode.md)      |
+| [](api/config/image-upload-url.md)                       | @getshort(api/config/image-upload-url.md)     |
+| [](api/config/layout-mode.md)                            | @getshort(api/config/layout-mode.md)          |
+| [](api/config/locale.md)                                 | @getshort(api/config/locale.md)               |
+| [](api/config/menubar.md)                                | @getshort(api/config/menubar.md)              |
+| [](api/config/toolbar.md)                                | @getshort(api/config/toolbar.md)              |
+| [](api/config/value.md)                                  | @getshort(api/config/value.md)                |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
new file mode 100644
index 0000000..e9fab3f
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
@@ -0,0 +1,15 @@
+---
+sidebar_label: Методы состояния
+title: Методы состояния
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете найти обзор методов внутреннего состояния редактора JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Методы состояния {#state-methods}
+
+На этой странице перечислены методы для доступа к внутреннему состоянию редактора DHTMLX RichText и работы с ним.
+Эти методы полезны для отладки, интеграции с реактивными системами или реализации сложной пользовательской логики.
+
+| Имя                                                         | Описание                                         |
+| ----------------------------------------------------------- | ------------------------------------------------ |
+| [](api/internal/get-reactive-state.md)                       | @getshort(api/internal/get-reactive-state.md)     |
+| [](api/internal/get-state.md)                                | @getshort(api/internal/get-state.md)              |
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png
new file mode 100644
index 0000000..baeb296
Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png differ
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png
new file mode 100644
index 0000000..bf4312c
Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png differ
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/editor.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/editor.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/editor.png differ
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png differ
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png
new file mode 100644
index 0000000..e6d70b9
Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png differ
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png
new file mode 100644
index 0000000..8b207e6
Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png differ
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png
new file mode 100644
index 0000000..c62be84
Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png differ
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png
new file mode 100644
index 0000000..07410f7
Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png differ
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/trial_richtext.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/trial_richtext.png
new file mode 100644
index 0000000..cdee98c
Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/trial_richtext.png differ
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md
new file mode 100644
index 0000000..d15a15e
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md
@@ -0,0 +1,283 @@
+---
+sidebar_label: Конфигурация
+title: Конфигурация
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфигурации компонента. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Конфигурация
+
+Внешний вид и поведение RichText настраиваются через соответствующий API. Доступные параметры позволяют:
+
+- Показывать/скрывать **menubar** с помощью свойства [`menubar`](api/config/menubar.md)
+- Настраивать **toolbar** с помощью свойства [`toolbar`](api/config/toolbar.md)
+- Включать **полноэкранный режим** с помощью свойства [`fullscreenMode`](api/config/fullscreen-mode.md)
+- Переключать **режим отображения** между «classic» и «document» с помощью свойства [`layoutMode`](api/config/layout-mode.md)
+- Задавать **начальное значение** с помощью свойства [`value`](api/config/value.md)
+- Задавать **начальную локаль** с помощью свойства [`locale`](api/config/locale.md)
+- Применять **начальные стили** с помощью свойства [`defaultStyles`](api/config/default-styles.md)
+
+## Режимы отображения {#layout-modes}
+
+В редакторе RichText доступны два режима отображения — выберите наиболее удобный для работы с вашим контентом:
+
+- **"classic"**
+
+<div className="img_border">
+![Классический режим](./../assets/richtext/classic_mode.png)
+</div>
+
+- **"document"**
+
+<div className="img_border">
+![Режим документа](./../assets/richtext/document_mode.png)
+</div>
+
+Чтобы указать нужный режим, задайте его в свойстве [`layoutMode`](api/config/layout-mode.md) объекта конфигурации RichText при инициализации компонента:
+
+~~~jsx
+const editor = new richtext.Richtext("#root", {
+    layoutMode: "document"
+});
+~~~
+
+## Toolbar {#toolbar}
+
+Toolbar в RichText состоит из нескольких блоков элементов управления, которые можно изменять по своему усмотрению.
+
+### Стандартные элементы toolbar {#default-toolbar-controls}
+
+В toolbar RichText можно задать следующие кнопки и элементы управления:
+
+| Кнопка              | Описание                                                                    |
+|---------------------|-----------------------------------------------------------------------------|
+| `undo`              | Отменяет последнее действие пользователя                                    |
+| `redo`              | Повторяет отменённое действие                                               |
+| `style`             | Позволяет выбрать стиль текста (заголовки, абзац и т.д.)                   |
+| `font-family`       | Изменяет шрифт выделенного текста                                           |
+| `font-size`         | Изменяет размер выделенного текста                                          |
+| `bold`              | Применяет полужирное начертание к выделенному тексту                        |
+| `italic`            | Применяет курсивное начертание к выделенному тексту                         |
+| `underline`         | Подчёркивает выделенный текст                                               |
+| `strike`            | Применяет зачёркивание                                                      |
+| `subscript`         | Форматирует текст как нижний индекс                                         |
+| `superscript`       | Форматирует текст как верхний индекс                                        |
+| `text-color`        | Изменяет цвет текста                                                        |
+| `background-color`  | Изменяет цвет фона (выделения) текста                                       |
+| `align`             | Задаёт выравнивание текста (по левому краю, по центру, по правому краю, по ширине) |
+| `indent`            | Увеличивает отступ абзаца                                                   |
+| `outdent`           | Уменьшает отступ абзаца                                                     |
+| `line-height`       | Регулирует межстрочный интервал                                             |
+| `quote`             | Форматирует текст как цитату                                                |
+| `bulleted-list`     | Создаёт маркированный список                                                |
+| `numbered-list`     | Создаёт нумерованный список                                                 |
+| `link`              | Вставляет или редактирует гиперссылку                                       |
+| `image`             | Вставляет изображение                                                       |
+| `line`              | Вставляет горизонтальную линию                                              |
+| `clear`             | Удаляет всё форматирование выделенного текста                               |
+| `print`             | Открывает диалог печати                                                     |
+| `fullscreen`        | Переключает полноэкранный режим                                             |
+| `mode`              | Переключает между двумя режимами отображения: Classic / Document            |
+| `shortcuts`         | Показывает список доступных сочетаний клавиш                                |
+| `separator`         | Добавляет визуальный разделитель между элементами управления                |
+
+Структура toolbar задаётся с помощью свойства [`toolbar`](api/config/toolbar.md) — массива строк с именами элементов управления.
+
+~~~jsx {2-36}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo",
+        "redo",
+        "separator",
+        "style",
+        "separator",
+        "font-family",
+        "font-size",
+        "separator",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "separator",
+        "text-color",
+        "background-color",
+        "separator",
+        "align",
+        "line-height",
+        "outdent",
+        "indent",
+        "separator",
+        "bulleted-list",
+        "numbered-list",
+        "quote",
+        "separator",
+        "link",
+        "image",
+        "separator",
+        "clear",
+        "separator",
+        "fullscreen",
+        "mode"
+        // другие кнопки
+    ],
+    // другие свойства конфигурации
+});
+~~~
+
+**Связанный пример:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### Пользовательские элементы toolbar {#custom-toolbar-controls}
+
+В свойстве [`toolbar`](api/config/toolbar.md) также можно задать пользовательские элементы управления в виде объектов со следующими параметрами:
+
+- `type` — (обязательный) тип пользовательского элемента управления. Доступные типы: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` — (необязательный) идентификатор пользовательского элемента управления (не должен совпадать с существующими идентификаторами)
+- `label` — (необязательный) подпись кнопки (комбинируется с иконкой)
+- `tooltip` — (необязательный) всплывающая подсказка при наведении (если не указана, используется значение из `label`)
+- `css` — (необязательный) CSS-класс, назначаемый элементу управления (поддерживаемые классы по умолчанию: wx-primary, wx-secondary)
+- `handler` — (необязательный) колбэк-функция, выполняемая при нажатии кнопки
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // кнопки (строки представляют только кнопки)
+        "bold",
+        "italic",
+        // предустановленные кнопки (пользователь не может задавать дополнительные опции (метки, подсказки и т.д.), только ({ type: "button", id: string })
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // пользователь должен указать правильный тип для предустановленного элемента управления (например richselect/colorpicker)
+        // несовпадающие типы игнорируются (не добавляются в toolbar)
+        {
+            type: "richselect", // type: "button" - некорректно, будет проигнорировано
+            id: "mode",
+        },
+        // пользовательские кнопки (поддерживаемые опции перечислены ниже)
+        // пользователь может создавать только пользовательские кнопки (richselect/colorpicker пока не поддерживаются)
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* пользовательская логика */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* пользовательская логика */}
+        }
+    ],
+    // другие свойства конфигурации
+});
+~~~
+
+**Связанный пример:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### Скрытие Toolbar {#hide-toolbar}
+
+Чтобы скрыть toolbar, задайте свойству [`toolbar`](api/config/toolbar.md) значение `false`:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false,
+    // другие свойства конфигурации
+});
+~~~
+
+## Стили по умолчанию {#default-styles}
+
+С помощью свойства [`defaultStyles`](api/config/default-styles.md) можно задать значения стилей по умолчанию для определённых типов блоков в редакторе.
+
+~~~jsx {}
+defaultStyles?: boolean | {
+    "*"?: { // применяется ко всем блокам, позволяя задать общие свойства для всех
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+Свойство `defaultStyles` НЕ применяет CSS-стили к затронутым блокам напрямую. CSS-стили необходимо применять отдельно:
+
+```html title="index.html"
+<div id="root"></div>
+```
+
+```jsx {2-9} title="index.js"
+const editor = new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+#root h2 {
+    font-family: Roboto;
+    font-size: 28px;
+    color: purple;
+    background: #FFC0CB;
+}
+```
+
+В этом примере всем блокам `h2` назначается шрифт `"Roboto"` с размером 28px, а также изменяются цвет текста и фона. CSS-стили применяются к блокам `h2` отдельно.
+
+**Связанный пример:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md
new file mode 100644
index 0000000..7708cdc
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md
@@ -0,0 +1,63 @@
+---
+sidebar_label: Инициализация
+title: Инициализация
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать об инициализации компонента. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Инициализация
+
+В этом руководстве подробно описано, как разместить RichText на странице и добавить редактор в ваше приложение. Выполните следующие шаги, чтобы получить готовый к работе компонент:
+
+1. [Подключите файлы RichText на страницу](#including-source-files).
+2. [Создайте контейнер для RichText](#creating-container).
+3. [Инициализируйте RichText с помощью конструктора объекта](#initializing-richtext).
+
+## Подключение файлов {#including-source-files}
+
+[Скачайте пакет](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) и распакуйте его в папку вашего проекта.
+
+Для создания RichText необходимо подключить на страницу 2 файла:
+
+- *richtext.js*
+- *richtext.css*
+
+Убедитесь, что указаны правильные относительные пути к файлам:
+
+~~~html title="index.html"
+<script type="text/javascript" src="./codebase/richtext.js"></script>
+<link rel="stylesheet" href="./codebase/richtext.css">
+~~~
+
+## Создание контейнера {#creating-container}
+
+Добавьте контейнер для RichText и задайте ему идентификатор, например *"root"*:
+
+~~~jsx title="index.html"
+<div id="root"></div>
+~~~
+
+## Инициализация RichText {#initializing-richtext}
+
+Инициализируйте RichText с помощью конструктора `richtext.Richtext`. Конструктор принимает два параметра:
+
+- HTML-контейнер (идентификатор HTML-контейнера)
+- объект со свойствами конфигурации. [Полный список свойств приведён ниже](#configuration-properties)
+
+~~~jsx title="index.html"
+// создание RichText
+const editor = new richtext.Richtext("#root", {
+    // свойства конфигурации
+});
+~~~
+
+### Свойства конфигурации {#configuration-properties}
+
+:::note[Примечание]
+Полный список свойств для настройки **RichText** можно найти [**здесь**](api/overview/properties_overview.md).
+:::
+
+## Пример {#example}
+
+В этом примере показано, как инициализировать **RichText** с начальными данными:
+
+<iframe src="https://snippet.dhtmlx.com/tjryzka7?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
new file mode 100644
index 0000000..3b78ac6
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
@@ -0,0 +1,300 @@
+---
+sidebar_label: Интеграция с Angular
+title: Интеграция с Angular
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать об интеграции с Angular. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Интеграция с Angular
+
+:::tip[Совет]
+Перед прочтением этой документации рекомендуем ознакомиться с основными концепциями и паттернами **Angular**. Для повторения материала обратитесь к [**документации Angular**](https://v17.angular.io/docs).
+:::
+
+DHTMLX RichText совместим с **Angular**. Мы подготовили примеры кода использования DHTMLX RichText с **Angular**. Подробнее см. соответствующий [**пример на GitHub**](https://github.com/DHTMLX/angular-richtext-demo).
+
+## Создание проекта {#creating-a-project}
+
+:::info[Информация]
+Перед созданием нового проекта установите [**Angular CLI**](https://v17.angular.io/cli) и [**Node.js**](https://nodejs.org/en/).
+:::
+
+Создайте новый проект **my-angular-richtext-app** с помощью Angular CLI. Выполните следующую команду:
+
+~~~json
+ng new my-angular-richtext-app
+~~~
+
+:::note[Примечание]
+Если вы следуете этому руководству, отключите Server-Side Rendering (SSR) и Static Site Generation (SSG/Prerendering) при создании нового Angular-приложения!
+:::
+
+Команда выше устанавливает все необходимые инструменты, поэтому дополнительных команд выполнять не требуется.
+
+### Установка зависимостей {#installation-of-dependencies}
+
+Перейдите в папку созданного приложения:
+
+~~~json
+cd my-angular-richtext-app
+~~~
+
+Установите зависимости и запустите dev server. Для этого используйте менеджер пакетов [**yarn**](https://yarnpkg.com/):
+
+~~~json
+yarn
+yarn start
+~~~
+
+Приложение должно запуститься на localhost (например, `http://localhost:3000`).
+
+## Создание RichText {#creating-richtext}
+
+Теперь необходимо получить исходный код DHTMLX RichText. Для этого остановите приложение и установите пакет RichText.
+
+### Шаг 1. Установка пакета {#step-1-package-installation}
+
+Скачайте [**пробный пакет RichText**](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям из файла README. Обратите внимание: пробная версия RichText доступна только 30 дней.
+
+### Шаг 2. Создание компонента {#step-2-component-creation}
+
+Создайте Angular-компонент для добавления RichText в приложение. Создайте папку **richtext** в директории **src/app/**, добавьте в неё новый файл и назовите его **richtext.component.ts**.
+
+#### Импорт файлов {#import-source-files}
+
+Откройте файл **richtext.component.ts** и импортируйте файлы RichText. Обратите внимание:
+
+- если вы используете PRO-версию и устанавливаете пакет RichText из локальной папки, путь импорта выглядит следующим образом:
+
+~~~jsx
+import { Richtext} from 'dhx-richtext-package';
+~~~
+
+- если вы используете пробную версию RichText, укажите следующий путь:
+
+~~~jsx
+import { Richtext} from '@dhx/trial-richtext';
+~~~
+
+В этом руководстве показана настройка **пробной** версии RichText.
+
+#### Настройка контейнеров и инициализация Richtext {#set-containers-and-initialize-the-richtext}
+
+Чтобы отобразить RichText на странице, создайте контейнер для него и инициализируйте компонент с помощью соответствующего конструктора:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext", // имя шаблона, используемое в файле "app.component.ts" как <richtext />
+    styleUrls: ["./richtext.component.css"], // подключение css-файла
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    // инициализация контейнера для RichText
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: Richtext;
+
+    ngOnInit() {
+        // инициализация компонента RichText
+        this._editor = new Richtext(this.richtext_container.nativeElement, {});
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor(); // уничтожение RichText
+    }
+}
+~~~
+
+#### Добавление стилей {#adding-styles}
+
+Для корректного отображения RichText необходимо задать соответствующие стили. Создайте файл **richtext.component.css** в директории **src/app/richtext/** и укажите нужные стили для RichText и его контейнера:
+
+~~~css title="richtext.component.css"
+/* импорт стилей RichText */
+@import "@dhx/trial-richtext/dist/richtext.css";
+
+/* стили начальной страницы */
+html,
+body{
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* стили контейнера RichText */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* стили виджета RichText */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### Загрузка данных {#loading-data}
+
+Чтобы добавить данные в RichText, подготовьте набор данных. Создайте файл **data.ts** в директории **src/app/richtext/** и добавьте в него данные:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Затем откройте файл ***richtext.component.ts***, импортируйте файл с данными и передайте нужные свойства данных в объект конфигурации RichText внутри метода `ngOnInit()`, как показано ниже:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // импорт данных
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // инициализация свойства данных
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            value
+            // другие свойства конфигурации
+        });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+Также можно использовать метод [`setValue()`](api/methods/set-value.md) внутри метода `ngOnInit()` в Angular для загрузки данных в RichText.
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // импорт данных
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // инициализация свойства данных
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            // другие свойства конфигурации
+        });
+
+        // передача данных через метод setValue()
+        this._editor.setValue({ value });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+Компонент RichText готов к использованию. После добавления элемента на страницу RichText инициализируется с данными. При необходимости можно задать дополнительные параметры конфигурации. Полный список доступных свойств см. в [документации API RichText](api/overview/main_overview.md).
+
+#### Обработка событий {#handling-events}
+
+Когда пользователь выполняет какое-либо действие в RichText, возникает событие. Вы можете использовать события для отслеживания действий и выполнения нужного кода. Полный список событий — в [обзоре событий](api/overview/events_overview.md).
+
+Откройте файл **richtext.component.ts** и дополните метод `ngOnInit()` следующим образом:
+
+~~~jsx {} title="richtext.component.ts"
+// ...
+ngOnInit() {
+    this._editor = new Richtext(this.richtext_container.nativeElement, {});
+
+    this._editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+}
+
+ngOnDestroy(): void {
+    this._editor.destructor();
+}
+~~~
+
+### Шаг 3. Добавление RichText в приложение {#step-3-adding-richtext-into-the-app}
+
+Чтобы добавить компонент ***RichTextComponent*** в приложение, откройте файл ***src/app/app.component.ts*** и замените код по умолчанию следующим:
+
+~~~jsx {} title="app.component.ts"
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "app-root",
+    template: `<richtext/>`
+})
+export class AppComponent {
+    name = "";
+}
+~~~
+
+Затем создайте файл ***app.module.ts*** в директории ***src/app/*** и укажите *RichTextComponent* следующим образом:
+
+~~~jsx {} title="app.module.ts"
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from "./app.component";
+import { RichTextComponent } from "./richtext/richtext.component";
+
+@NgModule({
+    declarations: [AppComponent, RichTextComponent],
+    imports: [BrowserModule],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}
+~~~
+
+Последний шаг — откройте файл ***src/main.ts*** и замените существующий код следующим:
+
+~~~jsx title="main.ts"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
+platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch((err) => console.error(err));
+~~~
+
+После этого запустите приложение, чтобы увидеть RichText с загруженными данными на странице.
+
+<div className="img_border">
+![Инициализация RichText](../assets/trial_richtext.png)
+</div>
+
+Теперь вы знаете, как интегрировать DHTMLX RichText с Angular. Вы можете адаптировать код под свои требования. Финальный расширенный пример находится на [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo).
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
new file mode 100644
index 0000000..c3ac58b
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
@@ -0,0 +1,253 @@
+---
+sidebar_label: Интеграция с React
+title: Интеграция с React
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать об интеграции с React. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Интеграция с React
+
+:::tip[Совет]
+Перед прочтением этой документации рекомендуем ознакомиться с основными концепциями и паттернами [**React**](https://react.dev). Для повторения материала обратитесь к [**документации React**](https://react.dev/learn).
+:::
+
+DHTMLX RichText совместим с **React**. Мы подготовили примеры кода использования DHTMLX RichText с **React**. Подробнее см. соответствующий [**пример на GitHub**](https://github.com/DHTMLX/react-richtext-demo).
+
+## Создание проекта {#creating-a-project}
+
+:::info[Информация]
+Перед созданием нового проекта установите [**Vite**](https://vite.dev/) (опционально) и [**Node.js**](https://nodejs.org/en/).
+:::
+
+Вы можете создать базовый проект **React** или использовать **React с Vite**. Назовём проект **my-react-richtext-app**:
+
+~~~json
+npx create-react-app my-react-richtext-app
+~~~
+
+### Установка зависимостей {#installation-of-dependencies}
+
+Перейдите в папку созданного приложения:
+
+~~~json
+cd my-react-richtext-app
+~~~
+
+Установите зависимости и запустите dev server. Используйте менеджер пакетов:
+
+- если вы используете [**yarn**](https://yarnpkg.com/), выполните следующие команды:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- если вы используете [**npm**](https://www.npmjs.com/), выполните следующие команды:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+Приложение должно запуститься на localhost (например, `http://localhost:3000`).
+
+## Создание RichText {#creating-richtext}
+
+Теперь необходимо получить исходный код DHTMLX RichText. Для этого остановите приложение и установите пакет RichText.
+
+### Шаг 1. Установка пакета {#step-1-package-installation}
+
+Скачайте [**пробный пакет RichText**](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям из файла README. Обратите внимание: пробная версия RichText доступна только 30 дней.
+
+### Шаг 2. Создание компонента {#step-2-component-creation}
+
+Создайте React-компонент для добавления RichText в приложение. Создайте новый файл в директории ***src/*** и назовите его ***Richtext.jsx***.
+
+#### Импорт файлов {#importing-source-files}
+
+Откройте файл ***Richtext.jsx*** и импортируйте файлы RichText. Обратите внимание:
+
+- если вы используете PRO-версию и устанавливаете пакет RichText из локальной папки, пути импорта выглядят следующим образом:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+~~~
+
+- если вы используете пробную версию RichText, укажите следующие пути:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from '@dhx/trial-richtext';
+import "@dhx/trial-richtext/dist/richtext.css";
+~~~
+
+В этом руководстве показана настройка **пробной** версии RichText.
+
+#### Настройка контейнеров и добавление Richtext {#setting-containers-and-adding-richtext}
+
+Чтобы отобразить RichText на странице, создайте контейнер для него и инициализируйте компонент с помощью соответствующих конструкторов:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css'; // подключение стилей RichText
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef(); // инициализация контейнера для RichText
+
+    useEffect(() => {
+        // инициализация компонента RichText
+        const editor = new Richtext(richtext_container.current, {});
+
+        return () => {
+            editor.destructor(); // уничтожение RichText
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+#### Добавление стилей {#adding-styles}
+
+Для корректного отображения RichText укажите необходимые стили для RichText и его контейнера в главном CSS-файле проекта:
+
+~~~css title="index.css"
+/* стили начальной страницы */
+html,
+body,
+#root {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* стили контейнера RichText */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* стили виджета RichText */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### Загрузка данных {#loading-data}
+
+Чтобы добавить данные в RichText, подготовьте набор данных. Создайте файл ***data.js*** в директории ***src/*** и добавьте в него данные:
+
+~~~jsx {} title="data.js"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Затем откройте файл ***App.js***, импортируйте данные и передайте их в созданный компонент `<RichText/>` в виде **props**:
+
+~~~jsx {2,5-6} title="App.js"
+import RichText from "./Richtext";
+import { getData } from "./data";
+
+function App() {
+    const { value } = getData();
+    return <RichText value={value} />;
+}
+
+export default App;
+~~~
+
+Перейдите в файл ***Richtext.jsx*** и примените переданные **props** к объекту конфигурации RichText:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            value: props.value, // применение значения
+            // другие свойства конфигурации
+        });
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+Также можно использовать метод [`setValue()`](api/methods/set-value.md) внутри метода `useEffect()` в React для загрузки данных в RichText:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    let value = props.value;
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            // свойства конфигурации
+        });
+
+        editor.setValue(value);
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+Компонент RichText готов к использованию. После добавления элемента на страницу RichText инициализируется с данными. При необходимости можно задать дополнительные параметры конфигурации. Полный список доступных свойств см. в [документации API RichText](api/overview/main_overview.md).
+
+#### Обработка событий {#handling-events}
+
+Когда пользователь выполняет какое-либо действие в RichText, возникает событие. Вы можете использовать события для отслеживания действий и выполнения нужного кода. Полный список событий — в [обзоре событий](api/overview/events_overview.md).
+
+Откройте файл ***Richtext.jsx*** и дополните метод `useEffect()` следующим образом:
+
+~~~jsx {} title="Richtext.jsx"
+// ...
+useEffect(() => {
+    const editor = new Richtext(richtext_container.current, {});
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+
+    return () => {
+        editor.destructor();
+    };
+}, []);
+// ...
+~~~
+
+После этого запустите приложение, чтобы увидеть RichText с загруженными данными на странице.
+
+<div className="img_border">
+![Инициализация RichText](../assets/trial_richtext.png)
+</div>
+
+Теперь вы знаете, как интегрировать DHTMLX RichText с React. Вы можете адаптировать код под свои требования. Финальный расширенный пример находится на [**GitHub**](https://github.com/DHTMLX/react-richtext-demo).
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
new file mode 100644
index 0000000..e9f8182
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
@@ -0,0 +1,263 @@
+---
+sidebar_label: Интеграция с Svelte
+title: Интеграция с Svelte
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать об интеграции с Svelte. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Интеграция с Svelte
+
+:::tip[Совет]
+Перед прочтением этой документации рекомендуем ознакомиться с основными концепциями и паттернами **Svelte**. Для повторения материала обратитесь к [**документации Svelte**](https://svelte.dev/).
+:::
+
+DHTMLX RichText совместим с **Svelte**. Мы подготовили примеры кода использования DHTMLX RichText с **Svelte**. Подробнее см. соответствующий [**пример на GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).
+
+## Создание проекта {#creating-a-project}
+
+:::info[Информация]
+Перед созданием нового проекта установите [**Vite**](https://vite.dev/) (опционально) и [**Node.js**](https://nodejs.org/en/).
+:::
+
+Существует несколько способов создать проект на **Svelte**:
+
+- можно использовать [**SvelteKit**](https://kit.svelte.dev/)
+
+или
+
+- можно использовать **Svelte с Vite** (без SvelteKit):
+
+~~~json
+npm create vite@latest
+~~~
+
+Подробности — в [соответствующей статье](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit).
+
+### Установка зависимостей {#installation-of-dependencies}
+
+Назовём проект **my-svelte-richtext-app** и перейдём в папку приложения:
+
+~~~json
+cd my-svelte-richtext-app
+~~~
+
+Установите зависимости и запустите dev server. Используйте менеджер пакетов:
+
+- если вы используете [**yarn**](https://yarnpkg.com/), выполните следующие команды:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- если вы используете [**npm**](https://www.npmjs.com/), выполните следующие команды:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+Приложение должно запуститься на localhost (например, `http://localhost:3000`).
+
+## Создание RichText {#creating-richtext}
+
+Теперь необходимо получить исходный код DHTMLX RichText. Для этого остановите приложение и установите пакет RichText.
+
+### Шаг 1. Установка пакета {#step-1-package-installation}
+
+Скачайте [**пробный пакет RichText**](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям из файла README. Обратите внимание: пробная версия RichText доступна только 30 дней.
+
+### Шаг 2. Создание компонента {#step-2-component-creation}
+
+Создайте Svelte-компонент для добавления RichText в приложение. Создайте новый файл в директории ***src/*** и назовите его ***Richtext.svelte***.
+
+#### Импорт файлов {#importing-source-files}
+
+Откройте файл ***Richtext.svelte*** и импортируйте файлы RichText. Обратите внимание:
+
+- если вы используете PRO-версию и устанавливаете пакет RichText из локальной папки, пути импорта выглядят следующим образом:
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- если вы используете пробную версию RichText, укажите следующие пути:
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+<script>
+~~~
+
+В этом руководстве показана настройка **пробной** версии RichText.
+
+#### Настройка контейнеров и добавление RichText {#setting-containers-and-adding-richtext}
+
+Чтобы отобразить RichText на странице, создайте контейнер для него и инициализируйте компонент с помощью соответствующего конструктора:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+let richtext_container; // инициализация контейнера для RichText
+let editor;
+
+onMount(() => {
+    // инициализация компонента RichText
+    editor = new Richtext(richtext_container, {});
+});
+
+onDestroy(() => {
+    editor?.destructor(); // уничтожение RichText
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+#### Загрузка данных {#loading-data}
+
+Чтобы добавить данные в RichText, подготовьте набор данных. Создайте файл ***data.js*** в директории ***src/*** и добавьте в него данные:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Затем откройте файл ***App.svelte***, импортируйте данные и передайте их в созданный компонент `<RichText/>` в виде **props**:
+
+~~~html {} title="App.svelte"
+<script>
+import RichText from "./Richtext.svelte";
+import { getData } from "./data.js";
+
+const { value } = getData();
+</script>
+
+<RichText value={value} />
+~~~
+
+Перейдите в файл ***Richtext.svelte*** и примените переданные **props** к объекту конфигурации RichText:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        value
+        // другие свойства конфигурации
+    })
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+Также можно использовать метод [`setValue()`](/api/methods/set-value.md) внутри метода `onMount()` в Svelte для загрузки данных в RichText:
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value;
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        // другие свойства конфигурации
+    })
+
+    editor.setValue(value);
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+Компонент RichText готов к использованию. После добавления элемента на страницу RichText инициализируется с данными. При необходимости можно задать дополнительные параметры конфигурации. Полный список доступных свойств см. в [документации API RichText](api/overview/main_overview.md).
+
+#### Обработка событий {#handling-events}
+
+Когда пользователь выполняет какое-либо действие в RichText, возникает событие. Вы можете использовать события для отслеживания действий и выполнения нужного кода. Полный список событий — в [обзоре событий](api/overview/events_overview.md).
+
+Откройте файл ***Richtext.svelte*** и дополните метод `onMount()` следующим образом:
+
+~~~html {} title="Richtext.svelte"
+<script>
+// ...
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {})
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+});
+
+onDestroy(() => {
+    editor?.destructor();
+});
+</script>
+
+// ...
+~~~
+
+### Шаг 3. Добавление RichText в приложение {#step-3-adding-richtext-into-the-app}
+
+Чтобы добавить компонент в приложение, откройте файл **App.svelte** и замените код по умолчанию следующим:
+
+~~~html title="App.svelte"
+<script>
+    import RichText from "./Richtext.svelte";
+    import { getData } from "./data.js";
+
+    const { value } = getData();
+</script>
+
+<RichText value={value}  />
+~~~
+
+После этого запустите приложение, чтобы увидеть RichText с загруженными данными на странице.
+
+<div className="img_border">
+![Инициализация RichText](../assets/trial_richtext.png)
+</div>
+
+Теперь вы знаете, как интегрировать DHTMLX RichText с Svelte. Вы можете адаптировать код под свои требования. Финальный расширенный пример находится на [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
new file mode 100644
index 0000000..c6f83f7
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
@@ -0,0 +1,279 @@
+---
+sidebar_label: Интеграция с Vue
+title: Интеграция с Vue
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать об интеграции с Vue. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Интеграция с Vue
+
+:::tip[Совет]
+Перед прочтением этой документации рекомендуем ознакомиться с основными концепциями и паттернами [**Vue**](https://vuejs.org/). Для повторения материала обратитесь к [**документации Vue 3**](https://vuejs.org/guide/introduction.html#getting-started).
+:::
+
+DHTMLX RichText совместим с **Vue**. Мы подготовили примеры кода использования DHTMLX RichText с **Vue 3**. Подробнее см. соответствующий [**пример на GitHub**](https://github.com/DHTMLX/vue-richtext-demo).
+
+## Создание проекта {#creating-a-project}
+
+:::info[Информация]
+Перед созданием нового проекта установите [**Node.js**](https://nodejs.org/en/).
+:::
+
+Чтобы создать проект на **Vue**, выполните следующую команду:
+
+~~~json
+npm create vue@latest
+~~~
+
+Эта команда устанавливает и запускает `create-vue` — официальный инструмент scaffolding для **Vue**. Подробности — в [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application).
+
+Назовём проект **my-vue-richtext-app**.
+
+### Установка зависимостей {#installation-of-dependencies}
+
+Перейдите в папку приложения:
+
+~~~json
+cd my-vue-richtext-app
+~~~
+
+Установите зависимости и запустите dev server. Используйте менеджер пакетов:
+
+- если вы используете [**yarn**](https://yarnpkg.com/), выполните следующие команды:
+
+~~~jsx
+yarn
+yarn start // или yarn dev
+~~~
+
+- если вы используете [**npm**](https://www.npmjs.com/), выполните следующие команды:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+Приложение должно запуститься на localhost (например, `http://localhost:3000`).
+
+## Создание RichText {#creating-richtext}
+
+Теперь необходимо получить исходный код DHTMLX RichText. Для этого остановите приложение и установите пакет RichText.
+
+### Шаг 1. Установка пакета {#step-1-package-installation}
+
+Скачайте [**пробный пакет RichText**](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям из файла README. Обратите внимание: пробная версия RichText доступна только 30 дней.
+
+### Шаг 2. Создание компонента {#step-2-component-creation}
+
+Создайте Vue-компонент для добавления RichText в приложение. Создайте новый файл в директории ***src/components/*** и назовите его ***Richtext.vue***.
+
+#### Импорт файлов {#import-source-files}
+
+Откройте файл ***Richtext.vue*** и импортируйте файлы RichText. Обратите внимание:
+
+- если вы используете PRO-версию и устанавливаете пакет RichText из локальной папки, пути импорта выглядят следующим образом:
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- если вы используете пробную версию RichText, укажите следующие пути:
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+</script>
+~~~
+
+В этом руководстве показана настройка **пробной** версии RichText.
+
+#### Настройка контейнеров и добавление Richtext {#setting-containers-and-adding-richtext}
+
+Чтобы отобразить Richtext на странице, создайте контейнер для RichText и инициализируйте компонент с помощью соответствующего конструктора:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    mounted() {
+        // инициализация компонента RichText
+        this.editor = new Richtext(this.$refs.richtext_container, {});
+    },
+
+    unmounted() {
+        this.editor.destructor(); // уничтожение RichText
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+#### Добавление стилей {#adding-styles}
+
+Для корректного отображения RichText укажите необходимые стили для RichText и его контейнера в главном CSS-файле проекта:
+
+~~~css title="main.css"
+/* стили начальной страницы */
+html,
+body,
+#app { /* убедитесь, что используется корневой контейнер #app */
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* стили контейнера RichText */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* стили виджета RichText */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### Загрузка данных {#loading-data}
+
+Чтобы добавить данные в RichText, подготовьте набор данных. Создайте файл ***data.js*** в директории ***src/*** и добавьте в него данные:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+Затем откройте файл ***App.vue***, импортируйте данные и инициализируйте их через внутренний метод `data()`. После этого передайте данные в созданный компонент `<RichText/>` в виде **props**:
+
+~~~html {} title="App.vue"
+<script>
+import RichText from "./components/Richtext.vue";
+import { getData } from "./data";
+
+export default {
+    components: { RichText },
+    data() {
+        const { value } = getData();
+        return { value };
+    }
+};
+</script>
+
+<template>
+    <RichText :value="value" />
+</template>
+~~~
+
+Перейдите в файл ***Richtext.vue*** и примените переданные **props** к объекту конфигурации RichText:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            value: this.value,
+            // другие свойства конфигурации
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+Также можно использовать метод [`setValue()`](api/methods/set-value.md) внутри метода `mounted()` в Vue для загрузки данных в RichText:
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            // другие свойства конфигурации
+        });
+
+        this.editor.setValue(this.value);
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+Компонент RichText готов к использованию. После добавления элемента на страницу RichText инициализируется с данными. При необходимости можно задать дополнительные параметры конфигурации. Полный список доступных свойств см. в [документации API RichText](api/overview/main_overview.md).
+
+#### Обработка событий {#handling-events}
+
+Когда пользователь выполняет какое-либо действие в RichText, возникает событие. Вы можете использовать события для отслеживания действий и выполнения нужного кода. Полный список событий — в [обзоре событий](api/overview/events_overview.md).
+
+Откройте файл ***Richtext.vue*** и дополните метод `mounted()`:
+
+~~~html {} title="Richtext.vue"
+<script>
+// ...
+export default {
+    // ...
+    mounted() {
+        this.editor = new Richtext(this.$refs.cont, {});
+
+        this.editor.api.on("print", () => {
+            console.log("The document is printing");
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+}
+</script>
+
+// ...
+~~~
+
+После этого запустите приложение, чтобы увидеть RichText с загруженными данными на странице.
+
+<div className="img_border">
+![Инициализация RichText](../assets/trial_richtext.png)
+</div>
+
+Теперь вы знаете, как интегрировать DHTMLX RichText с Vue. Вы можете адаптировать код под свои требования. Финальный расширенный пример находится на [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo).
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md
new file mode 100644
index 0000000..1ec64e7
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md
@@ -0,0 +1,474 @@
+---
+sidebar_label: Локализация
+title: Локализация
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о локализации. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Локализация
+
+Все метки интерфейса JavaScript RichText можно локализовать. Для этого создайте новую локаль или измените встроенную и примените её к RichText.
+
+## Локаль по умолчанию {#default-locale}
+
+По умолчанию используется **английская** локаль:
+
+~~~jsx
+const en = {
+    richtext: {
+        // buttons/actions
+        Undo: "Undo",
+        Redo: "Redo",
+        Style: "Style",
+        "Font family": "Font family",
+        "Font size": "Font size",
+        Bold: "Bold",
+        Italic: "Italic",
+        Underline: "Underline",
+        Strikethrough: "Strikethrough",
+        Subscript: "Subscript",
+        Superscript: "Superscript",
+        "Text color": "Text color",
+        "Background color": "Background color",
+        "Left align": "Left align",
+        "Center align": "Center align",
+        "Right align": "Right align",
+        Justify: "Justify",
+        "Line height": "Line height",
+        Outdent: "Outdent",
+        Indent: "Indent",
+        "Insert link": "Insert link",
+        "Insert image": "Insert image",
+        "Insert horizontal line": "Insert horizontal line",
+        "Clear formatting": "Clear formatting",
+        Print: "Print",
+        "Fullscreen mode": "Fullscreen mode",
+        "Layout mode": "Layout mode",
+        "Classic mode": "Classic mode",
+        "Document mode": "Document mode",
+
+        // menubar exclusive options
+        File: "File",
+        Import: "Import",
+        Export: "Export",
+        Edit: "Edit",
+        Cut: "Cut",
+        Copy: "Copy",
+        Paste: "Paste",
+        View: "View",
+        Insert: "Insert",
+        Format: "Format",
+        Help: "Help",
+        New: "New",
+        Link: "Link",
+        Image: "Image",
+        "Horizontal line": "Horizontal line",
+        Text: "Text",
+        "Heading 1": "Heading 1",
+        "Heading 2": "Heading 2",
+        "Heading 3": "Heading 3",
+        "Heading 4": "Heading 4",
+        "Heading 5": "Heading 5",
+        "Heading 6": "Heading 6",
+        Align: "Align",
+        Left: "Left",
+        Center: "Center",
+        Right: "Right",
+        Justified: "Justified",
+        "Keyboard shortcuts": "Keyboard shortcuts",
+
+        // clipboard
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation failed. Please check your browser's clipboard permissions.",
+
+        // block style dropdown
+        Heading: "Heading",
+        Quote: "Quote",
+        Paragraph: "Paragraph",
+        "Text style": "Text style",
+        Lists: "Lists",
+
+        normal: "normal",
+        default: "default",
+
+        // lists
+        "Bulleted list": "Bulleted list",
+        "Numbered list": "Numbered list",
+
+        // links
+        "Enter text to display": "Enter text to display",
+        "Paste link": "Paste link",
+        "Link copied to clipboard": "Link copied to clipboard",
+
+        // shortcut groups
+        "Text formatting": "Text formatting",
+        Editing: "Editing",
+        "Special actions": "Special actions",
+
+        // colors
+        Black: "Black",
+        Gray: "Gray",
+        White: "White",
+        Red: "Red",
+        Orange: "Orange",
+        Yellow: "Yellow",
+        Lime: "Lime",
+        Green: "Green",
+        Teal: "Teal",
+        Cyan: "Cyan",
+        Blue: "Blue",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // shades
+        "Light gray": "Light gray",
+        "Medium gray": "Medium gray",
+        "Dark gray": "Dark gray",
+        "Light red": "Light red",
+        "Medium red": "Medium red",
+        "Dark red": "Dark red",
+        "Light orange": "Light orange",
+        "Medium orange": "Medium orange",
+        "Dark orange": "Dark orange",
+        "Light yellow": "Light yellow",
+        "Medium yellow": "Medium yellow",
+        "Dark yellow": "Dark yellow",
+        "Light lime": "Light lime",
+        "Medium lime": "Medium lime",
+        "Dark lime": "Dark lime",
+        "Light green": "Light green",
+        "Medium green": "Medium green",
+        "Dark green": "Dark green",
+        "Light teal": "Light teal",
+        "Medium teal": "Medium teal",
+        "Dark teal": "Dark teal",
+        "Light cyan": "Light cyan",
+        "Medium cyan": "Medium cyan",
+        "Dark cyan": "Dark cyan",
+        "Light blue": "Light blue",
+        "Medium blue": "Medium blue",
+        "Dark blue": "Dark blue",
+        "Light indigo": "Light indigo",
+        "Medium indigo": "Medium indigo",
+        "Dark indigo": "Dark indigo",
+        "Light magenta": "Light magenta",
+        "Medium magenta": "Medium magenta",
+        "Dark magenta": "Dark magenta"
+    }
+};
+~~~
+
+:::info[Информация]
+Помимо локали ***en*** (*английский*) по умолчанию, RichText также включает встроенные локали ***de*** (*немецкий*) и ***cn*** (*китайский*).
+:::
+
+<details>
+<summary><b>de</b> locale</summary>
+
+~~~jsx
+const de = {
+    richtext: {
+        // buttons/actions
+        Undo: "Rückgängig",
+        Redo: "Wiederholen",
+        Style: "Stil",
+        "Font family": "Schriftart",
+        "Font size": "Schriftgröße",
+        Bold: "Fett",
+        Italic: "Kursiv",
+        Underline: "Unterstrichen",
+        Strikethrough: "Durchgestrichen",
+        Subscript: "Tiefgestellt",
+        Superscript: "Hochgestellt",
+        "Text color": "Textfarbe",
+        "Background color": "Hintergrundfarbe",
+        "Left align": "Linksbündig",
+        "Center align": "Zentriert",
+        "Right align": "Rechtsbündig",
+        Justify: "Blocksatz",
+        "Line height": "Zeilenhöhe",
+        Outdent: "Einzug verringern",
+        Indent: "Einzug erhöhen",
+        "Insert link": "Link einfügen",
+        "Insert image": "Bild einfügen",
+        "Insert horizontal line": "Horizontale Linie einfügen",
+        "Clear formatting": "Formatierung löschen",
+        Print: "Drucken",
+        "Fullscreen mode": "Vollbildmodus",
+        "Layout mode": "Layout-Modus",
+        "Classic mode": "Klassischer Modus",
+        "Document mode": "Dokumentenmodus",
+
+        // menubar exclusive options
+        File: "Datei",
+        Import: "Importieren",
+        Export: "Exportieren",
+        Edit: "Bearbeiten",
+        Cut: "Ausschneiden",
+        Copy: "Kopieren",
+        Paste: "Einfügen",
+        View: "Ansicht",
+        Insert: "Einfügen",
+        Format: "Format",
+        Help: "Hilfe",
+        New: "Neu",
+        Link: "Link",
+        Image: "Bild",
+        "Horizontal line": "Horizontale Linie",
+        Text: "Text",
+        "Heading 1": "Überschrift 1",
+        "Heading 2": "Überschrift 2",
+        "Heading 3": "Überschrift 3",
+        "Heading 4": "Überschrift 4",
+        "Heading 5": "Überschrift 5",
+        "Heading 6": "Überschrift 6",
+        Align: "Ausrichten",
+        Left: "Links",
+        Center: "Zentriert",
+        Right: "Rechts",
+        Justified: "Blocksatz",
+        "Keyboard shortcuts": "Tastenkürzel",
+
+        // clipboard
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.",
+
+        // block style dropdown
+        Heading: "Überschrift",
+        Quote: "Zitat",
+        Paragraph: "Absatz",
+        "Text style": "Textstil",
+        Lists: "Listen",
+
+        normal: "normal",
+        default: "standard",
+
+        // lists
+        "Bulleted list": "Liste mit Aufzählungszeichen",
+        "Numbered list": "Nummerierte Liste",
+
+        // links
+        "Enter text to display": "Text zum Anzeigen eingeben",
+        "Paste link": "Link einfügen",
+        "Link copied to clipboard": "Link in die Zwischenablage kopiert",
+
+        // shortcut groups
+        "Text formatting": "Textformatierung",
+        Editing: "Bearbeitung",
+        "Special actions": "Spezielle Aktionen",
+
+        // colors
+        Black: "Schwarz",
+        Gray: "Grau",
+        White: "Weiß",
+        Red: "Rot",
+        Orange: "Orange",
+        Yellow: "Gelb",
+        Lime: "Limette",
+        Green: "Grün",
+        Teal: "Türkis",
+        Cyan: "Cyan",
+        Blue: "Blau",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // shades
+        "Light gray": "Hellgrau",
+        "Medium gray": "Mittelgrau",
+        "Dark gray": "Dunkelgrau",
+        "Light red": "Hellrot",
+        "Medium red": "Mittelrot",
+        "Dark red": "Dunkelrot",
+        "Light orange": "Hellorange",
+        "Medium orange": "Mittelorange",
+        "Dark orange": "Dunkelorange",
+        "Light yellow": "Hellgelb",
+        "Medium yellow": "Mittleres Gelb",
+        "Dark yellow": "Dunkelgelb",
+        "Light lime": "Hellgrün",
+        "Medium lime": "Mittleres Grün",
+        "Dark lime": "Dunkelgrün",
+        "Light green": "Hellgrün",
+        "Medium green": "Mittleres Grün",
+        "Dark green": "Dunkelgrün",
+        "Light teal": "Hellblau",
+        "Medium teal": "Mittelblau",
+        "Dark teal": "Dunkelblau",
+        "Light cyan": "Hellcyan",
+        "Medium cyan": "Mittleres Cyan",
+        "Dark cyan": "Dunkelcyan",
+        "Light blue": "Hellblau",
+        "Medium blue": "Mittelblau",
+        "Dark blue": "Dunkelblau",
+        "Light indigo": "Hellindigo",
+        "Medium indigo": "Mittelindigo",
+        "Dark indigo": "Dunkelindigo",
+        "Light magenta": "Hellmagenta",
+        "Medium magenta": "Mittleres Magenta",
+        "Dark magenta": "Dunkelmagenta"
+    }
+};
+~~~
+</details>
+
+<details>
+<summary><b>cn</b> locale</summary>
+
+~~~jsx
+const cn = {
+    richtext: {
+        // buttons/actions,
+        Undo: "撤销",
+        Redo: "重做",
+        Style: "样式",
+        "Font family": "字体",
+        "Font size": "字体大小",
+        Bold: "粗体",
+        Italic: "斜体",
+        Underline: "下划线",
+        Strikethrough: "删除线",
+        Subscript: "下标",
+        Superscript: "上标",
+        "Text color": "文本颜色",
+        "Background color": "背景颜色",
+        "Left align": "左对齐",
+        "Center align": "居中对齐",
+        "Right align": "右对齐",
+        Justify: "两端对齐",
+        "Line height": "行高",
+        Outdent: "减少缩进",
+        Indent: "增加缩进",
+        "Insert link": "插入链接",
+        "Insert image": "插入图片",
+        "Insert horizontal line": "插入水平线",
+        "Clear formatting": "清除格式",
+        Print: "打印",
+        "Fullscreen mode": "全屏模式",
+        "Layout mode": "布局模式",
+        "Classic mode": "经典模式",
+        "Document mode": "文档模式",
+
+        // menubar exclusive options
+        File: "文件",
+        Import: "导入",
+        Export: "导出",
+        Edit: "编辑",
+        Cut: "剪切",
+        Copy: "复制",
+        Paste: "粘贴",
+        View: "视图",
+        Insert: "插入",
+        Format: "格式",
+        Help: "帮助",
+        New: "新建",
+        Link: "链接",
+        Image: "图片",
+        "Horizontal line": "水平线",
+        Text: "文本",
+        "Heading 1": "标题 1",
+        "Heading 2": "标题 2",
+        "Heading 3": "标题 3",
+        "Heading 4": "标题 4",
+        "Heading 5": "标题 5",
+        "Heading 6": "标题 6",
+        Align: "对齐",
+        Left: "左",
+        Center: "居中",
+        Right: "右",
+        Justified: "两端对齐",
+        "Keyboard shortcuts": "键盘快捷键",
+
+        // clipboard
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "操作失败。请检查浏览器的剪贴板权限。",
+
+        // block style dropdown
+        Heading: "标题",
+        Quote: "引用",
+        Paragraph: "段落",
+        "Text style": "文本样式",
+        Lists: "列表",
+
+        normal: "普通的",
+        default: "默认",
+
+        // lists
+        "Bulleted list": "项目符号列表",
+        "Numbered list": "编号列表",
+
+        // links
+        "Enter text to display": "输入要显示的文本",
+        "Paste link": "粘贴链接",
+        "Link copied to clipboard": "链接已复制到剪贴板",
+
+        // shortcut groups
+        "Text formatting": "文本格式化",
+        Editing: "编辑",
+        "Special actions": "特殊操作",
+
+        // colors
+        Black: "黑色",
+        Gray: "灰色",
+        White: "白色",
+        Red: "红色",
+        Orange: "橙色",
+        Yellow: "黄色",
+        Lime: "酸橙色",
+        Green: "绿色",
+        Teal: "水鸭色",
+        Cyan: "青色",
+        Blue: "蓝色",
+        Indigo: "靛蓝色",
+        Magenta: "洋红色",
+
+        // shades
+        "Light gray": "浅灰色",
+        "Medium gray": "中灰色",
+        "Dark gray": "深灰色",
+        "Light red": "浅红色",
+        "Medium red": "中红色",
+        "Dark red": "深红色",
+        "Light orange": "浅橙色",
+        "Medium orange": "中橙色",
+        "Dark orange": "深橙色",
+        "Light yellow": "浅黄色",
+        "Medium yellow": "中黄色",
+        "Dark yellow": "深黄色",
+        "Light lime": "浅酸橙色",
+        "Medium lime": "中酸橙色",
+        "Dark lime": "深酸橙色",
+        "Light green": "浅绿色",
+        "Medium green": "中绿色",
+        "Dark green": "深绿色",
+        "Light teal": "浅水鸭色",
+        "Medium teal": "中水鸭色",
+        "Dark teal": "深水鸭色",
+        "Light cyan": "浅青色",
+        "Medium cyan": "中青色",
+        "Dark cyan": "深青色",
+        "Light blue": "浅蓝色",
+        "Medium blue": "中蓝色",
+        "Dark blue": "深蓝色",
+        "Light indigo": "浅靛蓝色",
+        "Medium indigo": "中靛蓝色",
+        "Dark indigo": "深靛蓝色",
+        "Light magenta": "浅洋红色",
+        "Medium magenta": "中洋红色",
+        "Dark magenta": "深洋红色"
+    }
+};
+~~~
+</details>
+
+## Пользовательская локаль {#custom-locale}
+
+Чтобы применить пользовательскую локаль, необходимо:
+
+- создать пользовательскую локаль (или изменить существующую) и добавить переводы для всех текстовых меток (можно использовать любой язык)
+
+- применить новую локаль к **RichText** через свойство [`locale`](api/config/locale.md) или с помощью метода [`setLocale()`](api/methods/set-locale.md)
+
+## Пример {#example}
+
+В этом примере показано переключение между несколькими локалями:
+
+<iframe src="https://snippet.dhtmlx.com/zxjrin3i?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/stylization.md
new file mode 100644
index 0000000..44d3f0d
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/stylization.md
@@ -0,0 +1,89 @@
+---
+title: Стилизация
+sidebar_label: Стилизация
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о стилизации. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Стилизация
+
+Вы можете полностью настроить внешний вид DHTMLX RichText, переопределив CSS-переменные и применив собственные стили к отдельным частям виджета.
+
+В этом руководстве показано, как применить **тёмную тему** и использовать доступные имена классов для стилизации menubar, toolbar, всплывающих окон и области контента редактора.
+
+## Стандартная структура и имена классов {#default-structure-and-class-names}
+
+RichText использует следующие основные классы для построения интерфейса:
+
+| Имя класса             | Описание                                    |
+|------------------------|---------------------------------------------|
+| `.wx-richtext`         | Корневой контейнер виджета RichText         |
+| `.wx-richtext-menubar` | Контейнер для menubar                       |
+| `.wx-richtext-menu`    | Контейнер для выпадающего меню menubar      |
+| `.wx-richtext-toolbar` | Контейнер для toolbar                       |
+| `.wx-editor-area`      | Контейнер основной редактируемой области    |
+
+Вы можете использовать эти классы в пользовательских CSS-селекторах для переопределения внешнего вида редактора RichText.
+
+## Переопределение стилей по умолчанию {#overriding-default-styles}
+
+Вы можете переопределить стили RichText по умолчанию, переопределив CSS-переменные на контейнере `#root` или отдельных дочерних элементах:
+
+```html
+<div id="root" style="width: 100%; height: 100%;"></div>
+
+<style>
+  #root,
+  .wx-richtext-menu {
+    --wx-background: #404151;
+    --wx-background-alt: #212329;
+    --wx-color-primary: #14B195;
+    --wx-color-font: #FFFFFF;
+    --wx-border: 1px solid #6B6C79;
+    --wx-color-secondary-hover: rgba(20, 177, 149, 0.12);
+    --wx-button-active: rgba(20, 177, 149, 0.22);
+    --wx-icon-color: var(--wx-color-font);
+    --wx-color-font-alt: #9FA1AE;
+    --wx-color-font-disabled: #9FA1AE;
+    --wx-popup-border: var(--wx-border);
+
+    color-scheme: dark;
+  }
+
+  .wx-richtext-menu {
+    border: var(--wx-border);
+  }
+</style>
+```
+
+:::note[Примечание]
+Эти стили применяют тёмный фон, регулируют цвета кнопок и иконок и улучшают видимость для тёмных тем интерфейса.
+:::
+
+## Список поддерживаемых CSS-переменных {#list-of-supported-css-variables}
+
+| Имя переменной               | Описание                                                        |
+| ---------------------------- | --------------------------------------------------------------- |
+| `--wx-background`            | Цвет фона редактора и всплывающих окон                          |
+| `--wx-background-alt`        | Альтернативный цвет фона для menubar                            |
+| `--wx-color-primary`         | Акцентный цвет для ссылок, цитат и границ при изменении размера изображений |
+| `--wx-color-font`            | Основной цвет шрифта (для редактора, menubar и toolbar)         |
+| `--wx-color-font-alt`        | Альтернативный цвет шрифта                                      |
+| `--wx-color-font-disabled`   | Цвет отключённого текста (для элементов menubar и toolbar)      |
+| `--wx-border`                | Стиль границы, применяемый по всему редактору                   |
+| `--wx-color-secondary-hover` | Фон состояния наведения для кнопок menubar и toolbar            |
+| `--wx-button-active`         | Фон активного состояния для кнопок menubar и toolbar            |
+| `--wx-icon-color`            | Цвет стрелочных иконок toolbar для выпадающих элементов         |
+| `--wx-popup-border`          | Граница для всплывающих элементов                               |
+
+## Рекомендации {#best-practices}
+
+* Используйте `color-scheme: dark` для улучшения стилизации нативных элементов ввода в тёмном режиме
+* Не изменяйте свойства, связанные с макетом (например, `display`, `position`), без необходимости
+
+## Живое демо {#live-demo}
+
+В этом примере показано, как применить пользовательский стиль к RichText:
+
+<iframe src="https://snippet.dhtmlx.com/q8j4qqq9?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+
+**Связанные статьи:** [Customization](guides/configuration.md)
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/typescript_support.md
new file mode 100644
index 0000000..9fc8354
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/typescript_support.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: Поддержка TypeScript
+title: Поддержка TypeScript
+description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать об использовании TypeScript. Изучайте руководства разработчика и справочник API, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Поддержка TypeScript
+
+Начиная с версии 2.0, библиотека DHTMLX RichText поддерживает TypeScript-определения. Встроенная поддержка TypeScript работает из коробки.
+
+:::note[Примечание]
+Вы можете попробовать эту возможность прямо в нашем <a href="https://snippet.dhtmlx.com/ziynafp7?tag=richtext" target="_blank">Snippet Tool</a>.
+:::
+
+## Преимущества использования TypeScript {#advantages-of-using-typescript}
+
+Зачем использовать DHTMLX RichText с TypeScript?
+
+Главное преимущество TypeScript — возможность значительно повысить эффективность процесса разработки.
+
+Разработка приложений становится надёжнее: проверка типов совместно с автодополнением помогает избежать потенциальных ошибок. Кроме того, TypeScript предоставляет информацию о типах данных, которые необходимо использовать при работе с API библиотеки DHTMLX RichText.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md
new file mode 100644
index 0000000..080e520
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md
@@ -0,0 +1,109 @@
+---
+sidebar_label: Начало работы
+title: Начало работы
+description: В документации библиотеки DHTMLX JavaScript RichText вы найдёте руководство по началу работы с DHTMLX RichText. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Начало работы
+
+Это понятное и подробное руководство проведёт вас через все шаги, необходимые для размещения полнофункционального RichText на странице.
+
+<div className="img_border">
+![DHTMLX RichText в классическом режиме](./assets/richtext/classic_mode.png)
+</div>
+
+## Шаг 1. Подключение файлов {#step-1-including-source-files}
+
+Начните с создания HTML-файла с именем *index.html*, затем подключите в него исходные файлы RichText.
+
+Необходимы два файла:
+
+- JS-файл RichText
+- CSS-файл RichText
+
+~~~html {5-6} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <script>
+        // your code will be here
+        </script>
+    </body>
+</html>
+~~~
+
+### Установка RichText через npm или yarn {#installing-richtext-via-npm-or-yarn}
+
+Вы можете импортировать JavaScript RichText в свой проект с помощью менеджера пакетов **yarn** или **npm**.
+
+#### Установка ознакомительной версии RichText через npm или yarn {#installing-trial-richtext-via-npm-or-yarn}
+
+:::info[Информация]
+Если вы хотите использовать ознакомительную версию RichText, скачайте [**пакет ознакомительной версии RichText**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) и следуйте инструкциям из файла *README*. Обратите внимание, что ознакомительная версия RichText доступна только 30 дней.
+:::
+
+#### Установка PRO-версии RichText через npm или yarn {#installing-pro-richtext-via-npm-or-yarn}
+
+:::info[Информация]
+Вы можете получить доступ к приватному **npm** DHTMLX непосредственно в [Личном кабинете](https://dhtmlx.com/clients/), сгенерировав логин и пароль для **npm**. Там же доступна подробная инструкция по установке. Обратите внимание, что доступ к приватному **npm** предоставляется только при наличии действующей лицензии на RichText.
+:::
+
+## Шаг 2. Создание RichText {#step-2-creating-richtext}
+
+Теперь можно добавить RichText на страницу. Сначала создайте контейнер `<div>` для RichText, выполнив следующие шаги:
+
+- укажите DIV-контейнер в файле *index.html*
+- инициализируйте RichText с помощью конструктора `richtext.Richtext`
+
+Конструктор принимает в качестве параметров любой валидный CSS-селектор HTML-контейнера, в который будет помещён RichText, а также соответствующие объекты конфигурации.
+
+~~~html {9,12-14} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <div id="root"></div>
+
+        <script>
+            const editor = new richtext.Richtext("#root", {
+                // configuration properties
+            });
+        </script>
+    </body>
+</html>
+~~~
+
+## Шаг 3. Настройка RichText {#step-3-configuring-richtext}
+
+Далее можно задать свойства конфигурации, которые компонент RichText должен иметь при инициализации.
+
+Чтобы начать работу с RichText, сначала необходимо передать начальные данные для редактора через свойство [`value`](api/config/value.md). Помимо этого, вы можете включить [**menubar**](api/config/menubar.md), настроить [**toolbar**](api/config/toolbar.md), задать режимы [**fullscreen**](api/config/fullscreen-mode.md) и [**layout**](api/config/layout-mode.md), применить новую [**локаль**](api/config/locale.md), а также [**стили по умолчанию**](api/config/default-styles.md).
+
+~~~jsx {2-12}
+const editor = new richtext.Richtext("#root", {
+    menubar: true,
+    toolbar: false,
+    fullscreenMode: true,
+    layoutMode: "document",
+    locale: richtext.locales.cn
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        // other settings
+    }
+});
+~~~
+
+## Что дальше {#whats-next}
+
+Вот и всё. Всего три простых шага — и у вас есть удобный инструмент для редактирования содержимого. Теперь вы можете приступить к работе с контентом или продолжить изучение возможностей JavaScript RichText.
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/index.md
new file mode 100644
index 0000000..9a3b612
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/index.md
@@ -0,0 +1,126 @@
+---
+sidebar_label: Обзор RichText
+title: Обзор RichText
+slug: /
+description: В документации вы найдёте обзор библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Обзор RichText
+
+**DHTMLX RichText** — гибкий и легковесный WYSIWYG-редактор, созданный на JavaScript. Разработанный для обеспечения удобного редактирования в современных веб-приложениях, RichText предлагает чистый интерфейс, широкие возможности форматирования и полный контроль над отображением содержимого. Будь то CMS, внутренний инструмент администрирования или встроенный редактор документов — RichText легко интегрируется и настраивается под ваши нужды.
+
+Компонент **DHTMLX RichText** включает следующие возможности:
+
+- Два [**режима отображения**](api/config/layout-mode.md)
+
+- Сериализация содержимого в обычный текст и HTML
+
+- Настраиваемый [**toolbar**](api/config/toolbar.md) со встроенными и пользовательскими кнопками
+
+- Статический [**menubar**](api/config/menubar.md), который можно показать или скрыть
+
+- Загрузка изображений, расширенное форматирование, пользовательские стили и полноэкранный режим
+
+- [Полный доступ к API](api/overview/main_overview.md) для [обработки событий](api/overview/event_bus_methods_overview.md), [работы с содержимым](api/overview/methods_overview.md) и [реактивного управления состоянием](api/overview/state_methods_overview.md)
+
+RichText не зависит от фреймворка и легко интегрируется с [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md) и [Svelte](guides/integration_with_svelte.md), что делает его подходящим для широкого круга фронтенд-экосистем.
+
+Данная документация содержит подробные инструкции по установке, настройке, использованию и кастомизации. Вы найдёте примеры для распространённых сценариев, [полный справочник API](api/overview/main_overview.md) и лучшие практики встраивания RichText в ваше приложение.
+
+## Структура RichText {#richtext-structure}
+
+### Menubar {#menubar}
+
+Menubar RichText предоставляет доступ к действиям редактирования: создание нового документа, печать, импорт/экспорт содержимого и другие операции. По умолчанию он скрыт.
+
+Используйте свойство [`menubar`](api/config/menubar.md) для переключения его видимости. Menubar можно включить или отключить, однако его содержимое в настоящее время не настраивается.
+
+<div className="img_border">
+![Menubar](./assets/richtext/menubar.png)
+</div>
+
+### Toolbar {#toolbar}
+
+Toolbar RichText предоставляет быстрый доступ к форматированию текста и структурному редактированию. По умолчанию [toolbar](api/config/toolbar.md#default-config) включён и отображает предопределённый набор часто используемых элементов управления: жирный шрифт, курсив, настройки шрифта, форматирование списков и другие.
+
+Свойство [`toolbar`](api/config/toolbar.md) позволяет полностью настроить содержимое и расположение элементов toolbar. Вы можете включать или отключать toolbar, переставлять элементы управления по умолчанию или задать полностью пользовательский toolbar с помощью массива идентификаторов встроенных кнопок и объектов пользовательских кнопок.
+
+<div className="img_border">
+![Toolbar](./assets/richtext/toolbar.png)
+</div>
+
+### Редактор {#editor}
+
+Редактор RichText — это центральная область, где пользователи создают и форматируют содержимое. Вы можете управлять внешним видом и поведением редактора с помощью параметров конфигурации: [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md) и [`defaultStyles`](api/config/default-styles.md). RichText также поддерживает пользовательские стили, вставку изображений и адаптивные настройки макета в соответствии с потребностями вашего приложения.
+
+#### Два режима работы {#two-working-modes}
+
+DHTMLX RichText может работать с содержимым в режимах "classic" и "document". Вы можете выбрать наиболее удобный режим для редактирования текста. Используйте свойство [`layoutMode`](api/config/layout-mode.md) для программного переключения между режимами.
+
+- **"classic"**
+
+<div className="img_border">
+![Классический режим](./assets/richtext/classic_mode.png)
+</div>
+
+- **"document"**
+
+<div className="img_border">
+![Документный режим](./assets/richtext/document_mode.png)
+</div>
+
+## Поддерживаемые форматы {#supported-formats}
+
+Редактор RichText поддерживает [разбор](api/methods/set-value.md) и [сериализацию](api/methods/get-value.md) содержимого в форматах **HTML** и обычного текста.
+
+#### Формат HTML {#html-format}
+
+<div className="img_border">
+![Формат HTML](./assets/richtext/html_format.png)
+</div>
+
+#### Текстовый формат {#text-format}
+
+<div className="img_border">
+![Текстовый формат](./assets/richtext/text_format.png)
+</div>
+
+## Сочетания клавиш {#keyboard-shortcuts}
+
+Редактор RichText поддерживает набор стандартных сочетаний клавиш для быстрого форматирования и редактирования. Сочетания соответствуют платформенным соглашениям и доступны как на **Windows/Linux** (`Ctrl`), так и на **macOS** (`⌘`).
+
+### Форматирование текста {#text-formatting}
+
+| Действие        | Windows/Linux   | macOS         |
+|-----------------|-----------------|---------------|
+| Жирный*         | `Ctrl+B`        | `⌘B`          |
+| Курсив          | `Ctrl+I`        | `⌘I`          |
+| Подчёркивание   | `Ctrl+U`        | `⌘U`          |
+| Зачёркивание    | `Ctrl+Shift+X`  | `⌘⇧X`         |
+
+### Редактирование {#editing}
+
+| Действие  | Windows/Linux            | macOS         |
+|-----------|--------------------------|---------------|
+| Отменить  | `Ctrl+Z`                 | `⌘Z`          |
+| Повторить | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z`  |
+| Вырезать  | `Ctrl+X`                 | `⌘X`          |
+| Копировать| `Ctrl+C`                 | `⌘C`          |
+| Вставить  | `Ctrl+V`                 | `⌘V`          |
+
+### Специальные действия {#special-actions}
+
+| Действие        | Windows/Linux | macOS |
+|-----------------|---------------|-------|
+| Вставить ссылку | `Ctrl+K`      | `⌘K`  |
+| Печать          | `Ctrl+P`      | `⌘P`  |
+
+:::info[Информация]
+В будущих обновлениях могут быть добавлены новые сочетания клавиш.
+:::
+
+Чтобы получить актуальный справочник по сочетаниям клавиш RichText, нажмите **Help** и выберите пункт **Keyboard shortcuts**:
+
+<div className="img_border">
+![Сочетания клавиш](./assets/richtext/shortcut_reference.png)
+</div>
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/ru/docusaurus-plugin-content-docs/current/news/migration.md
new file mode 100644
index 0000000..794bc2a
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/news/migration.md
@@ -0,0 +1,167 @@
+---
+sidebar_label: Руководство по миграции
+title: Руководство по миграции
+description: В документации библиотеки DHTMLX JavaScript RichText вы найдёте руководство по миграции на новые версии. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+# Руководство по миграции
+
+## 1.2 -> 2.0 {#12---20}
+
+### Миграция свойств {#properties-migration}
+
+| Устаревшее свойство | Заменено на               | Примечания                                                      |
+| ------------------- | ------------------------- | --------------------------------------------------------------- |
+| `customStats`       | *(Удалено)*               | Недоступно в новой версии 2.0                                   |
+| `toolbarBlocks`     | `toolbar`                 | Теперь поддерживает детальную структуру toolbar                 |
+| `defaultStyles`     | `defaultStyles` (обновлено) | Структура теперь задаётся для каждого блока и основана на CSS  |
+| `mode`              | `layoutMode`              | Заменено более строгой настройкой на основе перечисления        |
+
+### - `customStats` {#--customstats}
+
+Свойство `customStats` удалено. Текущая версия RichText больше не поддерживает отображение пользовательской статистики (например, количества символов, слов, предложений).
+
+Если вам по-прежнему нужно вычислять текстовые метрики, это можно сделать externally, обратившись к содержимому редактора и обработав его вручную:
+
+```jsx
+const content = editor.getValue();
+const wordCount = content.split(/\s+/).length;
+```
+
+### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) {#--toolbarblocks--toolbar}
+
+До версии **2.0** пользователи могли указывать только блоки с элементами управления:
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+  toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"]
+});
+```
+
+Начиная с версии **2.0** пользователи могут указывать отдельные элементы управления:
+```jsx{2-4} title="From 2.0"
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo", "style", "bold", "italic", "underline", "text-color",
+        "align", "link"
+    ]
+});
+```
+
+### - [`defaultStyles`](api/config/default-styles.md) {#--defaultstyles}
+
+До версии **2.0** пользователи могли задавать значения по умолчанию для элементов управления выбором в toolbar:
+```jsx title="Before 2.0"
+defaultStyles: {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+}
+```
+
+Начиная с версии **2.0** пользователи могут указывать значения стилей по умолчанию для конкретных типов блоков:
+```jsx title="From 2.0"
+defaultStyles: {
+  "*": {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+  },
+  h1: {
+    "font-size": "32px",
+    "color": "#333"
+  }
+}
+```
+
+:::note[Примечание]
+Используйте `*` для определения базовых значений по умолчанию для всех блоков, а затем переопределяйте конкретные элементы (p, h1, blockquote и т.д.).
+:::
+
+### - `mode` → [`layoutMode`](api/config/layout-mode.md) {#--mode--layoutmode}
+
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+    mode: "document"
+});
+```
+
+```jsx{2} title="From 2.0"
+new Richtext("#root", {
+    layoutMode: "document" // or "classic"
+});
+```
+
+Новое свойство [`layoutMode`](api/config/layout-mode.md) строго поддерживает значения `"classic"` и `"document"`.
+
+### Миграция методов {#methods-migration}
+
+| Устаревший метод        | Новый эквивалент                     | Примечания                                                                    |
+| ----------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| `getValue(mode)`        | `getValue(encoder)`                  | Кодировщики заменяют строковые режимы; для кодировщиков требуется отдельный импорт |
+| `setValue(value, mode)` | `setValue(value, encoder)`           | Кодировщики заменяют строковые режимы; для кодировщиков требуется отдельный импорт |
+| `getStats()`            | *Удалён*                             | Замены нет; требуется реализация собственной логики                           |
+| `getEditorAPI()`        | *Удалён*                             | Внутренний метод; используйте публичный API                                   |
+| `fire()`                | *Удалён*                             | Заменён методами `exec()` и `intercept()`                                     |
+| `on()`, `detach()`      | Сохранены (`api.on`, `api.detach`)   | Теперь доступны через `richtext.api`                                          |
+| `fullScreen()`          | *Удалён*                             | Используйте свойство конфигурации `fullscreenMode`                            |
+| `exitFullScreen()`      | *Удалён*                             | Используйте свойство конфигурации `fullscreenMode`                            |
+| `paint()`               | *Удалён*                             | Больше не требуется                                                           |
+| `destructor()`          | Сохранён                             | Без изменений                                                                 |
+| `setConfig()`           | Новый                                | Позволяет обновлять конфигурацию на лету                                      |
+| `setLocale()`           | Новый                                | Позволяет динамически менять локаль                                           |
+| `getReactiveState()`    | Новый                                | Обеспечивает реактивное отслеживание состояния                                |
+| `getState()`            | Новый                                | Предоставляет текущее статическое состояние конфигурации                      |
+| `intercept()`           | Новый                                | Перехватывает внутренние действия                                             |
+| `exec()`                | Новый                                | Выполняет внутренние действия                                                 |
+
+### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) {#--setvalue--getvalue}
+
+```jsx title="Before 2.0"
+...
+editor.setValue("<p>Hello</p>", "html");
+editor.getValue("text");
+```
+
+```jsx title="From 2.0"
+const fromTextEncoder = richtext.text.fromText;
+const fromHTMLEncoder = richtext.html.fromHTML;
+
+const toTextEncoder = richtext.text.toText;
+const toHTMLEncoder = richtext.html.toHTML;
+...
+editor.setValue("<p>Hello</p>", fromHTMLEncoder);
+editor.getValue(toTextEncoder);
+```
+
+:::note[Примечание]
+Вы по-прежнему можете вызывать `getValue()` и `setValue()` без кодировщика — по умолчанию используется HTML.
+:::
+
+### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) {#--on--detach}
+
+```jsx title="Before 2.0"
+editor.events.on("Change", function(action, canUndo, canRedo){
+  // your code here
+});
+
+editor.events.detach("Change");
+```
+
+```jsx title="From 2.0"
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+```
+
+### - `fire()` → Использование [`exec()`](api/internal/exec.md) и [`intercept()`](api/internal/intercept.md) {#--fire--use-exec-and-intercept}
+
+```jsx title="Before 2.0"
+editor.events.fire("some-event", [data]);
+```
+
+```jsx title="From 2.0"
+editor.api.exec("some-event", obj);
+
+// Preventing execution
+editor.api.intercept("some-event", (obj) => false);
+```
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/ru/docusaurus-plugin-content-docs/current/news/whats_new.md
new file mode 100644
index 0000000..a8c3049
--- /dev/null
+++ b/i18n/ru/docusaurus-plugin-content-docs/current/news/whats_new.md
@@ -0,0 +1,192 @@
+---
+sidebar_label: Что нового
+title: Что нового
+description: В документации библиотеки DHTMLX JavaScript UI вы можете ознакомиться с новыми возможностями DHTMLX RichText и историей релизов. Изучайте руководства разработчика и справочник API, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText.
+---
+
+## Версия 2.0.5 {#version-205}
+
+Выпущена 6 марта 2026 г.
+
+### Исправления {#fixes}
+
+- Некорректная обработка ввода IME
+- Некорректная обработка ввода на основе композиции (например, китайский, японский, корейский на десктопе)
+- Свойства `margin-left` и `line-height` игнорируются при разборе HTML
+- Инлайн-элементы наследуют свойства блочных родительских элементов
+- Невозможно скопировать текст между двумя экземплярами редактора
+- Некорректная обработка выделения при наличии двух или более активных экземпляров редактора
+- Неправильное позиционирование курсора, когда единственным содержимым абзаца является изображение
+- Бесконечное оборачивание элементов subscript и superscript
+- При вставке изображений они вставляются как инлайн вместо предварительной загрузки
+- Пустые инлайн-блоки не удаляются в определённых позициях (первая или последняя строка)
+- Редактор не прокручивается к курсору при вводе текста
+- Некорректная обработка ввода на Android
+- Некорректная обработка выделения для элементов HR
+- Некорректное отображение при пустых начальных значениях
+- Копирование содержимого может завершаться ошибкой, если оно содержит самозакрывающиеся блоки
+- Chrome: невозможно вставить эмодзи из контекстного меню
+- Firefox: выделить всё (CTRL+A) обрабатывается некорректно
+
+## Версия 2.0.4 {#version-204}
+
+Выпущена 15 октября 2025 г.
+
+### Исправления {#fixes-1}
+
+- Некорректное выделение диапазона для абзацев
+- Всплывающие окна ссылок не отображаются рядом со связанными изображениями
+- Начальные значения toolbar неточно отражают фактическое содержимое
+
+## Версия 2.0.3 {#version-203}
+
+Выпущена 27 августа 2025 г.
+
+### Исправления {#fixes-2}
+
+- Клик по горизонтальной линии вызывает ошибку скрипта
+- Неверная высота строки по умолчанию
+- Стили содержимого содержат дублирующиеся селекторы
+- Блоки обычного текста игнорируют изменения стилей при разборе HTML
+- Парсер игнорирует экранированные имена шрифтов в HTML
+- Парсер игнорирует свойства `margin-left` и `line-height` в HTML
+
+## Версия 2.0.2 {#version-202}
+
+Выпущена 4 августа 2025 г.
+
+### Исправления {#fixes-3}
+
+- Обновлено содержимое пакета
+
+## Версия 2.0.1 {#version-201}
+
+Выпущена 30 июля 2025 г.
+
+### Исправления {#fixes-4}
+
+- Обновлены определения типов для свойства `defaultStyles`
+
+## Версия 2.0 {#version-20}
+
+Выпущена 30 июля 2025 г.
+
+:::note[Примечание]
+API версии v1.2 несовместим с v2.0. Дополнительные сведения см. в [**руководстве по миграции**](news/migration.md).
+:::
+
+### Новая функциональность {#new-functionality}
+
+- **Новое поколение отображения текста**
+  Более плавное, быстрое и точное отображение текста благодаря новому движку
+
+- **Детальная настройка toolbar**
+  Полный контроль над toolbar:
+  - Задавайте [отдельные элементы управления toolbar](guides/configuration.md/#default-toolbar-controls) и их порядок
+  - Добавляйте [пользовательские элементы управления](guides/configuration.md/#custom-toolbar-controls)
+
+- **Необязательный [menubar](api/config/menubar.md)**
+  Включите классический интерфейс меню в верхней части редактора
+
+- **Улучшенный [документный режим](guides/configuration.md/#layout-modes)**
+  Добавлена поддержка различных размеров документа
+
+- **Поддержка изображений**
+  - Вставка изображений с [возможностью загрузки](api/config/image-upload-url.md)
+  - Интерактивное [изменение размера изображений](api/events/resize-image.md)
+
+- **Улучшенная работа со ссылками**
+  Переработанные [всплывающие взаимодействия](api/events/show-popup.md) для повышения удобства использования
+
+- **Новые инструменты форматирования**
+  - Выравнивание текста: **по ширине**
+  - Вставка [горизонтальных линий](api/events/insert-line.md)
+  - [Увеличение](api/events/indent.md) / [уменьшение](api/events/outdent.md) отступа
+  - Установка [межстрочного интервала](api/events/set-line-height.md)
+  - Применение [подстрочного](api/events/subscript.md) / [надстрочного](api/events/superscript.md) начертания
+
+- **Управление списками**
+  Удобная [вставка и управление списками](api/events/insert-list.md) в содержимом
+
+- **Импорт/экспорт и печать**
+  - [Импорт файлов DOCX](api/events/import.md)
+  - [Экспорт](api/events/export.md) содержимого в DOCX или PDF
+  - [Печать](api/events/print.md) документов непосредственно из редактора
+
+- **Сочетания клавиш**
+  Расширенная поддержка стандартных сочетаний клавиш для форматирования и редактирования
+
+### Новый API {#new-api}
+
+#### Новые свойства {#new-properties}
+
+- [`fullscreenMode`](api/config/fullscreen-mode.md)
+- [`imageUploadUrl`](api/config/image-upload-url.md)
+- [`layoutMode`](api/config/layout-mode.md)
+- [`locale`](api/config/locale.md)
+- [`menubar`](api/config/menubar.md)
+- [`toolbar`](api/config/toolbar.md)
+- [`value`](api/config/value.md)
+
+#### Новые методы {#new-methods}
+
+- [`setConfig()`](api/methods/set-config.md) — Динамическое обновление конфигурации
+- [`setLocale()`](api/methods/set-locale.md) — Смена локали на лету
+
+#### Новые внутренние методы {#new-internal-methods}
+
+- [`api.exec()`](api/internal/exec.md)
+- [`api.intercept()`](api/internal/intercept.md)
+- [`api.getReactiveState()`](api/internal/get-reactive-state.md)
+- [`api.getState()`](api/internal/get-state.md)
+
+#### Новые события {#new-events}
+
+Полный список новых событий доступен [здесь](api/overview/events_overview.md)
+
+### Обновлённый API {#updated-api}
+
+#### Обновлённые свойства {#updated-properties}
+
+- [`defaultStyles`](api/config/default-styles.md)
+
+#### Обновлённые методы {#updated-methods}
+
+- [`setValue()`](api/methods/set-value.md)
+- [`getValue()`](api/methods/get-value.md)
+
+#### Обновлённые внутренние методы {#updated-internal-methods}
+
+- [`api.detach()`](api/internal/detach.md)
+- [`api.on()`](api/internal/on.md)
+
+## Удалённый API {#removed-api}
+
+:::warning[Предупреждение]
+Не используйте удалённый API в своих проектах! <br/> Обратитесь к разделу [Миграция](news/migration.md) для получения дополнительной информации.
+:::
+
+### [Удалённые свойства](news/migration.md#properties-migration) {#removed-properties}
+
+- [`customStats`](news/migration.md#--customstats)
+- [`mode`](news/migration.md#--mode--layoutmode)
+- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar)
+
+### [Удалённые методы](news/migration.md#methods-migration) {#removed-methods}
+
+- `exitFullScreen()`
+- `fullScreen()`
+- `getEditorAPI()`
+- `getStats()`
+- `paint()`
+
+### Удалённые внутренние методы {#removed-internal-methods}
+
+- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept)
+
+### Удалённые события {#removed-events}
+
+- `Action`
+- `Change`
+- `selectionChange`
+- `selectionRefresh`
diff --git a/i18n/ru/docusaurus-theme-classic/footer.json b/i18n/ru/docusaurus-theme-classic/footer.json
new file mode 100644
index 0000000..cb5c883
--- /dev/null
+++ b/i18n/ru/docusaurus-theme-classic/footer.json
@@ -0,0 +1,62 @@
+{
+  "link.title.Development center": {
+    "message": "Development center",
+    "description": "The title of the footer links column with title=Development center in the footer"
+  },
+  "link.title.Community": {
+    "message": "Community",
+    "description": "The title of the footer links column with title=Community in the footer"
+  },
+  "link.title.Company": {
+    "message": "Company",
+    "description": "The title of the footer links column with title=Company in the footer"
+  },
+  "link.item.label.Download RichText": {
+    "message": "Download RichText",
+    "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml"
+  },
+  "link.item.label.Examples": {
+    "message": "Examples",
+    "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext"
+  },
+  "link.item.label.Blog": {
+    "message": "Blog",
+    "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/"
+  },
+  "link.item.label.Forum": {
+    "message": "Forum",
+    "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/"
+  },
+  "link.item.label.GitHub": {
+    "message": "GitHub",
+    "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX"
+  },
+  "link.item.label.Youtube": {
+    "message": "Youtube",
+    "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx"
+  },
+  "link.item.label.Facebook": {
+    "message": "Facebook",
+    "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx"
+  },
+  "link.item.label.Twitter": {
+    "message": "Twitter",
+    "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx"
+  },
+  "link.item.label.Linkedin": {
+    "message": "Linkedin",
+    "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/"
+  },
+  "link.item.label.About us": {
+    "message": "About us",
+    "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml"
+  },
+  "link.item.label.Contact us": {
+    "message": "Contact us",
+    "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml"
+  },
+  "link.item.label.Licensing": {
+    "message": "Licensing",
+    "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses"
+  }
+}
diff --git a/i18n/ru/docusaurus-theme-classic/navbar.json b/i18n/ru/docusaurus-theme-classic/navbar.json
new file mode 100644
index 0000000..cdc91aa
--- /dev/null
+++ b/i18n/ru/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,26 @@
+{
+  "title": {
+    "message": "JavaScript RichText Documentation",
+    "description": "The title in the navbar"
+  },
+  "logo.alt": {
+    "message": "DHTMLX RichText Documentation",
+    "description": "The alt text of navbar logo"
+  },
+  "item.label.Examples": {
+    "message": "Examples",
+    "description": "Navbar item with label Examples"
+  },
+  "item.label.Forum": {
+    "message": "Forum",
+    "description": "Navbar item with label Forum"
+  },
+  "item.label.Support": {
+    "message": "Support",
+    "description": "Navbar item with label Support"
+  },
+  "item.label.Download": {
+    "message": "Download",
+    "description": "Navbar item with label Download"
+  }
+}
diff --git a/i18n/zh/code.json b/i18n/zh/code.json
new file mode 100644
index 0000000..8537448
--- /dev/null
+++ b/i18n/zh/code.json
@@ -0,0 +1,560 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "页面已崩溃。",
+    "description": "The title of the fallback page when the page crashed"
+  },
+  "theme.BackToTopButton.buttonAriaLabel": {
+    "message": "回到顶部",
+    "description": "The ARIA label for the back to top button"
+  },
+  "theme.blog.archive.title": {
+    "message": "历史博文",
+    "description": "The page & hero title of the blog archive page"
+  },
+  "theme.blog.archive.description": {
+    "message": "历史博文",
+    "description": "The page & hero description of the blog archive page"
+  },
+  "theme.blog.paginator.navAriaLabel": {
+    "message": "博文列表分页导航",
+    "description": "The ARIA label for the blog pagination"
+  },
+  "theme.blog.paginator.newerEntries": {
+    "message": "较新的博文",
+    "description": "The label used to navigate to the newer blog posts page (previous page)"
+  },
+  "theme.blog.paginator.olderEntries": {
+    "message": "较旧的博文",
+    "description": "The label used to navigate to the older blog posts page (next page)"
+  },
+  "theme.blog.post.paginator.navAriaLabel": {
+    "message": "博文分页导航",
+    "description": "The ARIA label for the blog posts pagination"
+  },
+  "theme.blog.post.paginator.newerPost": {
+    "message": "较新一篇",
+    "description": "The blog post button label to navigate to the newer/previous post"
+  },
+  "theme.blog.post.paginator.olderPost": {
+    "message": "较旧一篇",
+    "description": "The blog post button label to navigate to the older/next post"
+  },
+  "theme.tags.tagsPageLink": {
+    "message": "查看所有标签",
+    "description": "The label of the link targeting the tag list page"
+  },
+  "theme.colorToggle.ariaLabel.mode.system": {
+    "message": "system mode",
+    "description": "The name for the system color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.light": {
+    "message": "浅色模式",
+    "description": "The name for the light color mode"
+  },
+  "theme.colorToggle.ariaLabel.mode.dark": {
+    "message": "暗黑模式",
+    "description": "The name for the dark color mode"
+  },
+  "theme.colorToggle.ariaLabel": {
+    "message": "切换浅色/暗黑模式（当前为{mode}）",
+    "description": "The ARIA label for the color mode toggle"
+  },
+  "theme.docs.breadcrumbs.navAriaLabel": {
+    "message": "页面路径",
+    "description": "The ARIA label for the breadcrumbs"
+  },
+  "theme.docs.DocCard.categoryDescription.plurals": {
+    "message": "{count} 个项目",
+    "description": "The default description for a category card in the generated index about how many items this category includes"
+  },
+  "theme.docs.paginator.navAriaLabel": {
+    "message": "文件选项卡",
+    "description": "The ARIA label for the docs pagination"
+  },
+  "theme.docs.paginator.previous": {
+    "message": "上一页",
+    "description": "The label used to navigate to the previous doc"
+  },
+  "theme.docs.paginator.next": {
+    "message": "下一页",
+    "description": "The label used to navigate to the next doc"
+  },
+  "theme.docs.tagDocListPageTitle.nDocsTagged": {
+    "message": "{count} 篇文档带有标签",
+    "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.docs.tagDocListPageTitle": {
+    "message": "{nDocsTagged}「{tagName}」",
+    "description": "The title of the page for a docs tag"
+  },
+  "theme.docs.versions.unreleasedVersionLabel": {
+    "message": "此为 {siteTitle} {versionLabel} 版尚未发行的文档。",
+    "description": "The label used to tell the user that he's browsing an unreleased doc version"
+  },
+  "theme.docs.versions.unmaintainedVersionLabel": {
+    "message": "此为 {siteTitle} {versionLabel} 版的文档，现已不再积极维护。",
+    "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+  },
+  "theme.docs.versions.latestVersionSuggestionLabel": {
+    "message": "最新的文档请参阅 {latestVersionLink} ({versionLabel})。",
+    "description": "The label used to tell the user to check the latest version"
+  },
+  "theme.docs.versions.latestVersionLinkLabel": {
+    "message": "最新版本",
+    "description": "The label used for the latest version suggestion link label"
+  },
+  "theme.docs.versionBadge.label": {
+    "message": "版本：{versionLabel}"
+  },
+  "theme.common.editThisPage": {
+    "message": "编辑此页",
+    "description": "The link label to edit the current page"
+  },
+  "theme.common.headingLinkTitle": {
+    "message": "{heading}的直接链接",
+    "description": "Title for link to heading"
+  },
+  "theme.lastUpdated.atDate": {
+    "message": "于 {date} ",
+    "description": "The words used to describe on which date a page has been last updated"
+  },
+  "theme.lastUpdated.byUser": {
+    "message": "由 {user} ",
+    "description": "The words used to describe by who the page has been last updated"
+  },
+  "theme.lastUpdated.lastUpdatedAtBy": {
+    "message": "最后{byUser}{atDate}更新",
+    "description": "The sentence used to display when a page has been last updated, and by who"
+  },
+  "theme.navbar.mobileVersionsDropdown.label": {
+    "message": "选择版本",
+    "description": "The label for the navbar versions dropdown on mobile view"
+  },
+  "theme.NotFound.title": {
+    "message": "找不到页面",
+    "description": "The title of the 404 page"
+  },
+  "theme.tags.tagsListLabel": {
+    "message": "标签：",
+    "description": "The label alongside a tag list"
+  },
+  "theme.admonition.caution": {
+    "message": "警告",
+    "description": "The default label used for the Caution admonition (:::caution)"
+  },
+  "theme.admonition.danger": {
+    "message": "危险",
+    "description": "The default label used for the Danger admonition (:::danger)"
+  },
+  "theme.admonition.info": {
+    "message": "信息",
+    "description": "The default label used for the Info admonition (:::info)"
+  },
+  "theme.admonition.note": {
+    "message": "备注",
+    "description": "The default label used for the Note admonition (:::note)"
+  },
+  "theme.admonition.tip": {
+    "message": "提示",
+    "description": "The default label used for the Tip admonition (:::tip)"
+  },
+  "theme.admonition.warning": {
+    "message": "注意",
+    "description": "The default label used for the Warning admonition (:::warning)"
+  },
+  "theme.AnnouncementBar.closeButtonAriaLabel": {
+    "message": "关闭",
+    "description": "The ARIA label for close button of announcement bar"
+  },
+  "theme.blog.sidebar.navAriaLabel": {
+    "message": "最近博文导航",
+    "description": "The ARIA label for recent posts in the blog sidebar"
+  },
+  "theme.DocSidebarItem.expandCategoryAriaLabel": {
+    "message": "展开侧边栏分类 '{label}'",
+    "description": "The ARIA label to expand the sidebar category"
+  },
+  "theme.DocSidebarItem.collapseCategoryAriaLabel": {
+    "message": "折叠侧边栏分类 '{label}'",
+    "description": "The ARIA label to collapse the sidebar category"
+  },
+  "theme.IconExternalLink.ariaLabel": {
+    "message": "(opens in new tab)",
+    "description": "The ARIA label for the external link icon"
+  },
+  "theme.NavBar.navAriaLabel": {
+    "message": "主导航",
+    "description": "The ARIA label for the main navigation"
+  },
+  "theme.navbar.mobileLanguageDropdown.label": {
+    "message": "选择语言",
+    "description": "The label for the mobile language switcher dropdown"
+  },
+  "theme.NotFound.p1": {
+    "message": "我们找不到您要找的页面。",
+    "description": "The first paragraph of the 404 page"
+  },
+  "theme.NotFound.p2": {
+    "message": "请联系原始链接来源网站的所有者，并告知他们链接已损坏。",
+    "description": "The 2nd paragraph of the 404 page"
+  },
+  "theme.TOCCollapsible.toggleButtonLabel": {
+    "message": "本页总览",
+    "description": "The label used by the button on the collapsible TOC component"
+  },
+  "theme.blog.post.readMore": {
+    "message": "阅读更多",
+    "description": "The label used in blog post item excerpts to link to full blog posts"
+  },
+  "theme.blog.post.readMoreLabel": {
+    "message": "阅读 {title} 的全文",
+    "description": "The ARIA label for the link to full blog posts from excerpts"
+  },
+  "theme.blog.post.readingTime.plurals": {
+    "message": "阅读需 {readingTime} 分钟",
+    "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.CodeBlock.copy": {
+    "message": "复制",
+    "description": "The copy button label on code blocks"
+  },
+  "theme.CodeBlock.copied": {
+    "message": "复制成功",
+    "description": "The copied button label on code blocks"
+  },
+  "theme.CodeBlock.copyButtonAriaLabel": {
+    "message": "复制代码到剪贴板",
+    "description": "The ARIA label for copy code blocks button"
+  },
+  "theme.CodeBlock.wordWrapToggle": {
+    "message": "切换自动换行",
+    "description": "The title attribute for toggle word wrapping button of code block lines"
+  },
+  "theme.docs.breadcrumbs.home": {
+    "message": "主页面",
+    "description": "The ARIA label for the home page in the breadcrumbs"
+  },
+  "theme.docs.sidebar.collapseButtonTitle": {
+    "message": "收起侧边栏",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.collapseButtonAriaLabel": {
+    "message": "收起侧边栏",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.navAriaLabel": {
+    "message": "文档侧边栏",
+    "description": "The ARIA label for the sidebar navigation"
+  },
+  "theme.docs.sidebar.closeSidebarButtonAriaLabel": {
+    "message": "关闭导航栏",
+    "description": "The ARIA label for close button of mobile sidebar"
+  },
+  "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+    "message": "← 回到主菜单",
+    "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+  },
+  "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+    "message": "切换导航栏",
+    "description": "The ARIA label for hamburger menu button of mobile navigation"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": {
+    "message": "Expand the dropdown",
+    "description": "The ARIA label of the button to expand the mobile dropdown navbar item"
+  },
+  "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": {
+    "message": "Collapse the dropdown",
+    "description": "The ARIA label of the button to collapse the mobile dropdown navbar item"
+  },
+  "theme.docs.sidebar.expandButtonTitle": {
+    "message": "展开侧边栏",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.sidebar.expandButtonAriaLabel": {
+    "message": "展开侧边栏",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.SearchBar.seeAll": {
+    "message": "查看全部 {count} 个结果"
+  },
+  "theme.SearchPage.documentsFound.plurals": {
+    "message": "找到 {count} 份文件",
+    "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.SearchPage.existingResultsTitle": {
+    "message": "「{query}」的搜索结果",
+    "description": "The search page title for non-empty query"
+  },
+  "theme.SearchPage.emptyResultsTitle": {
+    "message": "在文档中搜索",
+    "description": "The search page title for empty query"
+  },
+  "theme.SearchPage.inputPlaceholder": {
+    "message": "在此输入搜索词",
+    "description": "The placeholder for search page input"
+  },
+  "theme.SearchPage.inputLabel": {
+    "message": "搜索",
+    "description": "The ARIA label for search page input"
+  },
+  "theme.SearchPage.algoliaLabel": {
+    "message": "由 Algolia 提供",
+    "description": "The description label for Algolia mention"
+  },
+  "theme.SearchPage.noResultsText": {
+    "message": "未找到结果",
+    "description": "The paragraph for empty search result"
+  },
+  "theme.SearchPage.fetchingNewResults": {
+    "message": "正在获取新的搜索结果...",
+    "description": "The paragraph for fetching new search results"
+  },
+  "theme.SearchBar.label": {
+    "message": "搜索",
+    "description": "The ARIA label and placeholder for search button"
+  },
+  "theme.SearchModal.searchBox.resetButtonTitle": {
+    "message": "清除查询",
+    "description": "The label and ARIA label for search box reset button"
+  },
+  "theme.SearchModal.searchBox.cancelButtonText": {
+    "message": "取消",
+    "description": "The label and ARIA label for search box cancel button"
+  },
+  "theme.SearchModal.searchBox.placeholderText": {
+    "message": "Search docs",
+    "description": "The placeholder text for the main search input field"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAi": {
+    "message": "Ask another question...",
+    "description": "The placeholder text when in AI question mode"
+  },
+  "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": {
+    "message": "Answering...",
+    "description": "The placeholder text for search box when AI is streaming an answer"
+  },
+  "theme.SearchModal.searchBox.enterKeyHint": {
+    "message": "search",
+    "description": "The hint for the search box enter key text"
+  },
+  "theme.SearchModal.searchBox.enterKeyHintAskAi": {
+    "message": "enter",
+    "description": "The hint for the Ask AI search box enter key text"
+  },
+  "theme.SearchModal.searchBox.searchInputLabel": {
+    "message": "Search",
+    "description": "The ARIA label for search input"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonText": {
+    "message": "Back to keyword search",
+    "description": "The text for back to keyword search button"
+  },
+  "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": {
+    "message": "Back to keyword search",
+    "description": "The ARIA label for back to keyword search button"
+  },
+  "theme.SearchModal.startScreen.recentSearchesTitle": {
+    "message": "最近搜索",
+    "description": "The title for recent searches"
+  },
+  "theme.SearchModal.startScreen.noRecentSearchesText": {
+    "message": "没有最近搜索",
+    "description": "The text when there are no recent searches"
+  },
+  "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": {
+    "message": "保存这个搜索",
+    "description": "The title for save recent search button"
+  },
+  "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": {
+    "message": "从历史记录中删除这个搜索",
+    "description": "The title for remove recent search button"
+  },
+  "theme.SearchModal.startScreen.favoriteSearchesTitle": {
+    "message": "收藏",
+    "description": "The title for favorite searches"
+  },
+  "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": {
+    "message": "从收藏列表中删除这个搜索",
+    "description": "The title for remove favorite search button"
+  },
+  "theme.SearchModal.startScreen.recentConversationsTitle": {
+    "message": "Recent conversations",
+    "description": "The title for recent conversations"
+  },
+  "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": {
+    "message": "Remove this conversation from history",
+    "description": "The title for remove recent conversation button"
+  },
+  "theme.SearchModal.errorScreen.titleText": {
+    "message": "无法获取结果",
+    "description": "The title for error screen"
+  },
+  "theme.SearchModal.errorScreen.helpText": {
+    "message": "你可能需要检查网络连接。",
+    "description": "The help text for error screen"
+  },
+  "theme.SearchModal.resultsScreen.askAiPlaceholder": {
+    "message": "Ask AI: ",
+    "description": "The placeholder text for Ask AI input"
+  },
+  "theme.SearchModal.askAiScreen.disclaimerText": {
+    "message": "Answers are generated with AI which can make mistakes. Verify responses.",
+    "description": "The disclaimer text for AI answers"
+  },
+  "theme.SearchModal.askAiScreen.relatedSourcesText": {
+    "message": "Related sources",
+    "description": "The text for related sources"
+  },
+  "theme.SearchModal.askAiScreen.thinkingText": {
+    "message": "Thinking...",
+    "description": "The text when AI is thinking"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonText": {
+    "message": "Copy",
+    "description": "The text for copy button"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonCopiedText": {
+    "message": "Copied!",
+    "description": "The text for copy button when copied"
+  },
+  "theme.SearchModal.askAiScreen.copyButtonTitle": {
+    "message": "Copy",
+    "description": "The title for copy button"
+  },
+  "theme.SearchModal.askAiScreen.likeButtonTitle": {
+    "message": "Like",
+    "description": "The title for like button"
+  },
+  "theme.SearchModal.askAiScreen.dislikeButtonTitle": {
+    "message": "Dislike",
+    "description": "The title for dislike button"
+  },
+  "theme.SearchModal.askAiScreen.thanksForFeedbackText": {
+    "message": "Thanks for your feedback!",
+    "description": "The text for thanks for feedback"
+  },
+  "theme.SearchModal.askAiScreen.preToolCallText": {
+    "message": "Searching...",
+    "description": "The text before tool call"
+  },
+  "theme.SearchModal.askAiScreen.duringToolCallText": {
+    "message": "Searching for ",
+    "description": "The text during tool call"
+  },
+  "theme.SearchModal.askAiScreen.afterToolCallText": {
+    "message": "Searched for",
+    "description": "The text after tool call"
+  },
+  "theme.SearchModal.footer.selectText": {
+    "message": "选中",
+    "description": "The select text for footer"
+  },
+  "theme.SearchModal.footer.submitQuestionText": {
+    "message": "Submit question",
+    "description": "The submit question text for footer"
+  },
+  "theme.SearchModal.footer.selectKeyAriaLabel": {
+    "message": "Enter 键",
+    "description": "The ARIA label for select key in footer"
+  },
+  "theme.SearchModal.footer.navigateText": {
+    "message": "导航",
+    "description": "The navigate text for footer"
+  },
+  "theme.SearchModal.footer.navigateUpKeyAriaLabel": {
+    "message": "向上键",
+    "description": "The ARIA label for navigate up key in footer"
+  },
+  "theme.SearchModal.footer.navigateDownKeyAriaLabel": {
+    "message": "向下键",
+    "description": "The ARIA label for navigate down key in footer"
+  },
+  "theme.SearchModal.footer.closeText": {
+    "message": "关闭",
+    "description": "The close text for footer"
+  },
+  "theme.SearchModal.footer.closeKeyAriaLabel": {
+    "message": "Esc 键",
+    "description": "The ARIA label for close key in footer"
+  },
+  "theme.SearchModal.footer.searchByText": {
+    "message": "搜索提供",
+    "description": "The 'Powered by' text for footer"
+  },
+  "theme.SearchModal.footer.backToSearchText": {
+    "message": "Back to search",
+    "description": "The back to search text for footer"
+  },
+  "theme.SearchModal.noResultsScreen.noResultsText": {
+    "message": "没有结果：",
+    "description": "The text when there are no results"
+  },
+  "theme.SearchModal.noResultsScreen.suggestedQueryText": {
+    "message": "试试搜索",
+    "description": "The text for suggested query"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsText": {
+    "message": "认为这个查询应该有结果？",
+    "description": "The text for reporting missing results"
+  },
+  "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": {
+    "message": "请告知我们。",
+    "description": "The link text for reporting missing results"
+  },
+  "theme.SearchModal.placeholder": {
+    "message": "搜索文档",
+    "description": "The placeholder of the input of the DocSearch pop-up modal"
+  },
+  "theme.blog.post.plurals": {
+    "message": "{count} 篇博文",
+    "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.tagTitle": {
+    "message": "{nPosts} 含有标签「{tagName}」",
+    "description": "The title of the page for a blog tag"
+  },
+  "theme.blog.author.pageTitle": {
+    "message": "{authorName} - {nPosts}",
+    "description": "The title of the page for a blog author"
+  },
+  "theme.blog.authorsList.pageTitle": {
+    "message": "作者",
+    "description": "The title of the authors page"
+  },
+  "theme.blog.authorsList.viewAll": {
+    "message": "查看所有作者",
+    "description": "The label of the link targeting the blog authors page"
+  },
+  "theme.blog.author.noPosts": {
+    "message": "该作者尚未撰写任何文章。",
+    "description": "The text for authors with 0 blog post"
+  },
+  "theme.contentVisibility.unlistedBanner.title": {
+    "message": "未列出页",
+    "description": "The unlisted content banner title"
+  },
+  "theme.contentVisibility.unlistedBanner.message": {
+    "message": "此页面未列出。搜索引擎不会对其索引，只有拥有直接链接的用户才能访问。",
+    "description": "The unlisted content banner message"
+  },
+  "theme.contentVisibility.draftBanner.title": {
+    "message": "草稿页",
+    "description": "The draft content banner title"
+  },
+  "theme.contentVisibility.draftBanner.message": {
+    "message": "此页面是草稿，仅在开发环境中可见，不会包含在正式版本中。",
+    "description": "The draft content banner message"
+  },
+  "theme.ErrorPageContent.tryAgain": {
+    "message": "重试",
+    "description": "The label of the button to try again rendering when the React error boundary captures an error"
+  },
+  "theme.common.skipToMainContent": {
+    "message": "跳到主要内容",
+    "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+  },
+  "theme.tags.tagsPageTitle": {
+    "message": "标签",
+    "description": "The title of the tag list page"
+  }
+}
diff --git a/i18n/zh/docusaurus-plugin-content-blog/options.json b/i18n/zh/docusaurus-plugin-content-blog/options.json
new file mode 100644
index 0000000..9239ff7
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-blog/options.json
@@ -0,0 +1,14 @@
+{
+  "title": {
+    "message": "Blog",
+    "description": "The title for the blog used in SEO"
+  },
+  "description": {
+    "message": "Blog",
+    "description": "The description for the blog used in SEO"
+  },
+  "sidebar.title": {
+    "message": "Recent posts",
+    "description": "The label for the left sidebar"
+  }
+}
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current.json b/i18n/zh/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 0000000..2cfeb1b
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,62 @@
+{
+  "version.label": {
+    "message": "Next",
+    "description": "The label for version current"
+  },
+  "sidebar.docs.category.What's new and migration": {
+    "message": "新功能与迁移",
+    "description": "The label for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.What's new and migration.link.generated-index.title": {
+    "message": "新功能与迁移",
+    "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.API": {
+    "message": "API",
+    "description": "The label for category 'API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText methods": {
+    "message": "RichText 方法",
+    "description": "The label for category 'RichText methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API": {
+    "message": "RichText 内部 API",
+    "description": "The label for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText internal API.link.generated-index.title": {
+    "message": "内部 API 概览",
+    "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Event Bus methods": {
+    "message": "Event Bus 方法",
+    "description": "The label for category 'Event Bus methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.State methods": {
+    "message": "状态方法",
+    "description": "The label for category 'State methods' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText events": {
+    "message": "RichText 事件",
+    "description": "The label for category 'RichText events' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.RichText properties": {
+    "message": "RichText 属性",
+    "description": "The label for category 'RichText properties' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks": {
+    "message": "框架集成",
+    "description": "The label for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Integration with frameworks.link.generated-index.title": {
+    "message": "框架集成",
+    "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides": {
+    "message": "指南",
+    "description": "The label for category 'Guides' in sidebar 'docs'"
+  },
+  "sidebar.docs.category.Guides.link.generated-index.title": {
+    "message": "指南",
+    "description": "The generated-index page title for category 'Guides' in sidebar 'docs'"
+  }
+}
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default-styles.md
new file mode 100644
index 0000000..603ac54
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default-styles.md
@@ -0,0 +1,144 @@
+---
+sidebar_label: defaultStyles
+title: defaultStyles 配置项
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解defaultStyles配置项。浏览开发者指南和API参考，试用代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# defaultStyles
+
+### 描述 {#description}
+
+@short: 可选。为特定块类型指定默认样式值
+
+### 用法 {#usage}
+
+~~~jsx {}
+defaultStyles?: {
+    "*"?: { // 影响所有块，允许为所有这些块设置通用属性
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+:::important[重要]
+`defaultStyles` 属性**不会**将实际CSS应用到受影响的块上。CSS样式必须单独设置：
+
+```jsx title="index.js"
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+<style>
+    #root h2 {
+        font-family: Roboto;
+        font-size: 28px;
+        color: purple;
+        background: #FFC0CB;
+    }
+</style>
+```
+
+在此示例中，所有`h2`块都被指定为`"Roboto"`字体族，字号为28px，同时前景色和背景色也一并更改。CSS样式同样被应用到`h2`块上。
+:::
+
+### 默认配置 {#default-config}
+
+~~~jsx
+const defaultStyles = {
+    "*": { "font-family": "Arial" },
+    p: { "font-size": "14px" },
+    blockquote: { "font-size": "14px" },
+    h1: { "font-size": "32px" },
+    h2: { "font-size": "24px" },
+    h3: { "font-size": "18px" },
+    h4: { "font-size": "16px" },
+    h5: { "font-size": "14px" },
+    h6: { "font-size": "12px" }
+};
+~~~
+
+### 示例 {#example}
+
+~~~jsx {3-13}
+// 初始化RichText
+new richtext.Richtext("#root", {
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        h5: {
+            "font-family": "Roboto"
+        },
+        h6: {
+            "font-family": "Roboto"
+        }
+    },
+    // 其他配置属性
+});
+~~~
+
+**更新日志：** 该属性在v2.0中进行了更新
+
+**相关文章：** [配置](guides/configuration.md)
+
+**相关示例：** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
new file mode 100644
index 0000000..c318430
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: fullscreenMode
+title: fullscreenMode 配置项
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解fullscreenMode配置项。浏览开发者指南和API参考，试用代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# fullscreenMode
+
+### 描述 {#description}
+
+@short: 可选。启用RichText全屏模式
+
+### 用法 {#usage}
+
+~~~jsx {}
+fullscreenMode?: boolean;
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+fullscreenMode: false;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {3}
+// 初始化RichText
+new richtext.Richtext("#root", {
+    fullscreenMode: true
+    // 其他配置属性
+});
+~~~
+
+**更新日志：** 该属性在v2.0中新增
+
+**相关文章：** [配置](guides/configuration.md)
+
+**相关示例：** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7?tag=richtext)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
new file mode 100644
index 0000000..03d3be0
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: imageUploadUrl
+title: imageUploadUrl 配置项
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解imageUploadUrl配置项。浏览开发者指南和API参考，试用代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# imageUploadUrl
+
+### 描述 {#description}
+
+@short: 可选。指定用于图片上传的URL
+
+### 用法 {#usage}
+
+~~~jsx {}
+imageUploadUrl?: string;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {3}
+// 初始化RichText
+new richtext.Richtext("#root", {
+    imageUploadUrl: "some URL"
+    // 其他配置属性
+});
+~~~
+
+**更新日志：** 该属性在v2.0中新增
+
+**相关文章：** [配置](guides/configuration.md)
+
+**相关示例：** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
new file mode 100644
index 0000000..4cdda42
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/layout-mode.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: layoutMode
+title: layoutMode 配置项
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解layoutMode配置项。浏览开发者指南和API参考，试用代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# layoutMode
+
+### 描述 {#description}
+
+@short: 可选。指定主编辑区域的布局模式
+
+### 用法 {#usage}
+
+~~~jsx {}
+layoutMode: "classic" | "document";
+~~~
+
+`"classic"`模式表示编辑区域铺满整个页面。`"document"`模式则更贴近真实文档的尺寸（支持的尺寸：A4、A5、A6、A7）。
+
+### 默认配置 {#default-config}
+
+~~~jsx
+layoutMode: "classic";
+~~~
+
+### 示例 {#example}
+
+~~~jsx {3}
+// 初始化RichText
+new richtext.Richtext("#root", {
+    layoutMode: "document"  // 默认以"document"模式初始化RichText
+    // 其他配置属性
+});
+~~~
+
+**更新日志：** 该属性在v2.0中新增，替代了已移除的`mode`属性
+
+**相关文章：** [配置](guides/configuration.md)
+
+**相关示例：** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/locale.md
new file mode 100644
index 0000000..efe8089
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/locale.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: locale
+title: locale 配置项
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解locale配置项。浏览开发者指南和API参考，试用代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# locale
+
+### 描述 {#description}
+
+@short: 可选。包含RichText本地化标签的对象
+
+:::info[信息]
+**locale**对象需要包含RichText的所有标签及其对应的翻译。
+:::
+
+### 用法 {#usage}
+
+~~~jsx {}
+locale?: object;
+~~~
+
+### 默认配置 {#default-config}
+
+默认情况下，RichText使用**英语**语言环境。您也可以将其设置为自定义语言环境。
+
+:::tip[提示]
+如需动态切换当前语言环境，可以使用RichText的[**setLocale()**](api/methods/set-locale.md)方法
+:::
+
+### 示例 {#example}
+
+~~~jsx {3}
+// 初始化RichText
+const editor = new richtext.RichText("#root", {
+    locale: richtext.locales.cn // 初始时将设置中文语言环境
+    // locale: richtext.locales.en // 初始时将设置英语语言环境
+    // locale: richtext.locales.de // 初始时将设置德语语言环境
+    // 其他配置属性
+});
+~~~
+
+**更新日志：** 该属性在v2.0中新增
+
+**相关文章：** [本地化](guides/localization.md)
+
+**相关示例：** [RichText. Localization](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/menubar.md
new file mode 100644
index 0000000..edb6690
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/menubar.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: menubar
+title: menubar 配置项
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解menubar配置项。浏览开发者指南和API参考，试用代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# menubar
+
+### 描述 {#description}
+
+@short: 可选。启用RichText顶部菜单栏
+
+### 用法 {#usage}
+
+~~~jsx {}
+menubar?: boolean;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {3}
+// 初始化RichText
+new richtext.Richtext("#root", {
+    menubar: true
+    // 其他配置属性
+});
+~~~
+
+**更新日志：** 该属性在v2.0中新增
+
+**相关文章：** [配置](guides/configuration.md)
+
+**相关示例：** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7?tag=richtext)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/toolbar.md
new file mode 100644
index 0000000..71d4e78
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/toolbar.md
@@ -0,0 +1,219 @@
+---
+sidebar_label: toolbar
+title: toolbar 配置项
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解toolbar配置项。浏览开发者指南和API参考，试用代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# toolbar
+
+### 描述 {#description}
+
+@short: 可选。启用toolbar并允许用户指定/配置toolbar中显示的按钮
+
+### 用法 {#usage}
+
+~~~jsx {}
+toolbar?: boolean | Array<string | { id: string, type: string, label?: string, tooltip?: string, css?: string, handler?: () => any }>;
+~~~
+
+#### toolbar中的可用按钮 {#available-buttons-within-toolbar}
+
+您可以在RichText的toolbar中指定以下按钮：
+
+| 按钮                | 描述                                                                        |
+|---------------------|-----------------------------------------------------------------------------|
+| `undo`              | 撤销最近的用户操作。                                                         |
+| `redo`              | 重做之前撤销的操作。                                                         |
+| `style`             | 允许选择文本样式（例如标题、段落等）。                                        |
+| `font-family`       | 更改所选文本的字体。                                                         |
+| `font-size`         | 调整所选文本的大小。                                                         |
+| `bold`              | 对所选文本应用粗体格式。                                                     |
+| `italic`            | 对所选文本应用斜体格式。                                                     |
+| `underline`         | 为所选文本添加下划线。                                                       |
+| `strike`            | 应用删除线格式。                                                             |
+| `subscript`         | 将文本格式化为下标。                                                         |
+| `superscript`       | 将文本格式化为上标。                                                         |
+| `text-color`        | 更改文本颜色。                                                               |
+| `background-color`  | 更改文本的背景（高亮）颜色。                                                  |
+| `align`             | 设置文本对齐方式（左对齐、居中、右对齐、两端对齐）。                           |
+| `indent`            | 增加文本块缩进。                                                             |
+| `outdent`           | 减少段落缩进。                                                               |
+| `line-height`       | 调整行间距（行高）。                                                         |
+| `quote`             | 将文本格式化为引用块。                                                       |
+| `bulleted-list`     | 创建项目符号列表。                                                           |
+| `numbered-list`     | 创建编号列表。                                                               |
+| `link`              | 插入超链接。                                                                 |
+| `image`             | 插入图片。                                                                   |
+| `line`              | 插入水平分割线。                                                             |
+| `clear`             | 移除所选文本的所有格式。                                                     |
+| `print`             | 打开打印对话框。                                                             |
+| `fullscreen`        | 切换全屏模式。                                                               |
+| `mode`              | 在[布局模式](api/config/layout-mode.md)之间切换（classic/document）          |
+| `shortcuts`         | 显示可用键盘快捷键列表。                                                     |
+| `separator`         | 在toolbar分组之间添加视觉分隔符。                                            |
+
+您可以使用这些字符串按如下方式配置toolbar按钮：
+
+~~~jsx {2-7}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // 其他按钮
+    ],
+    // 其他配置属性
+});
+~~~
+
+#### toolbar中的自定义按钮 {#custom-buttons-within-toolbar}
+
+您可以将自定义按钮指定为具有以下参数的对象：
+
+- `type` -（必填）指定自定义控件类型。可用类型如下：`"button"`、`"richselect"`、`"colorpicker"`
+- `id` -（可选）自定义控件ID（不能与现有控件ID重复）
+- `label` -（可选）按钮标签（与图标组合使用）
+- `tooltip` -（可选）悬停时显示的工具提示（如未指定，则使用"label"的值）
+- `css` -（可选）分配给控件的CSS类名（默认支持的类：wx-primary、wx-secondary）
+- `handler` -（可选）按钮被点击时执行的回调函数
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // 按钮（字符串仅代表按钮）
+        "bold",
+        "italic",
+        // 预定义按钮（用户无法为这些按钮定义其他选项，如标签、工具提示、选项等，因此只能使用 ({ type: "button", id: string })）
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // 如果用户想使用预定义控件（如richselect/colorpicker），必须指定正确的类型
+        // 类型不匹配将被忽略（不会添加到toolbar中）
+        {
+            type: "richselect", // type: "button" - 不正确，将被忽略
+            id: "mode",
+        },
+        // 自定义按钮（支持的选项见下方）
+        // 用户只能定义自定义按钮（目前不支持richselect/colorpicker）
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* 自定义逻辑 */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* 自定义逻辑 */}
+        }
+    ],
+    // 其他配置属性
+});
+~~~
+
+#### 隐藏toolbar {#hide-toolbar}
+
+如果需要隐藏toolbar，请将`toolbar`属性设置为`false`，如下所示：
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false
+    // 其他配置属性
+});
+~~~
+
+### 默认配置 {#default-config}
+
+~~~jsx
+const defaultToolbarButtons = {
+    "undo",
+    "redo",
+    "separator",
+    "style",
+    "separator",
+    "font-family",
+    "font-size",
+    "separator",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "separator",
+    "text-color",
+    "background-color",
+    "separator",
+    "align",
+    "line-height",
+    "outdent",
+    "indent",
+    "separator",
+    "bulleted-list",
+    "numbered-list",
+    "quote",
+    "separator",
+    "link",
+    "image",
+    "separator",
+    "clear",
+    "separator",
+    "fullscreen",
+    "mode"
+};
+~~~
+
+:::tip[提示]
+默认toolbar控件由RichText组件导出，可通过`richtext.defaultToolbarButtons`访问。
+
+```jsx{4}
+// 初始化RichText
+new richtext.Richtext("#root", {
+    toolbar: [
+        ...richtext.defaultToolbarButtons,
+        {
+            type: "button",
+            id: "btn1", // 按钮ID（如需应用自定义逻辑，不能与现有按钮ID重复）
+            icon: "wxo-help", // 按钮图标（与标签组合使用）
+            css: "rounded", // 分配给控件的CSS类名（默认支持的类：wx-primary、wx-secondary）
+            label: "Custom button", // 按钮标签（与图标组合使用）
+            tooltip: "Some tooltip", // 悬停时显示的工具提示（如未指定，则使用"label"的值）
+        }
+    ]
+    // 其他配置属性
+});
+```
+:::
+
+### 示例 {#example}
+
+~~~jsx {3-18}
+// 初始化RichText
+new richtext.Richtext("#root", {
+    toolbar: [
+        "bold",
+        "italic",
+        "separator",
+        // 自定义按钮（以下使用了所有支持的选项）
+        // 用户只能定义自定义按钮（目前不支持richselect/colorpicker）
+        {
+            type: "button",
+            id: "btn1", // 按钮ID（如需应用自定义逻辑，不能与现有按钮ID重复）
+            icon: "wxo-help", // 按钮图标（与标签组合使用）
+            css: "rounded", // 分配给控件的CSS类名（默认支持的类：wx-primary、wx-secondary）
+            label: "Custom button", // 按钮标签（与图标组合使用）
+            tooltip: "Some tooltip", // 悬停时显示的工具提示（如未指定，则使用"label"的值）
+            handler: () => ..., // 绑定到此按钮的自定义逻辑
+        }
+    ]
+    // 其他配置属性
+});
+~~~
+
+**更新日志：** 该属性在v2.0中新增
+
+**相关文章：** [配置](guides/configuration.md)
+
+**相关示例：** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/value.md
new file mode 100644
index 0000000..45c65c6
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/value.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: value
+title: value 配置项
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解value配置项。浏览开发者指南和API参考，试用代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# value
+
+### 描述 {#description}
+
+@short: 可选。指定在RichText编辑区域中显示的初始值（内容）
+
+:::tip[提示]
+如果您想使用自定义格式设置值（内容），请使用内置的[`setValue()`](api/methods/set-value.md)方法。
+:::
+
+### 用法 {#usage}
+
+~~~jsx {}
+value?: string;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    value: "<h1>some value</h1>" // 设置默认值（HTML格式）
+    // 其他配置属性
+});
+~~~
+
+**更新日志：** 该属性在v2.0中新增
+
+**相关文章：** [配置](guides/configuration.md)
+
+**相关示例：** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/align.md
new file mode 100644
index 0000000..da4aa4d
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/align.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: align
+title: align 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 align 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# align
+
+### 描述 {#description}
+
+@short: 触发时机：当通过 menubar/toolbar 或 Event Bus 方法更改文本对齐方式时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"align": ({
+    align: "left" | "center" | "right" | "justify"
+}) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**align** 事件的回调函数可接收一个包含以下参数的对象：
+
+- `align` - 文本对齐方式。可指定以下值之一：`"left" | "center" | "right" | "justify"`
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-12}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "align" 事件
+editor.api.on("align", (obj) => {
+    console.log(`Align to: ${obj.align}`);
+});
+// 将文本左对齐
+editor.api.exec("align", {
+    align: "left"
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
new file mode 100644
index 0000000..cdf4136
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: clear-text-format
+title: clear-text-format 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 clear-text-format 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# clear-text-format
+
+### 描述 {#description}
+
+@short: 触发时机：当通过 menubar/toolbar 或 Event Bus 方法清除文本格式时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"clear-text-format": () => boolean | void;
+~~~
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-10}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "clear-text-format" 事件
+editor.api.on("clear-text-format", () => {
+    console.log("Text format was cleared");
+});
+// 清除文本格式
+editor.api.exec("clear-text-format", {});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/copy.md
new file mode 100644
index 0000000..f12aef4
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/copy.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: copy
+title: copy 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 copy 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# copy
+
+### 描述 {#description}
+
+@short: 触发时机：当复制选中文本时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"copy": () => boolean | void;
+~~~
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "copy" 事件
+editor.api.on("copy", () => {
+    console.log("Selected text was copied");
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/create-new.md
new file mode 100644
index 0000000..db98aa5
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/create-new.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: create-new
+title: create-new 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 create-new 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# create-new
+
+### 描述 {#description}
+
+@short: 触发时机：当在 menubar 中点击"新建"选项或通过 Event Bus 方法触发时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"create-new": ({ reset?: boolean }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**create-new** 事件的回调函数可接收一个包含以下参数的对象：
+
+- `reset` - 创建新文件时重置历史记录
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-10}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "create-new" 事件
+editor.api.on("create-new", ({ reset }) => {
+    console.log(`Document has been cleared. History has ${reset ? "" : "not"} been reset.`);
+});
+// 创建新文件并重置历史记录
+editor.api.exec("create-new", { reset: true });
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/cut.md
new file mode 100644
index 0000000..ebc1dfd
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/cut.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: cut
+title: cut 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 cut 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# cut
+
+### 描述 {#description}
+
+@short: 触发时机：当剪切选中文本时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"cut": () => boolean | void;
+~~~
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "cut" 事件
+editor.api.on("cut", () => {
+    console.log("Selected text was cut");
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/delete-link.md
new file mode 100644
index 0000000..6a7819e
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/delete-link.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: delete-link
+title: delete-link 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 delete-link 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# delete-link
+
+### 描述 {#description}
+
+@short: 触发时机：当删除链接时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"delete-link": () => boolean | void;
+~~~
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "delete-link" 事件
+editor.api.on("delete-link", () => {
+    console.log("The link was deleted");
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/export.md
new file mode 100644
index 0000000..14e8550
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/export.md
@@ -0,0 +1,59 @@
+---
+sidebar_label: export
+title: export 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 export 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# export
+
+### 描述 {#description}
+
+@short: 触发时机：当在 menubar 中点击"导出"选项或通过 Event Bus 方法触发后触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"export": ({ options: IExportOptions; result?: any }) => boolean | void;
+
+interface IExportOptions {
+    format?: "docx" | "pdf";
+    url?: string;
+    download?: boolean;
+    fileName?: string;
+}
+~~~
+
+### 参数 {#parameters}
+
+**export** 事件的回调函数可接收一个包含以下参数的对象：
+
+- `format` - 文件格式
+- `url` - 文件导出的基础 URL
+- `download` - 允许用户指定是否在收到服务器响应后下载文件。若该属性设为 `false`，文件将不会下载，用户可从事件对象中获取 blob 数据（参见事件定义中的 `result` 属性）
+- `fileName` - 导出的文件名称
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-15}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "export" 事件
+editor.api.on("export", (obj) => {
+    console.log(obj);
+    console.log("The file was exported");
+});
+// 将内容导出为 pdf 文件
+editor.api.exec("export", {
+    format: "pdf",
+    download: false,
+    fileName: "some file"
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/import.md
new file mode 100644
index 0000000..a59d3db
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/import.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: import
+title: import 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 import 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# import
+
+### 描述 {#description}
+
+@short: 触发时机：当在 menubar 中点击"导入"选项或通过 Event Bus 方法触发后触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"import": ({ html?: string }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**import** 事件的回调函数可接收一个包含以下参数的对象：
+
+- `html` - HTML 格式的文本值
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-13}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "import" 事件
+editor.api.on("import", (obj) => {
+    console.log(obj.html);
+    console.log("The new value was imported");
+});
+// 导入新值
+editor.api.exec("import", {
+    html: "<h2>some value</h2>" // 内部调用 setValue
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/indent.md
new file mode 100644
index 0000000..66a6a09
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/indent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: indent
+title: indent 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 indent 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# indent
+
+### 描述 {#description}
+
+@short: 触发时机：当增加块级缩进时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"indent": ({ step: number }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**indent** 事件的回调函数可接收一个包含以下参数的对象：
+
+- `step` - 缩进增加的步长
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "indent" 事件
+editor.api.on("indent", (obj) => {
+    console.log(obj);
+    console.log("The indention was increased");
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-image.md
new file mode 100644
index 0000000..67641b9
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-image.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: insert-image
+title: insert-image 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 insert-image 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# insert-image
+
+### 描述 {#description}
+
+@short: 触发时机：当插入图片时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"insert-image": (IImageContext) => boolean | void;
+
+interface IImageContext {
+    id: TID;
+    value: string;
+    width: number;
+    height: number;
+    // 来自上传器上下文的额外属性，实际操作不需要
+    name?: string;
+    file?: File;
+    status?: string;
+    selected: (ctx: IImageContext) => void;
+    uploaded: (ctx: IImageContext) => void;
+}
+~~~
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "insert-image" 事件
+editor.api.on("insert-image", (obj) => {
+    console.log(obj);
+    console.log("The image was inserted");
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-line.md
new file mode 100644
index 0000000..1cb48d7
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-line.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: insert-line
+title: insert-line 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 insert-line 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# insert-line
+
+### 描述 {#description}
+
+@short: 触发时机：当插入水平分割线时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"insert-line": () => boolean | void;
+~~~
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "insert-line" 事件
+editor.api.on("insert-line", () => {
+    console.log("The horizontal line was inserted");
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-link.md
new file mode 100644
index 0000000..d39c7b6
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-link.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: insert-link
+title: insert-link 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 insert-link 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# insert-link
+
+### 描述 {#description}
+
+@short: 触发时机：当插入链接时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"insert-link": ({ url: string }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**update-link** 事件的回调函数可接收一个包含以下参数的对象：
+
+- `url` - 要插入的 URL
+
+:::info[信息]
+处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "insert-link" 事件
+editor.api.on("insert-link", (obj) => {
+    console.log(obj)
+    console.log("The following link was inserted: " + obj.url);
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-list.md
new file mode 100644
index 0000000..7544c03
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-list.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: insert-list
+title: insert-list 事件
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解insert-list事件。浏览开发者指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天试用版本。
+---
+
+# insert-list
+
+### 描述 {#description}
+
+@short: 当插入列表时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"insert-list": ({ type: TListType }) => boolean | void;
+
+type TListType = "bulleted" | "numbered";
+~~~
+
+### 参数 {#parameters}
+
+**insert-list** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `type` - 插入列表的类型。可以指定以下值：
+    - `"bulleted"` - 无序列表
+    - `"numbered"` - 有序列表
+
+:::info[信息]
+如需处理内部事件，您可以使用[**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "insert-list" 事件
+editor.api.on("insert-list", (obj) => {
+    console.log(obj.type);
+    console.log("The list was inserted");
+});
+~~~
+
+**更新日志：** 该事件在v2.0版本中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/outdent.md
new file mode 100644
index 0000000..91f3937
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/outdent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: outdent
+title: outdent 事件
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解outdent事件。浏览开发者指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天试用版本。
+---
+
+# outdent
+
+### 描述 {#description}
+
+@short: 当减少块缩进时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"outdent": ({ step: number }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**outdent** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `step` - 缩进减少的步长
+
+:::info[信息]
+如需处理内部事件，您可以使用[**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "outdent" 事件
+editor.api.on("outdent", (obj) => {
+    console.log(obj);
+    console.log("The indention was decreased");
+});
+~~~
+
+**更新日志：** 该事件在v2.0版本中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/paste.md
new file mode 100644
index 0000000..a2b4462
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/paste.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: paste
+title: paste 事件
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解paste事件。浏览开发者指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天试用版本。
+---
+
+# paste
+
+### 描述 {#description}
+
+@short: 当粘贴内容时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"paste": () => boolean | void;
+~~~
+
+:::info[信息]
+如需处理内部事件，您可以使用[**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "paste" 事件
+editor.api.on("paste", () => {
+    console.log("Content was pasted");
+});
+~~~
+
+**更新日志：** 该事件在v2.0版本中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/print.md
new file mode 100644
index 0000000..e373df1
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/print.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: print
+title: print 事件
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解print事件。浏览开发者指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天试用版本。
+---
+
+# print
+
+### 描述 {#description}
+
+@short: 当打印文档时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"print": () => boolean | void;
+~~~
+
+:::info[信息]
+如需处理内部事件，您可以使用[**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+// 配置属性
+});
+// 订阅 "print" 事件
+editor.api.on("print", () => {
+    console.log("The document is printing");
+});
+~~~
+
+**更新日志：** 该事件在v2.0版本中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/redo.md
new file mode 100644
index 0000000..182ffdd
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/redo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: redo
+title: redo 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 redo 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# redo
+
+### 描述 {#description}
+
+@short: 当在 menubar/toolbar 中按下"Redo"按钮或通过 Event Bus 方法调用时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"redo": () => boolean | void;
+~~~
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "redo" 事件
+editor.api.on("redo", () => {
+    console.log("Redo operation was performed");
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/resize-image.md
new file mode 100644
index 0000000..6325760
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/resize-image.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: resize-image
+title: resize-image 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 resize-image 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# resize-image
+
+### 描述 {#description}
+
+@short: 当调整图片大小时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"resize-image": ({ id: number, width: number, height: number }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**resize-image** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `id` - 图片 ID
+- `width` - 图片宽度
+- `height` - 图片高度
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+// 配置属性
+});
+// 订阅 "resize-image" 事件
+editor.api.on("resize-image", (obj) => {
+    console.log(obj);
+    console.log("The image was resized")
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
new file mode 100644
index 0000000..c2a9418
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-family.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-family
+title: set-font-family 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-font-family 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# set-font-family
+
+### 描述 {#description}
+
+@short: 当设置字体族时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"set-font-family": ({ fontFamily: string }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**set-font-family** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `fontFamily` - 要应用的字体族。可用字体如下：`"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"`
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-13}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "set-font-family" 事件
+editor.api.on("set-font-family", (obj) => {
+    console.log(obj.fontFamily);
+    console.log("The font family was changed");
+});
+// 应用新字体族
+editor.api.exec("set-font-family", {
+    fontFamily: "Roboto"
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
new file mode 100644
index 0000000..d4c737d
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-size.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-size
+title: set-font-size 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-font-size 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# set-font-size
+
+### 描述 {#description}
+
+@short: 当设置字体大小时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"set-font-size": ({ fontSize: string }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**set-font-size** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `fontSize` - 要应用的字体大小
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-13}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "set-font-size" 事件
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+    console.log("The font size was changed");
+});
+// 应用新字体大小
+editor.api.exec("set-font-size", {
+    fontSize: "11px"
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
new file mode 100644
index 0000000..ed524a0
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-line-height.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-line-height
+title: set-line-height 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-line-height 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# set-line-height
+
+### 描述 {#description}
+
+@short: 当设置行高时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"set-line-height": ({ lineHeight: string }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**set-line-height** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `lineHeight` - 行高值
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-13}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "set-line-height" 事件
+editor.api.on("set-line-height", (obj) => {
+    console.log(obj);
+    console.log("The line height was changed");
+});
+// 应用新行高
+editor.api.exec("set-line-height", {
+   lineHeight: "15px"
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
new file mode 100644
index 0000000..e217da7
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-color.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: set-text-color
+title: set-text-color 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-text-color 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# set-text-color
+
+### 描述 {#description}
+
+@short: 当设置文本颜色和/或文本背景颜色时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"set-text-color": (ITextColor) => boolean | void;
+
+interface ITextColor {
+    color?: string;
+    background?: string;
+}
+~~~
+
+### 参数 {#parameters}
+
+**set-text-color** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `color` - 文本颜色
+- `background` - 文本背景颜色
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-14}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "set-text-color" 事件
+editor.api.on("set-text-color", (obj) => {
+    console.log(obj);
+    console.log("The text color and/or background text color were changed");
+});
+// 应用文本颜色和背景颜色
+editor.api.exec("set-text-color", {
+   color: "red",
+   background: "blue"
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
new file mode 100644
index 0000000..2dff290
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-format.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: set-text-format
+title: set-text-format 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-text-format 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# set-text-format
+
+### 描述 {#description}
+
+@short: 当设置文本格式时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"set-text-format": (ITextFormat) => boolean | void;
+
+interface ITextFormat {
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+    underline?: boolean;
+}
+~~~
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 参数 {#parameters}
+
+**set-text-format** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `bold` - 粗体文本格式
+- `italic` - 斜体文本格式
+- `strike` - 删除线文本格式
+- `underline` - 下划线文本格式
+
+### 示例 {#example}
+
+~~~jsx {5-14}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "set-text-format" 事件
+editor.api.on("set-text-format", (obj) => {
+    console.log(obj);
+    console.log("The text format was changed");
+});
+// 应用"斜体"和粗体文本格式
+editor.api.exec("set-text-format", {
+    italic: true,
+    bold: true
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
new file mode 100644
index 0000000..4f19233
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-style.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: set-text-style
+title: set-text-style 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-text-style 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# set-text-style
+
+### 描述 {#description}
+
+@short: 当设置文本样式时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"set-text-style": ({ tag: TBlockType }) => boolean | void;
+
+type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+~~~
+
+### 参数 {#parameters}
+
+**set-text-style** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `tag` - 文本样式
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-13}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "set-text-style" 事件
+editor.api.on("set-text-style", (obj) => {
+    console.log(obj.tag);
+    console.log("The text style was changed");
+});
+// 应用新文本样式
+editor.api.exec("set-text-style", {
+    tag: "blockquote"
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-popup.md
new file mode 100644
index 0000000..6338858
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-popup.md
@@ -0,0 +1,53 @@
+---
+sidebar_label: show-popup
+title: show-popup 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 show-popup 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# show-popup
+
+### 描述 {#description}
+
+@short: 当弹出窗口显示/隐藏时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"show-popup": (IPopupConfig) => boolean | void;
+
+interface IPopupConfig {
+    type: "link" | null;
+    image?: boolean;
+}
+~~~
+
+### 参数 {#parameters}
+
+**show-popup** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `type` - 弹出窗口的类型
+- `image` - 提供对附加上下文的访问（当前光标是否指向图片）
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-13}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "show-popup" 事件
+editor.api.on("show-popup", (obj) => {
+    console.log(obj);
+    console.log("The popup was shown/hidden");
+});
+// 显示链接弹出窗口
+editor.api.exec("show-popup", {
+    type: "link"
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/subscript.md
new file mode 100644
index 0000000..56e1fad
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/subscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: subscript
+title: subscript 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 subscript 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# subscript
+
+### 描述 {#description}
+
+@short: 当在 menubar/toolbar 中按下"Subscript"按钮或通过 Event Bus 方法调用时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"subscript": () => boolean | void;
+~~~
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-10}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "subscript" 事件
+editor.api.on("subscript", () => {
+    console.log("Subscript was applied");
+});
+// 触发 "subscript" 事件
+editor.api.exec("subscript", {});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/superscript.md
new file mode 100644
index 0000000..dd70afc
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/superscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: superscript
+title: superscript 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 superscript 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# superscript
+
+### 描述 {#description}
+
+@short: 当在 menubar/toolbar 中按下"Superscript"按钮或通过 Event Bus 方法调用时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"superscript": () => boolean | void;
+~~~
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "superscript" 事件
+editor.api.on("superscript", () => {
+    console.log("Superscript was applied");
+});
+// 触发 "superscript" 事件
+editor.api.exec("superscript", {});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
new file mode 100644
index 0000000..e441c44
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-fullscreen-mode
+title: toggle-fullscreen-mode 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-fullscreen-mode 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# toggle-fullscreen-mode
+
+### 描述 {#description}
+
+@short: 当切换全屏模式时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**toggle-fullscreen-mode** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `mode` - 启用全屏模式
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "toggle-fullscreen-mode" 事件
+editor.api.on("toggle-fullscreen-mode", (obj) => {
+    console.log(obj);
+    console.log("The full screen mode was changed");
+});
+// 启用全屏模式
+editor.api.exec("toggle-fullscreen-mode", { mode: true });
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
new file mode 100644
index 0000000..f501839
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-layout-mode
+title: toggle-layout-mode 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-layout-mode 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# toggle-layout-mode
+
+### 描述 {#description}
+
+@short: 当切换布局模式时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**toggle-layout-mode** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `mode` - 布局模式。可用模式如下：`"classic" | "document"`
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-11}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "toggle-layout-mode" 事件
+editor.api.on("toggle-layout-mode", (obj) => {
+    console.log(obj);
+    console.log("The layout mode was changed");
+});
+// 设置"文档"布局模式
+editor.api.exec("toggle-layout-mode", { mode: "document" });
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
new file mode 100644
index 0000000..5e6541c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-shortcut-info
+title: toggle-shortcut-info 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-shortcut-info 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# toggle-shortcut-info
+
+### 描述 {#description}
+
+@short: 当切换快捷键信息显示时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**toggle-shortcut-info** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `mode` - 启用快捷键信息；`true` 表示显示快捷键信息弹出窗口，`false` 表示隐藏快捷键信息弹出窗口
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "toggle-shortcut-info" 事件
+editor.api.on("toggle-shortcut-info", (obj) => {
+    console.log(obj);
+    console.log("The shortcut info was shown");
+});
+// 启用快捷键信息
+editor.api.exec("toggle-shortcut-info", { mode: true });
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/undo.md
new file mode 100644
index 0000000..89fbced
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/undo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: undo
+title: undo 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 undo 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# undo
+
+### 描述 {#description}
+
+@short: 当在 menubar/toolbar 中按下"Undo"按钮或通过 Event Bus 方法调用时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"undo": () => boolean | void;
+~~~
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "undo" 事件
+editor.api.on("undo", () => {
+    console.log("Undo operation was performed");
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/update-link.md
new file mode 100644
index 0000000..046536b
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/update-link.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: update-link
+title: update-link 事件
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 update-link 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# update-link
+
+### 描述 {#description}
+
+@short: 当更新链接时触发
+
+### 用法 {#usage}
+
+~~~jsx {}
+"update-link": ({ id: number, url: string }) => boolean | void;
+~~~
+
+### 参数 {#parameters}
+
+**update-link** 事件的回调函数可以接收一个包含以下参数的对象：
+
+- `id` - 链接 ID
+- `url` - 修改后的 url
+
+:::info[信息]
+如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-9}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "update-link" 事件
+editor.api.on("update-link", (obj) => {
+    console.log(obj);
+    console.log("The following link was updated:" + obj.url);
+});
+~~~
+
+**更新日志：** 该事件在 v2.0 中添加
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/detach.md
new file mode 100644
index 0000000..6d6ff1c
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/detach.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: api.detach()
+title: detach 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 detach 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# api.detach()
+
+### 描述 {#description}
+
+@short: 允许移除/解除事件处理程序
+
+### 用法 {#usage}
+
+~~~jsx {}
+api.detach( tag: string ): void;
+~~~
+
+### 参数 {#parameters}
+
+- `tag` - （必填）动作标签的名称
+
+### 事件 {#events}
+
+:::info[信息]
+RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)查看
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-8,10}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+~~~
+
+**更新日志：** 该方法在 v2.0 中进行了更新，移除了 `name` 和 `context` 参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/exec.md
new file mode 100644
index 0000000..8d3d6d7
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/exec.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.exec()
+title: exec 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 exec 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# api.exec()
+
+### 描述 {#description}
+
+@short: 允许触发内部事件
+
+### 用法 {#usage}
+
+~~~jsx {}
+api.exec(
+    event: string,
+    config: object
+): void;
+~~~
+
+### 参数 {#parameters}
+
+- `event` - （必填）要触发的事件
+- `config` - （必填）包含参数的配置对象（参见要触发的事件）
+
+### 事件 {#events}
+
+:::info[信息]
+RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)查看
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 设置文本字体大小
+editor.api.exec("set-font-size", {
+    fontSize: "16px"
+});
+~~~
+
+**更新日志：** 该方法在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
new file mode 100644
index 0000000..f3e87e0
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getReactiveState()
+title: getReactiveState 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 getReactiveState 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# api.getReactiveState()
+
+### 描述 {#description}
+
+@short: 返回包含 RichText 响应式属性的对象
+
+### 用法 {#usage}
+
+~~~jsx {}
+api.getReactiveState(): object;
+~~~
+
+### 返回值 {#returns}
+
+该方法返回包含以下参数的对象：
+
+~~~jsx {}
+{
+    cursorState: { subscribe: any },
+    defaultStyles {...},
+    document {...},
+    fullscreen {...},
+    history {...},
+    layoutMode {...},
+    popup {...},
+    selection {...}
+}
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5-7}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 获取 RichText 的响应式状态
+const reactive_state = editor.api.getReactiveState();
+console.log(reactive_state)
+~~~
+
+**更新日志：** 该方法在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-state.md
new file mode 100644
index 0000000..f35e257
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getState()
+title: getState 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 getState 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# api.getState()
+
+### 描述 {#description}
+
+@short: 返回包含 RichText StateStore 属性的对象
+
+### 用法 {#usage}
+
+~~~jsx {}
+api.getState(): object;
+~~~
+
+### 返回值 {#returns}
+
+该方法返回包含以下参数的对象：
+
+~~~jsx {}
+{
+    cursorState: {},
+    defaultStyles: {},
+    document: {},
+    fullscreen: boolean,
+    history: []
+    layoutMode: string,
+    popup: any,
+    selection: {}
+}
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5-7}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 获取 RichText 的状态
+const state = editor.api.getState();
+console.log(state);
+~~~
+
+**更新日志：** 该方法在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/intercept.md
new file mode 100644
index 0000000..8eacdbd
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/intercept.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.intercept()
+title: intercept 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 intercept 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# api.intercept()
+
+### 描述 {#description}
+
+@short: 允许拦截并阻止内部事件
+
+### 用法 {#usage}
+
+~~~jsx {}
+api.intercept(
+    event: string,
+    callback: function
+): void;
+~~~
+
+### 参数 {#parameters}
+
+- `event` - （必填）要触发的事件
+- `callback` - （必填）要执行的回调（回调参数取决于要触发的事件）
+
+### 事件 {#events}
+
+:::info[信息]
+RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)查看
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-10}
+// 创建 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 禁止更改字体大小
+editor.api.intercept("set-font-size", (obj) => {
+    if(obj.fontSize !== "36px" ){
+        return false;
+    }
+});
+~~~
+
+**更新日志：** 该方法在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/on.md
new file mode 100644
index 0000000..ca0c3da
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/on.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.on()
+title: on 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 on 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# api.on()
+
+### 描述 {#description}
+
+@short: 允许为内部事件附加处理程序
+
+### 用法 {#usage}
+
+~~~jsx {}
+api.on(
+    event: string,
+    handler: function
+): void;
+~~~
+
+### 参数 {#parameters}
+
+- `event` - （必填）要触发的事件
+- `handler` - （必填）要附加的处理程序（处理程序参数取决于要触发的事件）
+
+### 事件 {#events}
+
+:::info[信息]
+RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)查看
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-8}
+// 初始化 RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+// 订阅 "set-font-size" 事件
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+});
+~~~
+
+**更新日志：** 该方法在 v2.0 中进行了更新，移除了 `context` 参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/set-next.md
new file mode 100644
index 0000000..a4c75fa
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/set-next.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: api.setNext()
+title: setNext 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setNext 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# api.setNext()
+
+### 描述 {#description}
+
+@short: 允许将某个动作添加到事件总线顺序中
+
+### 用法 {#usage}
+
+~~~jsx {}
+api.setNext(next: any): void;
+~~~
+
+### 参数 {#parameters}
+
+- `next` - （必填）要纳入 **Event Bus** 顺序的动作
+
+### 示例 {#example}
+
+~~~jsx {10-11}
+const server = "https://some-backend-url";
+// 假设您有一个名为 someServerService 的自定义服务器服务类
+const someServerService = new ServerDataService(server);
+
+fetch(server + "/data").then((res) => res.json()).then((data) => {
+    const editor = new richtext.Richtext("#root", {
+        value: data
+    });
+
+    // 将 someServerService 集成到组件的事件总线顺序中
+    editor.api.setNext(someServerService);
+});
+~~~
+
+**更新日志：** 该方法在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/destructor.md
new file mode 100644
index 0000000..4061bf4
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/destructor.md
@@ -0,0 +1,28 @@
+---
+sidebar_label: destructor()
+title: destructor 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 destructor 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# destructor()
+
+### 描述 {#description}
+
+@short: 移除 RichText 的所有 HTML 元素，并解除所有相关事件
+
+### 用法 {#usage}
+
+~~~jsx {}
+destructor(): void;
+~~~
+
+### 示例 {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+
+// 移除 RichText
+editor.destructor();
+~~~
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md
new file mode 100644
index 0000000..5e43510
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: getValue()
+title: getValue 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 getValue 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# getValue()
+
+### 描述 {#description}
+
+@short: 返回 RichText 的值
+
+### 用法 {#usage}
+
+~~~jsx {}
+getValue(encoder?: any): string;
+~~~
+
+### 参数 {#parameters}
+
+- `encoder` - （可选）用于将 RichText 内容编码为自定义格式的解析器。支持以下格式：`html`（默认）和 `text`
+
+您可以通过以下方式获取所需的编码器：
+
+```jsx
+const toTextEncoder = richtext.text.toText; // text 编码器
+const toHTMLEncoder = richtext.html.toHTML; // html 编码器
+```
+
+### 示例 {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // 设置默认值（HTML 格式）
+    // 其他配置属性
+});
+
+const toTextEncoder = richtext.text.toText;
+const editor_value = editor.getValue(toTextEncoder);
+console.log(editor_value);
+~~~
+
+**更新日志：** 该方法在 v2.0 中进行了更新，移除了 `mode` 参数，新增了 `encoder` 参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-config.md
new file mode 100644
index 0000000..01beb53
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-config.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: setConfig()
+title: setConfig 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setConfig 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# setConfig()
+
+### 描述 {#description}
+
+@short: 将新的配置参数应用到 RichText
+
+### 用法 {#usage}
+
+~~~jsx {}
+setConfig(config: { [key:any]: any }): void;
+~~~
+
+### 参数 {#parameters}
+
+- `config` - （必填）RichText 配置参数对象。完整属性列表请参见[此处](api/overview/properties_overview.md)
+
+:::note[注意]
+`setConfig()` 方法会保留所有之前设置的参数，除非在 `setConfig()` 方法调用中明确提供了新值。
+:::
+
+### 示例 {#example}
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+    value: "<h1>Some text</h1>",
+    // 其他配置属性
+});
+
+editor.setConfig({
+    layoutMode: "document"
+});
+~~~
+
+**更新日志：** 该方法在 v2.0 中新增
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
new file mode 100644
index 0000000..82ebe18
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-locale.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: setLocale()
+title: setLocale 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setLocale 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# setLocale()
+
+### 描述 {#description}
+
+@short: 将新的语言环境应用到 RichText
+
+### 用法 {#usage}
+
+~~~jsx {}
+setLocale(null | locale?: object): void;
+~~~
+
+### 参数 {#parameters}
+
+- `null` - （可选）重置为默认语言环境（*英语*）
+- `locale` - （可选）要应用的新语言环境数据对象
+
+:::info[信息]
+使用 `setLocale()` 方法可将新的语言环境应用到 RichText。若要将 RichText 重置为默认语言环境，请不带参数（或传入 *null* 值）调用 `setLocale()` 方法。
+:::
+
+### 示例 {#example}
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+
+// 将 "de" 语言环境应用到 RichText
+editor.setLocale(de);
+~~~
+
+**更新日志：** 该方法在 v2.0 中新增
+
+**相关文章：** [本地化](guides/localization.md)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-value.md
new file mode 100644
index 0000000..edffb90
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-value.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: setValue()
+title: setValue 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setValue 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# setValue()
+
+### 描述 {#description}
+
+@short: 将新的值应用到 RichText
+
+### 用法 {#usage}
+
+~~~jsx {}
+setValue: (value: string, encoder?: any): void;
+~~~
+
+### 参数 {#parameters}
+
+- `value` - （必填）要插入 RichText 的值
+- `encoder` - （可选）用于将 RichText 内容编码为自定义格式的自定义解析器。支持以下格式：`html`（默认）和 `text`
+
+您可以通过以下方式获取所需的编码器：
+
+```jsx
+const fromTextEncoder = richtext.text.fromText; // text 编码器
+const fromHTMLEncoder = richtext.html.fromHTML; // html 编码器
+```
+
+### 示例 {#example}
+
+~~~jsx {7-8}
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+
+const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
+
+const fromTextEncoder = richtext.text.fromText;
+editor.setValue(editor_value, fromTextEncoder);
+~~~
+
+**更新日志：** 该方法在 v2.0 中进行了更新，移除了 `mode` 参数，新增了 `encoder` 参数
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
new file mode 100644
index 0000000..6268216
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Event Bus 方法
+title: Event Bus 方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的内部 Event Bus 方法概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# Event Bus 方法 {#event-bus-methods}
+
+本页面列出了 DHTMLX RichText 编辑器所使用的内部 Event Bus 相关方法。
+这些方法适用于高级集成场景，以及基于内部事件系统实现自定义行为。
+
+| 名称                                              | 描述                                         |
+| ------------------------------------------------- | -------------------------------------------- |
+| [](api/internal/detach.md)                         | @getshort(api/internal/detach.md)             |
+| [](api/internal/exec.md)                           | @getshort(api/internal/exec.md)               |
+| [](api/internal/intercept.md)                      | @getshort(api/internal/intercept.md)          |
+| [](api/internal/on.md)                             | @getshort(api/internal/on.md)                 |
+| [](api/internal/set-next.md)                       | @getshort(api/internal/set-next.md)           |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
new file mode 100644
index 0000000..384079b
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: 事件概览
+title: 事件概览
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的事件概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# 事件概览 {#events-overview}
+
+本页面列出了 DHTMLX RichText 编辑器触发的所有事件。
+您可以使用这些事件来扩展功能、追踪用户交互，或触发自定义行为。
+
+| 名称                                                   | 描述                                          |
+| ------------------------------------------------------ | --------------------------------------------- |
+| [](api/events/align.md)                                 | @getshort(api/events/align.md)                 |
+| [](api/events/clear-text-format.md)                     | @getshort(api/events/clear-text-format.md)     |
+| [](api/events/copy.md)                                  | @getshort(api/events/copy.md)                  |
+| [](api/events/create-new.md)                            | @getshort(api/events/create-new.md)            |
+| [](api/events/cut.md)                                   | @getshort(api/events/cut.md)                   |
+| [](api/events/delete-link.md)                           | @getshort(api/events/delete-link.md)           |
+| [](api/events/export.md)                                | @getshort(api/events/export.md)                |
+| [](api/events/import.md)                                | @getshort(api/events/import.md)                |
+| [](api/events/indent.md)                                | @getshort(api/events/indent.md)                |
+| [](api/events/insert-image.md)                          | @getshort(api/events/insert-image.md)          |
+| [](api/events/insert-line.md)                           | @getshort(api/events/insert-line.md)           |
+| [](api/events/insert-link.md)                           | @getshort(api/events/insert-link.md)           |
+| [](api/events/insert-list.md)                           | @getshort(api/events/insert-list.md)           |
+| [](api/events/outdent.md)                               | @getshort(api/events/outdent.md)               |
+| [](api/events/paste.md)                                 | @getshort(api/events/paste.md)                 |
+| [](api/events/print.md)                                 | @getshort(api/events/print.md)                 |
+| [](api/events/redo.md)                                  | @getshort(api/events/redo.md)                  |
+| [](api/events/resize-image.md)                          | @getshort(api/events/resize-image.md)          |
+| [](api/events/set-font-family.md)                       | @getshort(api/events/set-font-family.md)       |
+| [](api/events/set-font-size.md)                         | @getshort(api/events/set-font-size.md)         |
+| [](api/events/set-line-height.md)                       | @getshort(api/events/set-line-height.md)       |
+| [](api/events/set-text-color.md)                        | @getshort(api/events/set-text-color.md)        |
+| [](api/events/set-text-format.md)                       | @getshort(api/events/set-text-format.md)       |
+| [](api/events/set-text-style.md)                        | @getshort(api/events/set-text-style.md)        |
+| [](api/events/show-popup.md)                            | @getshort(api/events/show-popup.md)            |
+| [](api/events/subscript.md)                             | @getshort(api/events/subscript.md)             |
+| [](api/events/superscript.md)                           | @getshort(api/events/superscript.md)           |
+| [](api/events/toggle-fullscreen-mode.md)                | @getshort(api/events/toggle-fullscreen-mode.md)|
+| [](api/events/toggle-layout-mode.md)                    | @getshort(api/events/toggle-layout-mode.md)    |
+| [](api/events/toggle-shortcut-info.md)                  | @getshort(api/events/toggle-shortcut-info.md)  |
+| [](api/events/undo.md)                                  | @getshort(api/events/undo.md)                  |
+| [](api/events/update-link.md)                           | @getshort(api/events/update-link.md)           |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
new file mode 100644
index 0000000..d0c3310
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/main_overview.md
@@ -0,0 +1,97 @@
+---
+sidebar_label: API 概览
+title: API 概览
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的 API 概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# API 概览 {#api-overview}
+
+## RichText 构造函数 {#richtext-constructor}
+
+~~~js
+new richtext.RichText("#root", {
+    // configuration parameters
+});
+~~~
+
+**参数**：
+
+- HTML 容器（例如 CSS 选择器或 DOM 元素）
+- 配置对象（[查看属性](api/overview/properties_overview.md)）
+
+## RichText 方法 {#richtext-methods}
+
+| 名称                                          | 描述                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/methods/get-value.md)                   | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                   | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                  | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                  | @getshort(api/methods/set-locale.md)       |
+| [](api/methods/destructor.md)                  | @getshort(api/methods/destructor.md)       |
+
+## Event Bus 方法 {#event-bus-methods}
+
+| 名称                                          | 描述                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/exec.md)                       | @getshort(api/internal/exec.md)            |
+| [](api/internal/intercept.md)                  | @getshort(api/internal/intercept.md)       |
+| [](api/internal/on.md)                         | @getshort(api/internal/on.md)              |
+| [](api/internal/detach.md)                     | @getshort(api/internal/detach.md)          |
+| [](api/internal/set-next.md)                   | @getshort(api/internal/set-next.md)        |
+
+## 状态方法 {#state-methods}
+
+| 名称                                          | 描述                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/internal/get-state.md)                  | @getshort(api/internal/get-state.md)       |
+| [](api/internal/get-reactive-state.md)         | @getshort(api/internal/get-reactive-state.md) |
+
+## 事件 {#events}
+
+| 名称                                           | 描述                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/events/align.md)                        | @getshort(api/events/align.md)             |
+| [](api/events/clear-text-format.md)            | @getshort(api/events/clear-text-format.md) |
+| [](api/events/copy.md)                         | @getshort(api/events/copy.md)              |
+| [](api/events/create-new.md)                   | @getshort(api/events/create-new.md)        |
+| [](api/events/cut.md)                          | @getshort(api/events/cut.md)               |
+| [](api/events/delete-link.md)                  | @getshort(api/events/delete-link.md)       |
+| [](api/events/export.md)                       | @getshort(api/events/export.md)            |
+| [](api/events/import.md)                       | @getshort(api/events/import.md)            |
+| [](api/events/indent.md)                       | @getshort(api/events/indent.md)            |
+| [](api/events/insert-image.md)                 | @getshort(api/events/insert-image.md)      |
+| [](api/events/insert-line.md)                  | @getshort(api/events/insert-line.md)       |
+| [](api/events/insert-link.md)                  | @getshort(api/events/insert-link.md)       |
+| [](api/events/insert-list.md)                  | @getshort(api/events/insert-list.md)       |
+| [](api/events/outdent.md)                      | @getshort(api/events/outdent.md)           |
+| [](api/events/paste.md)                        | @getshort(api/events/paste.md)             |
+| [](api/events/print.md)                        | @getshort(api/events/print.md)             |
+| [](api/events/redo.md)                         | @getshort(api/events/redo.md)              |
+| [](api/events/resize-image.md)                 | @getshort(api/events/resize-image.md)      |
+| [](api/events/set-font-family.md)              | @getshort(api/events/set-font-family.md)   |
+| [](api/events/set-font-size.md)                | @getshort(api/events/set-font-size.md)     |
+| [](api/events/set-line-height.md)              | @getshort(api/events/set-line-height.md)   |
+| [](api/events/set-text-color.md)               | @getshort(api/events/set-text-color.md)    |
+| [](api/events/set-text-format.md)              | @getshort(api/events/set-text-format.md)   |
+| [](api/events/set-text-style.md)               | @getshort(api/events/set-text-style.md)    |
+| [](api/events/show-popup.md)                   | @getshort(api/events/show-popup.md)        |
+| [](api/events/subscript.md)                    | @getshort(api/events/subscript.md)         |
+| [](api/events/superscript.md)                  | @getshort(api/events/superscript.md)       |
+| [](api/events/toggle-fullscreen-mode.md)       | @getshort(api/events/toggle-fullscreen-mode.md) |
+| [](api/events/toggle-layout-mode.md)           | @getshort(api/events/toggle-layout-mode.md) |
+| [](api/events/toggle-shortcut-info.md)         | @getshort(api/events/toggle-shortcut-info.md) |
+| [](api/events/undo.md)                         | @getshort(api/events/undo.md)              |
+| [](api/events/update-link.md)                  | @getshort(api/events/update-link.md)       |
+
+## 属性 {#properties}
+
+| 名称                                          | 描述                                      |
+| ----------------------------------------------|-------------------------------------------|
+| [](api/config/default-styles.md)               | @getshort(api/config/default-styles.md)    |
+| [](api/config/fullscreen-mode.md)              | @getshort(api/config/fullscreen-mode.md)   |
+| [](api/config/image-upload-url.md)             | @getshort(api/config/image-upload-url.md)  |
+| [](api/config/layout-mode.md)                  | @getshort(api/config/layout-mode.md)       |
+| [](api/config/locale.md)                       | @getshort(api/config/locale.md)            |
+| [](api/config/menubar.md)                      | @getshort(api/config/menubar.md)           |
+| [](api/config/toolbar.md)                      | @getshort(api/config/toolbar.md)           |
+| [](api/config/value.md)                        | @getshort(api/config/value.md)             |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
new file mode 100644
index 0000000..1eb6953
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: 方法概览
+title: 方法概览
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的方法概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# 方法概览 {#methods-overview}
+
+本页面提供了 DHTMLX RichText 编辑器核心方法的摘要。
+使用本参考快速跳转至每个方法的详细说明，了解其用途并查看使用示例。
+
+| 名称                                                   | 描述                                      |
+| ------------------------------------------------------ | ----------------------------------------- |
+| [](api/methods/destructor.md)                           | @getshort(api/methods/destructor.md)       |
+| [](api/methods/get-value.md)                            | @getshort(api/methods/get-value.md)        |
+| [](api/methods/set-value.md)                            | @getshort(api/methods/set-value.md)        |
+| [](api/methods/set-config.md)                           | @getshort(api/methods/set-config.md)       |
+| [](api/methods/set-locale.md)                           | @getshort(api/methods/set-locale.md)       |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
new file mode 100644
index 0000000..8d9c4ee
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: 属性概览
+title: 属性概览
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的属性概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# 属性概览 {#properties-overview}
+
+本页面列出了初始化 DHTMLX RichText 编辑器时可使用的所有配置属性。
+通过这些属性，您可以控制布局、工具栏、内容值、本地化以及编辑器的其他方面。
+
+| 名称                                                    | 描述                                         |
+| --------------------------------------------------------|----------------------------------------------|
+| [](api/config/default-styles.md)                         | @getshort(api/config/default-styles.md)       |
+| [](api/config/fullscreen-mode.md)                        | @getshort(api/config/fullscreen-mode.md)      |
+| [](api/config/image-upload-url.md)                       | @getshort(api/config/image-upload-url.md)     |
+| [](api/config/layout-mode.md)                            | @getshort(api/config/layout-mode.md)          |
+| [](api/config/locale.md)                                 | @getshort(api/config/locale.md)               |
+| [](api/config/menubar.md)                                | @getshort(api/config/menubar.md)              |
+| [](api/config/toolbar.md)                                | @getshort(api/config/toolbar.md)              |
+| [](api/config/value.md)                                  | @getshort(api/config/value.md)                |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
new file mode 100644
index 0000000..2b8b96f
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md
@@ -0,0 +1,15 @@
+---
+sidebar_label: 状态方法
+title: 状态方法
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的内部状态方法概览。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。
+---
+
+# 状态方法 {#state-methods}
+
+本页面列出了用于访问和操作 DHTMLX RichText 编辑器内部状态的方法。
+这些方法适用于调试、与响应式系统集成，或实现高级自定义逻辑。
+
+| 名称                                                        | 描述                                             |
+| ----------------------------------------------------------- | ------------------------------------------------ |
+| [](api/internal/get-reactive-state.md)                       | @getshort(api/internal/get-reactive-state.md)     |
+| [](api/internal/get-state.md)                                | @getshort(api/internal/get-state.md)              |
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png
new file mode 100644
index 0000000..baeb296
Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png differ
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png
new file mode 100644
index 0000000..bf4312c
Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png differ
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/editor.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/editor.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/editor.png differ
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png
new file mode 100644
index 0000000..f9213b2
Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png differ
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png
new file mode 100644
index 0000000..e6d70b9
Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png differ
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png
new file mode 100644
index 0000000..8b207e6
Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png differ
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png
new file mode 100644
index 0000000..c62be84
Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png differ
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png
new file mode 100644
index 0000000..07410f7
Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png differ
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/trial_richtext.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/trial_richtext.png
new file mode 100644
index 0000000..cdee98c
Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/trial_richtext.png differ
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md
new file mode 100644
index 0000000..4a059f3
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md
@@ -0,0 +1,283 @@
+---
+sidebar_label: 配置
+title: 配置
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解配置相关内容。浏览开发指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# 配置 {#configuration}
+
+您可以通过相应的API配置RichText的外观和功能。可用的参数允许您：
+
+- 使用[`menubar`](api/config/menubar.md)属性显示/隐藏**menubar**
+- 使用[`toolbar`](api/config/toolbar.md)属性配置**toolbar**
+- 使用[`fullscreenMode`](api/config/fullscreen-mode.md)属性启用**全屏模式**
+- 使用[`layoutMode`](api/config/layout-mode.md)属性在"classic"和"document"模式之间切换**布局**
+- 使用[`value`](api/config/value.md)属性指定**初始值**
+- 使用[`locale`](api/config/locale.md)属性指定**初始语言环境**
+- 使用[`defaultStyles`](api/config/default-styles.md)属性应用**初始样式**
+
+## 布局模式 {#layout-modes}
+
+RichText编辑器有两种布局模式，您可以选择最适合创作内容的工作界面：
+
+- **"classic"**
+
+<div className="img_border">
+![经典模式](./../assets/richtext/classic_mode.png)
+</div>
+
+- **"document"**
+
+<div className="img_border">
+![文档模式](./../assets/richtext/document_mode.png)
+</div>
+
+要指定所需模式，需要在组件初始化时在RichText配置对象的[`layoutMode`](api/config/layout-mode.md)属性中进行定义：
+
+~~~jsx
+const editor = new richtext.Richtext("#root", {
+    layoutMode: "document"
+});
+~~~
+
+## Toolbar {#toolbar}
+
+RichText的toolbar由若干控件块组成，可根据您的需求进行调整。
+
+### 默认toolbar控件 {#default-toolbar-controls}
+
+您可以在RichText的toolbar中指定以下按钮和控件：
+
+| 按钮                | 描述                                                                        |
+|---------------------|-----------------------------------------------------------------------------|
+| `undo`              | 撤销最近的用户操作                                                          |
+| `redo`              | 重新应用之前撤销的操作                                                      |
+| `style`             | 允许选择文本样式（如标题、段落等）                                          |
+| `font-family`       | 更改所选文本的字体                                                          |
+| `font-size`         | 调整所选文本的大小                                                          |
+| `bold`              | 对所选文本应用粗体格式                                                      |
+| `italic`            | 对所选文本应用斜体格式                                                      |
+| `underline`         | 为所选文本添加下划线                                                        |
+| `strike`            | 应用删除线格式                                                              |
+| `subscript`         | 将文本格式化为下标                                                          |
+| `superscript`       | 将文本格式化为上标                                                          |
+| `text-color`        | 更改文本颜色                                                                |
+| `background-color`  | 更改文本的背景（高亮）颜色                                                  |
+| `align`             | 设置文本对齐方式（左对齐、居中、右对齐、两端对齐）                          |
+| `indent`            | 增加段落缩进                                                                |
+| `outdent`           | 减少段落缩进                                                                |
+| `line-height`       | 调整行间距（行高）                                                          |
+| `quote`             | 将文本格式化为块引用                                                        |
+| `bulleted-list`     | 创建无序列表                                                                |
+| `numbered-list`     | 创建有序列表                                                                |
+| `link`              | 插入或编辑超链接                                                            |
+| `image`             | 插入图片                                                                    |
+| `line`              | 插入水平线                                                                  |
+| `clear`             | 清除所选文本的所有格式                                                      |
+| `print`             | 打开打印对话框                                                              |
+| `fullscreen`        | 切换全屏模式                                                                |
+| `mode`              | 在两种视图模式之间切换：经典/文档                                           |
+| `shortcuts`         | 显示可用键盘快捷键列表                                                      |
+| `separator`         | 在控件之间添加视觉分隔符                                                    |
+
+toolbar结构通过[`toolbar`](api/config/toolbar.md)属性定义，该属性是一个包含控件名称字符串的数组。
+
+~~~jsx {2-36}
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo",
+        "redo",
+        "separator",
+        "style",
+        "separator",
+        "font-family",
+        "font-size",
+        "separator",
+        "bold",
+        "italic",
+        "underline",
+        "strike",
+        "separator",
+        "text-color",
+        "background-color",
+        "separator",
+        "align",
+        "line-height",
+        "outdent",
+        "indent",
+        "separator",
+        "bulleted-list",
+        "numbered-list",
+        "quote",
+        "separator",
+        "link",
+        "image",
+        "separator",
+        "clear",
+        "separator",
+        "fullscreen",
+        "mode"
+        // 其他按钮
+    ],
+    // 其他配置属性
+});
+~~~
+
+**相关示例：** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### 自定义toolbar控件 {#custom-toolbar-controls}
+
+您也可以在[`toolbar`](api/config/toolbar.md)属性中以对象形式指定自定义控件，支持以下参数：
+
+- `type` -（必填）指定自定义控件类型。可用类型：`"button"`、`"richselect"`、`"colorpicker"`
+- `id` -（可选）自定义控件ID（不能与现有控件ID重复）
+- `label` -（可选）按钮标签（与图标组合使用）
+- `tooltip` -（可选）鼠标悬停时显示的提示（如未指定，则使用"label"的值）
+- `css` -（可选）分配给控件的CSS类名（默认支持的类：wx-primary、wx-secondary）
+- `handler` -（可选）点击按钮时执行的回调函数
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+    toolbar: [
+        // 按钮（字符串仅代表按钮）
+        "bold",
+        "italic",
+        // 预定义按钮（用户无法为这些按钮定义其他选项（无标签、提示、选项等），只能使用 ({ type: "button", id: string })）
+        {
+            type: "button",
+            id: "fullscreen",
+        },
+        // 若要使用预定义控件，用户必须指定正确的类型（如 richselect/colorpicker）
+        // 类型不匹配将被忽略（不会添加到toolbar）
+        {
+            type: "richselect", // type: "button" - 不正确，将被忽略
+            id: "mode",
+        },
+        // 自定义按钮（支持的选项如下）
+        // 用户只能定义自定义按钮（目前不支持 richselect/colorpicker）
+        {
+            type: "button",
+            id: "some",
+            label: "Some",
+            handler: () => {/* 自定义逻辑 */}
+        },
+        {
+            type: "button",
+            id: "other",
+            icon: "wxo-help",
+            label: "Other",
+            tooltip: "Some tooltip",
+            handler: () => {/* 自定义逻辑 */}
+        }
+    ],
+    // 其他配置属性
+});
+~~~
+
+**相关示例：** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
+
+### 隐藏Toolbar {#hide-toolbar}
+
+如果需要隐藏toolbar，将[`toolbar`](api/config/toolbar.md)属性设置为`false`：
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    toolbar: false,
+    // 其他配置属性
+});
+~~~
+
+## 默认样式 {#default-styles}
+
+您可以使用[`defaultStyles`](api/config/default-styles.md)属性为编辑器中的特定块类型应用默认样式值。
+
+~~~jsx {}
+defaultStyles?: boolean | {
+    "*"?: { // 影响所有块，允许为所有块设置公共属性
+        "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;
+        background?: string;
+    },
+    p?: {
+        "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;
+        background?: string;
+    },
+    blockquote?: {
+        "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;
+        background?: string;
+    },
+    h1?: {
+        "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;
+        background?: string;
+    },
+    h2?: {
+        "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;
+        background?: string;
+    },
+    h3?: {
+        "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;
+        background?: string;
+    },
+    h4?: {
+        "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;
+        background?: string;
+    },
+    h5?: {
+        "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;
+        background?: string;
+    },
+    h6?: {
+        "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;
+        background?: string;
+    }
+};
+~~~
+
+`defaultStyles`属性**不会**直接为受影响的块设置实际的CSS样式。CSS样式需要单独应用：
+
+```html title="index.html"
+<div id="root"></div>
+```
+
+```jsx {2-9} title="index.js"
+const editor = new richtext.Richtext("#root", {
+    defaultStyles: {
+        h2: {
+            "font-family": "Roboto",
+            "font-size": "28px",
+            color: "purple",
+            background: "#FFC0CB"
+        }
+    }
+});
+```
+
+```css title="index.css"
+#root h2 {
+    font-family: Roboto;
+    font-size: 28px;
+    color: purple;
+    background: #FFC0CB;
+}
+```
+
+在此示例中，所有`h2`块均使用`"Roboto"`字体族，字体大小为28px，前景色和背景色均已更改。CSS样式同样应用于`h2`块。
+
+**相关示例：** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md
new file mode 100644
index 0000000..f98d337
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md
@@ -0,0 +1,63 @@
+---
+sidebar_label: 初始化
+title: 初始化
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解初始化相关内容。浏览开发指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# 初始化 {#initialization}
+
+本指南将详细介绍如何在页面上创建RichText，以便为您的应用程序添加RichText编辑器的功能。请按照以下步骤获取可用的组件：
+
+1. [在页面上引入RichText源文件](#including-source-files)。
+2. [为RichText创建容器](#creating-container)。
+3. [使用对象构造函数初始化RichText](#initializing-richtext)。
+
+## 引入源文件 {#including-source-files}
+
+[下载包](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml)并将其解压到项目文件夹中。
+
+要创建RichText，您需要在页面上引入2个源文件：
+
+- *richtext.js*
+- *richtext.css*
+
+请确保设置正确的源文件相对路径：
+
+~~~html title="index.html"
+<script type="text/javascript" src="./codebase/richtext.js"></script>
+<link rel="stylesheet" href="./codebase/richtext.css">
+~~~
+
+## 创建容器 {#creating-container}
+
+为RichText添加一个容器并为其指定ID，例如*"root"*：
+
+~~~jsx title="index.html"
+<div id="root"></div>
+~~~
+
+## 初始化RichText {#initializing-richtext}
+
+使用`richtext.Richtext`构造函数初始化RichText。该构造函数接受两个参数：
+
+- HTML容器（HTML容器的ID）
+- 包含配置属性的对象。[查看完整列表](#configuration-properties)
+
+~~~jsx title="index.html"
+// 创建RichText
+const editor = new richtext.Richtext("#root", {
+    // 配置属性
+});
+~~~
+
+### 配置属性 {#configuration-properties}
+
+:::note[注意]
+配置**RichText**的完整属性列表可在[**此处**](api/overview/properties_overview.md)找到。
+:::
+
+## 示例 {#example}
+
+在此代码片段中，您可以查看如何使用初始数据初始化**RichText**：
+
+<iframe src="https://snippet.dhtmlx.com/tjryzka7?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
new file mode 100644
index 0000000..f3b33ed
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md
@@ -0,0 +1,300 @@
+---
+sidebar_label: 与Angular集成
+title: 与Angular集成
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解与Angular集成的相关内容。浏览开发指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# 与Angular集成 {#integration-with-angular}
+
+:::tip[提示]
+在阅读本文档之前，您应该熟悉**Angular**的基本概念和模式。如需复习，请参阅[**Angular文档**](https://v17.angular.io/docs)。
+:::
+
+DHTMLX RichText与**Angular**兼容。我们已准备了如何在**Angular**中使用DHTMLX RichText的代码示例。更多信息，请参阅对应的[**GitHub示例**](https://github.com/DHTMLX/angular-richtext-demo)。
+
+## 创建项目 {#creating-a-project}
+
+:::info[信息]
+在开始创建新项目之前，请安装[**Angular CLI**](https://v17.angular.io/cli)和[**Node.js**](https://nodejs.org/en/)。
+:::
+
+使用Angular CLI创建一个新的**my-angular-richtext-app**项目。运行以下命令：
+
+~~~json
+ng new my-angular-richtext-app
+~~~
+
+:::note[注意]
+如果您想按照本指南操作，在创建新Angular应用时请禁用服务端渲染（SSR）和静态站点生成（SSG/Prerendering）！
+:::
+
+上述命令会安装所有必要的工具，您无需运行任何额外命令。
+
+### 安装依赖 {#installation-of-dependencies}
+
+进入新创建的应用文件夹：
+
+~~~json
+cd my-angular-richtext-app
+~~~
+
+安装依赖并启动dev server。请使用[**yarn**](https://yarnpkg.com/)包管理器：
+
+~~~json
+yarn
+yarn start
+~~~
+
+应用应在本地运行（例如`http://localhost:3000`）。
+
+## 创建RichText {#creating-richtext}
+
+现在您需要获取DHTMLX RichText的源代码。首先，停止应用并继续安装RichText包。
+
+### 步骤1：安装包 {#step-1-package-installation}
+
+下载[**试用版RichText包**](/how_to_start/#installing-richtext-via-npm-or-yarn)并按照README文件中的步骤操作。请注意，试用版RichText仅可使用30天。
+
+### 步骤2：创建组件 {#step-2-component-creation}
+
+现在您需要创建一个Angular组件，以便将RichText添加到应用中。在**src/app/**文件夹中创建**richtext**文件夹，在其中添加一个新文件并命名为**richtext.component.ts**。
+
+#### 引入源文件 {#import-source-files}
+
+打开**richtext.component.ts**文件并引入RichText源文件。请注意：
+
+- 如果您使用PRO版本并从本地文件夹安装RichText包，引入路径如下：
+
+~~~jsx
+import { Richtext} from 'dhx-richtext-package';
+~~~
+
+- 如果您使用试用版RichText，请指定以下路径：
+
+~~~jsx
+import { Richtext} from '@dhx/trial-richtext';
+~~~
+
+在本教程中，您可以查看如何配置**试用版**RichText。
+
+#### 设置容器并初始化RichText {#set-containers-and-initialize-the-richtext}
+
+要在页面上显示RichText，您需要为RichText设置一个容器，并使用对应的构造函数初始化组件：
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext", // 在"app.component.ts"文件中用作<richtext />的模板名称
+    styleUrls: ["./richtext.component.css"], // 引入css文件
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    // 初始化RichText的容器
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: Richtext;
+
+    ngOnInit() {
+        // 初始化RichText组件
+        this._editor = new Richtext(this.richtext_container.nativeElement, {});
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor(); // 销毁RichText
+    }
+}
+~~~
+
+#### 添加样式 {#adding-styles}
+
+要正确显示RichText，您需要提供相应的样式。为此，可以在**src/app/richtext/**文件夹中创建**richtext.component.css**文件，并为RichText及其容器指定重要样式：
+
+~~~css title="richtext.component.css"
+/* 引入RichText样式 */
+@import "@dhx/trial-richtext/dist/richtext.css";
+
+/* 为初始页面指定样式 */
+html,
+body{
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* 为RichText容器指定样式 */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* 为RichText widget指定样式 */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### 加载数据 {#loading-data}
+
+要向RichText中添加数据，您需要提供一个数据集。可以在**src/app/richtext/**文件夹中创建**data.ts**文件并添加一些数据：
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+然后打开***richtext.component.ts***文件，引入数据文件，并在`ngOnInit()`方法中将相应的数据属性传入RichText配置对象，如下所示：
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // 引入数据
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // 初始化数据属性
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            value
+            // 其他配置属性
+        });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+您也可以在Angular的`ngOnInit()`方法中使用[`setValue()`](api/methods/set-value.md)方法向RichText加载数据。
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // 引入数据
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: "richtext",
+    styleUrls: ["./richtext.component.css"],
+    template:  `<div class = "component_container">
+                    <div #richtext_container class = "widget"></div>
+                </div>`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+    @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+    private _editor!: RichText;
+
+    ngOnInit() {
+        const { value } = getData(); // 初始化数据属性
+        this._editor = new Richtext(this.richtext_container.nativeElement, {
+            // 其他配置属性
+        });
+
+        // 通过setValue()方法应用数据
+        this._editor.setValue({ value });
+    }
+
+    ngOnDestroy(): void {
+        this._editor.destructor();
+    }
+}
+~~~
+
+现在RichText组件已准备就绪。当元素被添加到页面时，它将使用数据初始化RichText。您也可以提供必要的配置设置。请访问我们的[RichText API文档](api/overview/main_overview.md)查看完整的可用属性列表。
+
+#### 处理事件 {#handling-events}
+
+当用户在RichText中执行某些操作时，会触发一个事件。您可以使用这些事件来检测操作并运行相应的代码。请参阅[完整事件列表](api/overview/events_overview.md)。
+
+打开**richtext.component.ts**文件，按以下方式完善`ngOnInit()`方法：
+
+~~~jsx {} title="richtext.component.ts"
+// ...
+ngOnInit() {
+    this._editor = new Richtext(this.richtext_container.nativeElement, {});
+
+    this._editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+}
+
+ngOnDestroy(): void {
+    this._editor.destructor();
+}
+~~~
+
+### 步骤3：将RichText添加到应用中 {#step-3-adding-richtext-into-the-app}
+
+要将***RichTextComponent***组件添加到应用中，打开***src/app/app.component.ts***文件，将默认代码替换为以下内容：
+
+~~~jsx {} title="app.component.ts"
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "app-root",
+    template: `<richtext/>`
+})
+export class AppComponent {
+    name = "";
+}
+~~~
+
+然后在***src/app/***文件夹中创建***app.module.ts***文件，并按如下所示指定*RichTextComponent*：
+
+~~~jsx {} title="app.module.ts"
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from "./app.component";
+import { RichTextComponent } from "./richtext/richtext.component";
+
+@NgModule({
+    declarations: [AppComponent, RichTextComponent],
+    imports: [BrowserModule],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}
+~~~
+
+最后一步是打开***src/main.ts***文件，将现有代码替换为以下内容：
+
+~~~jsx title="main.ts"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
+platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch((err) => console.error(err));
+~~~
+
+完成后，您可以启动应用，查看加载了数据的RichText页面。
+
+<div className="img_border">
+![RichText初始化](../assets/trial_richtext.png)
+</div>
+
+现在您已了解如何将DHTMLX RichText与Angular集成。您可以根据具体需求自定义代码。最终的高级示例可在[**GitHub**](https://github.com/DHTMLX/angular-richtext-demo)上找到。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
new file mode 100644
index 0000000..d6376bc
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md
@@ -0,0 +1,253 @@
+---
+sidebar_label: 与React集成
+title: 与React集成
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解与React集成的相关内容。浏览开发指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# 与React集成 {#integration-with-react}
+
+:::tip[提示]
+在阅读本文档之前，您应该熟悉[**React**](https://react.dev)的基本概念和模式。如需复习，请参阅[**React文档**](https://react.dev/learn)。
+:::
+
+DHTMLX RichText与**React**兼容。我们已准备了如何在**React**中使用DHTMLX RichText的代码示例。更多信息，请参阅对应的[**GitHub示例**](https://github.com/DHTMLX/react-richtext-demo)。
+
+## 创建项目 {#creating-a-project}
+
+:::info[信息]
+在开始创建新项目之前，请安装[**Vite**](https://vite.dev/)（可选）和[**Node.js**](https://nodejs.org/en/)。
+:::
+
+您可以创建一个基础的**React**项目，或使用**React with Vite**。将项目命名为**my-react-richtext-app**：
+
+~~~json
+npx create-react-app my-react-richtext-app
+~~~
+
+### 安装依赖 {#installation-of-dependencies}
+
+进入新创建的应用文件夹：
+
+~~~json
+cd my-react-richtext-app
+~~~
+
+安装依赖并启动dev server。请使用包管理器：
+
+- 如果您使用[**yarn**](https://yarnpkg.com/)，运行以下命令：
+
+~~~json
+yarn
+yarn start
+~~~
+
+- 如果您使用[**npm**](https://www.npmjs.com/)，运行以下命令：
+
+~~~json
+npm install
+npm run dev
+~~~
+
+应用应在本地运行（例如`http://localhost:3000`）。
+
+## 创建RichText {#creating-richtext}
+
+现在您需要获取DHTMLX RichText的源代码。首先，停止应用并继续安装RichText包。
+
+### 步骤1：安装包 {#step-1-package-installation}
+
+下载[**试用版RichText包**](/how_to_start/#installing-richtext-via-npm-or-yarn)并按照README文件中的步骤操作。请注意，试用版RichText仅可使用30天。
+
+### 步骤2：创建组件 {#step-2-component-creation}
+
+现在您需要创建一个React组件，以便将RichText添加到应用中。在***src/***文件夹中创建一个新文件并命名为***Richtext.jsx***。
+
+#### 引入源文件 {#importing-source-files}
+
+打开***Richtext.jsx***文件并引入RichText源文件。请注意：
+
+- 如果您使用PRO版本并从本地文件夹安装RichText包，引入路径如下：
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+~~~
+
+- 如果您使用试用版RichText，请指定以下路径：
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from '@dhx/trial-richtext';
+import "@dhx/trial-richtext/dist/richtext.css";
+~~~
+
+在本教程中，您可以查看如何配置**试用版**RichText。
+
+#### 设置容器并添加RichText {#setting-containers-and-adding-richtext}
+
+要在页面上显示RichText，您需要为RichText创建容器，并使用对应的构造函数初始化组件：
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css'; // 引入RichText样式
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef(); // 初始化RichText的容器
+
+    useEffect(() => {
+        // 初始化RichText组件
+        const editor = new Richtext(richtext_container.current, {});
+
+        return () => {
+            editor.destructor(); // 销毁RichText
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+#### 添加样式 {#adding-styles}
+
+要正确显示RichText，您需要在项目主CSS文件中为RichText及其容器指定重要样式：
+
+~~~css title="index.css"
+/* 为初始页面指定样式 */
+html,
+body,
+#root {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* 为RichText容器指定样式 */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* 为RichText widget指定样式 */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### 加载数据 {#loading-data}
+
+要向RichText中添加数据，您需要提供一个数据集。可以在***src/***文件夹中创建***data.js***文件并添加一些数据：
+
+~~~jsx {} title="data.js"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+然后打开***App.js***文件并引入数据。之后，您可以将数据作为**props**传入新创建的`<RichText/>`组件：
+
+~~~jsx {2,5-6} title="App.js"
+import RichText from "./Richtext";
+import { getData } from "./data";
+
+function App() {
+    const { value } = getData();
+    return <RichText value={value} />;
+}
+
+export default App;
+~~~
+
+进入***Richtext.jsx***文件，将传入的**props**应用到RichText配置对象：
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            value: props.value, // 应用值
+            // 其他配置属性
+        });
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+您也可以在React的`useEffect()`方法中使用[`setValue()`](api/methods/set-value.md)方法向RichText加载数据：
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+    let richtext_container = useRef();
+
+    let value = props.value;
+
+    useEffect(() => {
+        const editor = new Richtext(richtext_container.current, {
+            // 配置属性
+        });
+
+        editor.setValue(value);
+
+        return () => {
+            editor.destructor();
+        };
+    }, []);
+
+    return  <div className="component_container">
+                <div ref={richtext_container} className="widget"></div>
+            </div>
+}
+~~~
+
+现在RichText组件已准备就绪。当元素被添加到页面时，它将使用数据初始化RichText。您也可以提供必要的配置设置。请访问我们的[RichText API文档](api/overview/main_overview.md)查看完整的可用属性列表。
+
+#### 处理事件 {#handling-events}
+
+当用户在RichText中执行某些操作时，会触发一个事件。您可以使用这些事件来检测操作并运行相应的代码。请参阅[完整事件列表](api/overview/events_overview.md)。
+
+打开***Richtext.jsx***，按以下方式完善`useEffect()`方法：
+
+~~~jsx {} title="Richtext.jsx"
+// ...
+useEffect(() => {
+    const editor = new Richtext(richtext_container.current, {});
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+
+    return () => {
+        editor.destructor();
+    };
+}, []);
+// ...
+~~~
+
+完成后，您可以启动应用，查看加载了数据的RichText页面。
+
+<div className="img_border">
+![RichText初始化](../assets/trial_richtext.png)
+</div>
+
+现在您已了解如何将DHTMLX RichText与React集成。您可以根据具体需求自定义代码。最终的高级示例可在[**GitHub**](https://github.com/DHTMLX/react-richtext-demo)上找到。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
new file mode 100644
index 0000000..3b30375
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md
@@ -0,0 +1,263 @@
+---
+sidebar_label: 与Svelte集成
+title: 与Svelte集成
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解与Svelte集成的相关内容。浏览开发指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# 与Svelte集成 {#integration-with-svelte}
+
+:::tip[提示]
+在阅读本文档之前，您应该熟悉**Svelte**的基本概念和模式。如需复习，请参阅[**Svelte文档**](https://svelte.dev/)。
+:::
+
+DHTMLX RichText与**Svelte**兼容。我们已准备了如何在**Svelte**中使用DHTMLX RichText的代码示例。更多信息，请参阅对应的[**GitHub示例**](https://github.com/DHTMLX/svelte-richtext-demo)。
+
+## 创建项目 {#creating-a-project}
+
+:::info[信息]
+在开始创建新项目之前，请安装[**Vite**](https://vite.dev/)（可选）和[**Node.js**](https://nodejs.org/en/)。
+:::
+
+创建**Svelte**项目有以下几种方式：
+
+- 您可以使用[**SvelteKit**](https://kit.svelte.dev/)
+
+或
+
+- 您也可以使用**Svelte with Vite**（不含SvelteKit）：
+
+~~~json
+npm create vite@latest
+~~~
+
+详情请参阅[相关文章](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit)。
+
+### 安装依赖 {#installation-of-dependencies}
+
+将项目命名为**my-svelte-richtext-app**并进入应用文件夹：
+
+~~~json
+cd my-svelte-richtext-app
+~~~
+
+安装依赖并启动dev server。请使用包管理器：
+
+- 如果您使用[**yarn**](https://yarnpkg.com/)，运行以下命令：
+
+~~~json
+yarn
+yarn start
+~~~
+
+- 如果您使用[**npm**](https://www.npmjs.com/)，运行以下命令：
+
+~~~json
+npm install
+npm run dev
+~~~
+
+应用应在本地运行（例如`http://localhost:3000`）。
+
+## 创建RichText {#creating-richtext}
+
+现在您需要获取DHTMLX RichText的源代码。首先，停止应用并继续安装RichText包。
+
+### 步骤1：安装包 {#step-1-package-installation}
+
+下载[**试用版RichText包**](/how_to_start/#installing-richtext-via-npm-or-yarn)并按照README文件中的步骤操作。请注意，试用版RichText仅可使用30天。
+
+### 步骤2：创建组件 {#step-2-component-creation}
+
+现在您需要创建一个Svelte组件，以便将RichText添加到应用中。在***src/***文件夹中创建一个新文件并命名为***Richtext.svelte***。
+
+#### 引入源文件 {#importing-source-files}
+
+打开***Richtext.svelte***文件并引入RichText源文件。请注意：
+
+- 如果您使用PRO版本并从本地文件夹安装RichText包，引入路径如下：
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- 如果您使用试用版RichText，请指定以下路径：
+
+~~~html title="Richtext.svelte"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+<script>
+~~~
+
+在本教程中，您可以查看如何配置**试用版**RichText。
+
+#### 设置容器并添加RichText {#setting-containers-and-adding-richtext}
+
+要在页面上显示RichText，您需要为RichText创建容器，并使用对应的构造函数初始化组件：
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+let richtext_container; // 初始化RichText的容器
+let editor;
+
+onMount(() => {
+    // 初始化RichText组件
+    editor = new Richtext(richtext_container, {});
+});
+
+onDestroy(() => {
+    editor?.destructor(); // 销毁RichText
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+#### 加载数据 {#loading-data}
+
+要向RichText中添加数据，我们需要提供一个数据集。可以在***src/***文件夹中创建***data.js***文件并添加一些数据：
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+然后打开***App.svelte***文件，引入数据，并将其作为**props**传入新创建的`<RichText/>`组件：
+
+~~~html {} title="App.svelte"
+<script>
+import RichText from "./Richtext.svelte";
+import { getData } from "./data.js";
+
+const { value } = getData();
+</script>
+
+<RichText value={value} />
+~~~
+
+进入***Richtext.svelte***文件，将传入的**props**应用到RichText配置对象：
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        value
+        // 其他配置属性
+    })
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+您也可以在Svelte的`onMount()`方法中使用[`setValue()`](/api/methods/set-value.md)方法向RichText加载数据：
+
+~~~html {} title="Richtext.svelte"
+<script>
+import { onMount, onDestroy } from "svelte";
+import { Richtext } from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export let value;
+
+let richtext_container;
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {
+        // 其他配置属性
+    })
+
+    editor.setValue(value);
+});
+
+onDestroy(() => {
+    editor.destructor();
+});
+</script>
+
+<div class="component_container">
+    <div bind:this={richtext_container} class="widget"></div>
+</div>
+~~~
+
+现在RichText组件已准备就绪。当元素被添加到页面时，它将使用数据初始化RichText。您也可以提供必要的配置设置。请访问我们的[RichText API文档](api/overview/main_overview.md)查看完整的可用属性列表。
+
+#### 处理事件 {#handling-events}
+
+当用户在RichText中执行某些操作时，会触发一个事件。您可以使用这些事件来检测操作并运行相应的代码。请参阅[完整事件列表](api/overview/events_overview.md)。
+
+打开***Richtext.svelte***，按以下方式完善`onMount()`方法：
+
+~~~html {} title="Richtext.svelte"
+<script>
+// ...
+let editor;
+
+onMount(() => {
+    editor = new Richtext(richtext_container, {})
+
+    editor.api.on("print", () => {
+        console.log("The document is printing");
+    });
+});
+
+onDestroy(() => {
+    editor?.destructor();
+});
+</script>
+
+// ...
+~~~
+
+### 步骤3：将RichText添加到应用中 {#step-3-adding-richtext-into-the-app}
+
+要将组件添加到应用中，打开**App.svelte**文件，将默认代码替换为以下内容：
+
+~~~html title="App.svelte"
+<script>
+    import RichText from "./Richtext.svelte";
+    import { getData } from "./data.js";
+
+    const { value } = getData();
+</script>
+
+<RichText value={value}  />
+~~~
+
+完成后，您可以启动应用，查看加载了数据的RichText页面。
+
+<div className="img_border">
+![RichText初始化](../assets/trial_richtext.png)
+</div>
+
+现在您已了解如何将DHTMLX RichText与Svelte集成。您可以根据具体需求自定义代码。最终的高级示例可在[**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo)上找到。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
new file mode 100644
index 0000000..45c679f
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md
@@ -0,0 +1,279 @@
+---
+sidebar_label: 与Vue集成
+title: 与Vue集成
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解与Vue集成的相关内容。浏览开发指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# 与Vue集成 {#integration-with-vue}
+
+:::tip[提示]
+在阅读本文档之前，您应该熟悉[**Vue**](https://vuejs.org/)的基本概念和模式。如需复习，请参阅[**Vue 3文档**](https://vuejs.org/guide/introduction.html#getting-started)。
+:::
+
+DHTMLX RichText与**Vue**兼容。我们已准备了如何在**Vue 3**中使用DHTMLX RichText的代码示例。更多信息，请参阅对应的[**GitHub示例**](https://github.com/DHTMLX/vue-richtext-demo)。
+
+## 创建项目 {#creating-a-project}
+
+:::info[信息]
+在开始创建新项目之前，请安装[**Node.js**](https://nodejs.org/en/)。
+:::
+
+要创建**Vue**项目，运行以下命令：
+
+~~~json
+npm create vue@latest
+~~~
+
+该命令会安装并执行`create-vue`，即官方的**Vue**项目脚手架工具。详情请参阅[Vue.js快速开始](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)。
+
+将项目命名为**my-vue-richtext-app**。
+
+### 安装依赖 {#installation-of-dependencies}
+
+进入应用文件夹：
+
+~~~json
+cd my-vue-richtext-app
+~~~
+
+安装依赖并启动dev server。请使用包管理器：
+
+- 如果您使用[**yarn**](https://yarnpkg.com/)，运行以下命令：
+
+~~~jsx
+yarn
+yarn start // 或 yarn dev
+~~~
+
+- 如果您使用[**npm**](https://www.npmjs.com/)，运行以下命令：
+
+~~~json
+npm install
+npm run dev
+~~~
+
+应用应在本地运行（例如`http://localhost:3000`）。
+
+## 创建RichText {#creating-richtext}
+
+现在您需要获取DHTMLX RichText的源代码。首先，停止应用并继续安装RichText包。
+
+### 步骤1：安装包 {#step-1-package-installation}
+
+下载[**试用版RichText包**](/how_to_start/#installing-richtext-via-npm-or-yarn)并按照README文件中的步骤操作。请注意，试用版RichText仅可使用30天。
+
+### 步骤2：创建组件 {#step-2-component-creation}
+
+现在您需要创建一个Vue组件，以便将RichText添加到应用中。在***src/components/***文件夹中创建一个新文件并命名为***Richtext.vue***。
+
+#### 引入源文件 {#import-source-files}
+
+打开***Richtext.vue***文件并引入RichText源文件。请注意：
+
+- 如果您使用PRO版本并从本地文件夹安装RichText包，引入路径如下：
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+</script>
+~~~
+
+- 如果您使用试用版RichText，请指定以下路径：
+
+~~~html title="Richtext.vue"
+<script>
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css';
+</script>
+~~~
+
+在本教程中，您可以查看如何配置**试用版**RichText。
+
+#### 设置容器并添加RichText {#setting-containers-and-adding-richtext}
+
+要在页面上显示RichText，您需要为RichText创建容器，并使用对应的构造函数初始化组件：
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    mounted() {
+        // 初始化RichText组件
+        this.editor = new Richtext(this.$refs.richtext_container, {});
+    },
+
+    unmounted() {
+        this.editor.destructor(); // 销毁RichText
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+#### 添加样式 {#adding-styles}
+
+要正确显示RichText，您需要在项目主CSS文件中为RichText及其容器指定重要样式：
+
+~~~css title="main.css"
+/* 为初始页面指定样式 */
+html,
+body,
+#app { /* 确保使用#app根容器 */
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* 为RichText容器指定样式 */
+.component_container {
+    height: 100%;
+    margin: 0 auto;
+}
+
+/* 为RichText widget指定样式 */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
+#### 加载数据 {#loading-data}
+
+要向RichText中添加数据，您需要提供一个数据集。可以在***src/***文件夹中创建***data.js***文件并添加一些数据：
+
+~~~jsx {} title="data.ts"
+export function getData() {
+  const value = `
+    <h2>RichText 2.0</h2>
+    <p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
+    <p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
+  return { value };
+}
+~~~
+
+然后打开***App.vue***文件，引入数据，并通过内部`data()`方法进行初始化。之后，您可以将数据作为**props**传入新创建的`<RichText/>`组件：
+
+~~~html {} title="App.vue"
+<script>
+import RichText from "./components/Richtext.vue";
+import { getData } from "./data";
+
+export default {
+    components: { RichText },
+    data() {
+        const { value } = getData();
+        return { value };
+    }
+};
+</script>
+
+<template>
+    <RichText :value="value" />
+</template>
+~~~
+
+进入***Richtext.vue***文件，将传入的**props**应用到RichText配置对象：
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            value: this.value,
+            // 其他配置属性
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+您也可以在Vue的`mounted()`方法中使用[`setValue()`](api/methods/set-value.md)方法向RichText加载数据：
+
+~~~html {} title="Richtext.vue"
+<script>
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default {
+    props: ["value"],
+
+    mounted() {
+        this.editor = new Richtext(this.$refs.richtext_container, {
+            // 其他配置属性
+        });
+
+        this.editor.setValue(this.value);
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+};
+</script>
+
+<template>
+    <div class="component_container">
+        <div ref="richtext_container" class="widget"></div>
+    </div>
+</template>
+~~~
+
+现在RichText组件已准备就绪。当元素被添加到页面时，它将使用数据初始化RichText。您也可以提供必要的配置设置。请访问我们的[RichText API文档](api/overview/main_overview.md)查看完整的可用属性列表。
+
+#### 处理事件 {#handling-events}
+
+当用户在RichText中执行某些操作时，会触发一个事件。您可以使用这些事件来检测操作并运行相应的代码。请参阅[完整事件列表](api/overview/events_overview.md)。
+
+打开***Richtext.vue***，完善`mounted()`方法：
+
+~~~html {} title="Richtext.vue"
+<script>
+// ...
+export default {
+    // ...
+    mounted() {
+        this.editor = new Richtext(this.$refs.cont, {});
+
+        this.editor.api.on("print", () => {
+            console.log("The document is printing");
+        });
+    },
+
+    unmounted() {
+        this.editor.destructor();
+    }
+}
+</script>
+
+// ...
+~~~
+
+完成后，您可以启动应用，查看加载了数据的RichText页面。
+
+<div className="img_border">
+![RichText初始化](../assets/trial_richtext.png)
+</div>
+
+现在您已了解如何将DHTMLX RichText与Vue集成。您可以根据具体需求自定义代码。最终的高级示例可在[**GitHub**](https://github.com/DHTMLX/vue-richtext-demo)上找到。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md
new file mode 100644
index 0000000..a23fe50
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md
@@ -0,0 +1,474 @@
+---
+sidebar_label: 本地化
+title: 本地化
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解本地化相关内容。浏览开发指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# 本地化 {#localization}
+
+您可以对JavaScript RichText界面中的所有标签进行本地化。为此，您需要创建一个新的语言环境或修改内置语言环境，并将其应用到RichText。
+
+## 默认语言环境 {#default-locale}
+
+默认使用**英语**语言环境：
+
+~~~jsx
+const en = {
+    richtext: {
+        // 按钮/操作
+        Undo: "Undo",
+        Redo: "Redo",
+        Style: "Style",
+        "Font family": "Font family",
+        "Font size": "Font size",
+        Bold: "Bold",
+        Italic: "Italic",
+        Underline: "Underline",
+        Strikethrough: "Strikethrough",
+        Subscript: "Subscript",
+        Superscript: "Superscript",
+        "Text color": "Text color",
+        "Background color": "Background color",
+        "Left align": "Left align",
+        "Center align": "Center align",
+        "Right align": "Right align",
+        Justify: "Justify",
+        "Line height": "Line height",
+        Outdent: "Outdent",
+        Indent: "Indent",
+        "Insert link": "Insert link",
+        "Insert image": "Insert image",
+        "Insert horizontal line": "Insert horizontal line",
+        "Clear formatting": "Clear formatting",
+        Print: "Print",
+        "Fullscreen mode": "Fullscreen mode",
+        "Layout mode": "Layout mode",
+        "Classic mode": "Classic mode",
+        "Document mode": "Document mode",
+
+        // menubar专属选项
+        File: "File",
+        Import: "Import",
+        Export: "Export",
+        Edit: "Edit",
+        Cut: "Cut",
+        Copy: "Copy",
+        Paste: "Paste",
+        View: "View",
+        Insert: "Insert",
+        Format: "Format",
+        Help: "Help",
+        New: "New",
+        Link: "Link",
+        Image: "Image",
+        "Horizontal line": "Horizontal line",
+        Text: "Text",
+        "Heading 1": "Heading 1",
+        "Heading 2": "Heading 2",
+        "Heading 3": "Heading 3",
+        "Heading 4": "Heading 4",
+        "Heading 5": "Heading 5",
+        "Heading 6": "Heading 6",
+        Align: "Align",
+        Left: "Left",
+        Center: "Center",
+        Right: "Right",
+        Justified: "Justified",
+        "Keyboard shortcuts": "Keyboard shortcuts",
+
+        // 剪贴板
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation failed. Please check your browser's clipboard permissions.",
+
+        // 块样式下拉菜单
+        Heading: "Heading",
+        Quote: "Quote",
+        Paragraph: "Paragraph",
+        "Text style": "Text style",
+        Lists: "Lists",
+
+        normal: "normal",
+        default: "default",
+
+        // 列表
+        "Bulleted list": "Bulleted list",
+        "Numbered list": "Numbered list",
+
+        // 链接
+        "Enter text to display": "Enter text to display",
+        "Paste link": "Paste link",
+        "Link copied to clipboard": "Link copied to clipboard",
+
+        // 快捷键分组
+        "Text formatting": "Text formatting",
+        Editing: "Editing",
+        "Special actions": "Special actions",
+
+        // 颜色
+        Black: "Black",
+        Gray: "Gray",
+        White: "White",
+        Red: "Red",
+        Orange: "Orange",
+        Yellow: "Yellow",
+        Lime: "Lime",
+        Green: "Green",
+        Teal: "Teal",
+        Cyan: "Cyan",
+        Blue: "Blue",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // 色调
+        "Light gray": "Light gray",
+        "Medium gray": "Medium gray",
+        "Dark gray": "Dark gray",
+        "Light red": "Light red",
+        "Medium red": "Medium red",
+        "Dark red": "Dark red",
+        "Light orange": "Light orange",
+        "Medium orange": "Medium orange",
+        "Dark orange": "Dark orange",
+        "Light yellow": "Light yellow",
+        "Medium yellow": "Medium yellow",
+        "Dark yellow": "Dark yellow",
+        "Light lime": "Light lime",
+        "Medium lime": "Medium lime",
+        "Dark lime": "Dark lime",
+        "Light green": "Light green",
+        "Medium green": "Medium green",
+        "Dark green": "Dark green",
+        "Light teal": "Light teal",
+        "Medium teal": "Medium teal",
+        "Dark teal": "Dark teal",
+        "Light cyan": "Light cyan",
+        "Medium cyan": "Medium cyan",
+        "Dark cyan": "Dark cyan",
+        "Light blue": "Light blue",
+        "Medium blue": "Medium blue",
+        "Dark blue": "Dark blue",
+        "Light indigo": "Light indigo",
+        "Medium indigo": "Medium indigo",
+        "Dark indigo": "Dark indigo",
+        "Light magenta": "Light magenta",
+        "Medium magenta": "Medium magenta",
+        "Dark magenta": "Dark magenta"
+    }
+};
+~~~
+
+:::info[信息]
+除默认的***en***语言环境（*英语*）外，RichText还内置了***de***（*德语*）和***cn***（*中文*）语言环境。
+:::
+
+<details>
+<summary><b>de</b> 语言环境</summary>
+
+~~~jsx
+const de = {
+    richtext: {
+        // 按钮/操作
+        Undo: "Rückgängig",
+        Redo: "Wiederholen",
+        Style: "Stil",
+        "Font family": "Schriftart",
+        "Font size": "Schriftgröße",
+        Bold: "Fett",
+        Italic: "Kursiv",
+        Underline: "Unterstrichen",
+        Strikethrough: "Durchgestrichen",
+        Subscript: "Tiefgestellt",
+        Superscript: "Hochgestellt",
+        "Text color": "Textfarbe",
+        "Background color": "Hintergrundfarbe",
+        "Left align": "Linksbündig",
+        "Center align": "Zentriert",
+        "Right align": "Rechtsbündig",
+        Justify: "Blocksatz",
+        "Line height": "Zeilenhöhe",
+        Outdent: "Einzug verringern",
+        Indent: "Einzug erhöhen",
+        "Insert link": "Link einfügen",
+        "Insert image": "Bild einfügen",
+        "Insert horizontal line": "Horizontale Linie einfügen",
+        "Clear formatting": "Formatierung löschen",
+        Print: "Drucken",
+        "Fullscreen mode": "Vollbildmodus",
+        "Layout mode": "Layout-Modus",
+        "Classic mode": "Klassischer Modus",
+        "Document mode": "Dokumentenmodus",
+
+        // menubar专属选项
+        File: "Datei",
+        Import: "Importieren",
+        Export: "Exportieren",
+        Edit: "Bearbeiten",
+        Cut: "Ausschneiden",
+        Copy: "Kopieren",
+        Paste: "Einfügen",
+        View: "Ansicht",
+        Insert: "Einfügen",
+        Format: "Format",
+        Help: "Hilfe",
+        New: "Neu",
+        Link: "Link",
+        Image: "Bild",
+        "Horizontal line": "Horizontale Linie",
+        Text: "Text",
+        "Heading 1": "Überschrift 1",
+        "Heading 2": "Überschrift 2",
+        "Heading 3": "Überschrift 3",
+        "Heading 4": "Überschrift 4",
+        "Heading 5": "Überschrift 5",
+        "Heading 6": "Überschrift 6",
+        Align: "Ausrichten",
+        Left: "Links",
+        Center: "Zentriert",
+        Right: "Rechts",
+        Justified: "Blocksatz",
+        "Keyboard shortcuts": "Tastenkürzel",
+
+        // 剪贴板
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.",
+
+        // 块样式下拉菜单
+        Heading: "Überschrift",
+        Quote: "Zitat",
+        Paragraph: "Absatz",
+        "Text style": "Textstil",
+        Lists: "Listen",
+
+        normal: "normal",
+        default: "standard",
+
+        // 列表
+        "Bulleted list": "Liste mit Aufzählungszeichen",
+        "Numbered list": "Nummerierte Liste",
+
+        // 链接
+        "Enter text to display": "Text zum Anzeigen eingeben",
+        "Paste link": "Link einfügen",
+        "Link copied to clipboard": "Link in die Zwischenablage kopiert",
+
+        // 快捷键分组
+        "Text formatting": "Textformatierung",
+        Editing: "Bearbeitung",
+        "Special actions": "Spezielle Aktionen",
+
+        // 颜色
+        Black: "Schwarz",
+        Gray: "Grau",
+        White: "Weiß",
+        Red: "Rot",
+        Orange: "Orange",
+        Yellow: "Gelb",
+        Lime: "Limette",
+        Green: "Grün",
+        Teal: "Türkis",
+        Cyan: "Cyan",
+        Blue: "Blau",
+        Indigo: "Indigo",
+        Magenta: "Magenta",
+
+        // 色调
+        "Light gray": "Hellgrau",
+        "Medium gray": "Mittelgrau",
+        "Dark gray": "Dunkelgrau",
+        "Light red": "Hellrot",
+        "Medium red": "Mittelrot",
+        "Dark red": "Dunkelrot",
+        "Light orange": "Hellorange",
+        "Medium orange": "Mittelorange",
+        "Dark orange": "Dunkelorange",
+        "Light yellow": "Hellgelb",
+        "Medium yellow": "Mittleres Gelb",
+        "Dark yellow": "Dunkelgelb",
+        "Light lime": "Hellgrün",
+        "Medium lime": "Mittleres Grün",
+        "Dark lime": "Dunkelgrün",
+        "Light green": "Hellgrün",
+        "Medium green": "Mittleres Grün",
+        "Dark green": "Dunkelgrün",
+        "Light teal": "Hellblau",
+        "Medium teal": "Mittelblau",
+        "Dark teal": "Dunkelblau",
+        "Light cyan": "Hellcyan",
+        "Medium cyan": "Mittleres Cyan",
+        "Dark cyan": "Dunkelcyan",
+        "Light blue": "Hellblau",
+        "Medium blue": "Mittelblau",
+        "Dark blue": "Dunkelblau",
+        "Light indigo": "Hellindigo",
+        "Medium indigo": "Mittelindigo",
+        "Dark indigo": "Dunkelindigo",
+        "Light magenta": "Hellmagenta",
+        "Medium magenta": "Mittleres Magenta",
+        "Dark magenta": "Dunkelmagenta"
+    }
+};
+~~~
+</details>
+
+<details>
+<summary><b>cn</b> 语言环境</summary>
+
+~~~jsx
+const cn = {
+    richtext: {
+        // 按钮/操作,
+        Undo: "撤销",
+        Redo: "重做",
+        Style: "样式",
+        "Font family": "字体",
+        "Font size": "字体大小",
+        Bold: "粗体",
+        Italic: "斜体",
+        Underline: "下划线",
+        Strikethrough: "删除线",
+        Subscript: "下标",
+        Superscript: "上标",
+        "Text color": "文本颜色",
+        "Background color": "背景颜色",
+        "Left align": "左对齐",
+        "Center align": "居中对齐",
+        "Right align": "右对齐",
+        Justify: "两端对齐",
+        "Line height": "行高",
+        Outdent: "减少缩进",
+        Indent: "增加缩进",
+        "Insert link": "插入链接",
+        "Insert image": "插入图片",
+        "Insert horizontal line": "插入水平线",
+        "Clear formatting": "清除格式",
+        Print: "打印",
+        "Fullscreen mode": "全屏模式",
+        "Layout mode": "布局模式",
+        "Classic mode": "经典模式",
+        "Document mode": "文档模式",
+
+        // menubar专属选项
+        File: "文件",
+        Import: "导入",
+        Export: "导出",
+        Edit: "编辑",
+        Cut: "剪切",
+        Copy: "复制",
+        Paste: "粘贴",
+        View: "视图",
+        Insert: "插入",
+        Format: "格式",
+        Help: "帮助",
+        New: "新建",
+        Link: "链接",
+        Image: "图片",
+        "Horizontal line": "水平线",
+        Text: "文本",
+        "Heading 1": "标题 1",
+        "Heading 2": "标题 2",
+        "Heading 3": "标题 3",
+        "Heading 4": "标题 4",
+        "Heading 5": "标题 5",
+        "Heading 6": "标题 6",
+        Align: "对齐",
+        Left: "左",
+        Center: "居中",
+        Right: "右",
+        Justified: "两端对齐",
+        "Keyboard shortcuts": "键盘快捷键",
+
+        // 剪贴板
+        "Operation failed. Please check your browser's clipboard permissions.":
+            "操作失败。请检查浏览器的剪贴板权限。",
+
+        // 块样式下拉菜单
+        Heading: "标题",
+        Quote: "引用",
+        Paragraph: "段落",
+        "Text style": "文本样式",
+        Lists: "列表",
+
+        normal: "普通的",
+        default: "默认",
+
+        // 列表
+        "Bulleted list": "项目符号列表",
+        "Numbered list": "编号列表",
+
+        // 链接
+        "Enter text to display": "输入要显示的文本",
+        "Paste link": "粘贴链接",
+        "Link copied to clipboard": "链接已复制到剪贴板",
+
+        // 快捷键分组
+        "Text formatting": "文本格式化",
+        Editing: "编辑",
+        "Special actions": "特殊操作",
+
+        // 颜色
+        Black: "黑色",
+        Gray: "灰色",
+        White: "白色",
+        Red: "红色",
+        Orange: "橙色",
+        Yellow: "黄色",
+        Lime: "酸橙色",
+        Green: "绿色",
+        Teal: "水鸭色",
+        Cyan: "青色",
+        Blue: "蓝色",
+        Indigo: "靛蓝色",
+        Magenta: "洋红色",
+
+        // 色调
+        "Light gray": "浅灰色",
+        "Medium gray": "中灰色",
+        "Dark gray": "深灰色",
+        "Light red": "浅红色",
+        "Medium red": "中红色",
+        "Dark red": "深红色",
+        "Light orange": "浅橙色",
+        "Medium orange": "中橙色",
+        "Dark orange": "深橙色",
+        "Light yellow": "浅黄色",
+        "Medium yellow": "中黄色",
+        "Dark yellow": "深黄色",
+        "Light lime": "浅酸橙色",
+        "Medium lime": "中酸橙色",
+        "Dark lime": "深酸橙色",
+        "Light green": "浅绿色",
+        "Medium green": "中绿色",
+        "Dark green": "深绿色",
+        "Light teal": "浅水鸭色",
+        "Medium teal": "中水鸭色",
+        "Dark teal": "深水鸭色",
+        "Light cyan": "浅青色",
+        "Medium cyan": "中青色",
+        "Dark cyan": "深青色",
+        "Light blue": "浅蓝色",
+        "Medium blue": "中蓝色",
+        "Dark blue": "深蓝色",
+        "Light indigo": "浅靛蓝色",
+        "Medium indigo": "中靛蓝色",
+        "Dark indigo": "深靛蓝色",
+        "Light magenta": "浅洋红色",
+        "Medium magenta": "中洋红色",
+        "Dark magenta": "深洋红色"
+    }
+};
+~~~
+</details>
+
+## 自定义语言环境 {#custom-locale}
+
+要应用自定义语言环境，您需要：
+
+- 创建一个自定义语言环境（或修改默认语言环境），并为所有文本标签提供翻译（可以是您需要的任意语言）
+
+- 通过**RichText**的[`locale`](api/config/locale.md)属性应用新语言环境，或使用[`setLocale()`](api/methods/set-locale.md)方法
+
+## 示例 {#example}
+
+在此代码片段中，您可以查看如何在多个语言环境之间切换：
+
+<iframe src="https://snippet.dhtmlx.com/zxjrin3i?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/stylization.md
new file mode 100644
index 0000000..cb85404
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/stylization.md
@@ -0,0 +1,89 @@
+---
+title: 样式定制
+sidebar_label: 样式定制
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解样式定制相关内容。浏览开发指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# 样式定制 {#styling}
+
+您可以通过覆盖CSS变量并为widget的特定部分应用自定义样式，来完全自定义DHTMLX RichText的外观。
+
+本指南介绍如何应用**深色主题**，以及如何使用可用的类名为编辑器的menubar、toolbar、弹出层和内容区域设置样式。
+
+## 默认结构与类名 {#default-structure-and-class-names}
+
+RichText使用以下核心类来构建其UI结构：
+
+| 类名                   | 描述                                        |
+|------------------------|---------------------------------------------|
+| `.wx-richtext`         | RichText widget的根容器                     |
+| `.wx-richtext-menubar` | menubar的容器                               |
+| `.wx-richtext-menu`    | menubar下拉菜单的容器                       |
+| `.wx-richtext-toolbar` | toolbar的容器                               |
+| `.wx-editor-area`      | 主要可编辑内容区域的容器                    |
+
+您可以在自定义CSS选择器中使用这些类来覆盖RichText编辑器的外观。
+
+## 覆盖默认样式 {#overriding-default-styles}
+
+您可以通过在`#root`容器或特定子元素上重新定义CSS变量来覆盖RichText的默认样式：
+
+```html
+<div id="root" style="width: 100%; height: 100%;"></div>
+
+<style>
+  #root,
+  .wx-richtext-menu {
+    --wx-background: #404151;
+    --wx-background-alt: #212329;
+    --wx-color-primary: #14B195;
+    --wx-color-font: #FFFFFF;
+    --wx-border: 1px solid #6B6C79;
+    --wx-color-secondary-hover: rgba(20, 177, 149, 0.12);
+    --wx-button-active: rgba(20, 177, 149, 0.22);
+    --wx-icon-color: var(--wx-color-font);
+    --wx-color-font-alt: #9FA1AE;
+    --wx-color-font-disabled: #9FA1AE;
+    --wx-popup-border: var(--wx-border);
+
+    color-scheme: dark;
+  }
+
+  .wx-richtext-menu {
+    border: var(--wx-border);
+  }
+</style>
+```
+
+:::note[注意]
+这些样式将应用深色背景，调整按钮和图标颜色，并提高深色UI主题下的可见性。
+:::
+
+## 支持的CSS变量列表 {#list-of-supported-css-variables}
+
+| 变量名                       | 描述                                        |
+| ---------------------------- | ------------------------------------------- |
+| `--wx-background`            | 编辑器和弹出层的背景颜色                    |
+| `--wx-background-alt`        | menubar的备用背景颜色                       |
+| `--wx-color-primary`         | 链接、块引用及图片调整大小边框的强调色      |
+| `--wx-color-font`            | 主字体颜色（用于编辑器、menubar和toolbar）  |
+| `--wx-color-font-alt`        | 备用字体颜色                                |
+| `--wx-color-font-disabled`   | 禁用文本颜色（用于menubar和toolbar元素）    |
+| `--wx-border`                | 编辑器中使用的边框样式                      |
+| `--wx-color-secondary-hover` | menubar和toolbar中按钮的悬停状态背景        |
+| `--wx-button-active`         | menubar和toolbar中按钮的激活状态背景        |
+| `--wx-icon-color`            | toolbar下拉箭头图标的颜色                   |
+| `--wx-popup-border`          | 弹出层元素的边框                            |
+
+## 最佳实践 {#best-practices}
+
+* 使用`color-scheme: dark`改善深色模式下原生输入框的样式
+* 除非必要，避免更改与布局相关的属性（如`display`、`position`）
+
+## 在线演示 {#live-demo}
+
+在此代码片段中，您可以查看如何为RichText应用自定义样式：
+
+<iframe src="https://snippet.dhtmlx.com/q8j4qqq9?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+
+**相关文章：** [自定义配置](guides/configuration.md)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/typescript_support.md
new file mode 100644
index 0000000..0397ad3
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/typescript_support.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: TypeScript支持
+title: TypeScript支持
+description: 您可以在DHTMLX JavaScript RichText库的文档中了解如何使用TypeScript。浏览开发指南和API参考，查看代码示例和在线演示，并下载DHTMLX RichText的免费30天评估版本。
+---
+
+# TypeScript支持 {#typescript-support}
+
+从v2.0版本起，DHTMLX RichText库提供了使用TypeScript定义的能力。TypeScript的内置支持开箱即用。
+
+:::note[注意]
+您可以直接在我们的<a href="https://snippet.dhtmlx.com/ziynafp7?tag=richtext" target="_blank">Snippet Tool</a>中试用该功能。
+:::
+
+## 使用TypeScript的优势 {#advantages-of-using-typescript}
+
+为什么需要将DHTMLX RichText与TypeScript结合使用？
+
+TypeScript的主要优势在于它可以显著提高开发效率。
+
+在构建应用程序时，类型检查与自动补全相结合，可以帮助您避免潜在错误，使开发过程更加稳健。此外，TypeScript还能为您提供在使用DHTMLX RichText库API时应使用的数据类型信息。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md
new file mode 100644
index 0000000..da36a45
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md
@@ -0,0 +1,109 @@
+---
+sidebar_label: 快速开始
+title: 快速开始
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中探索如何开始使用 DHTMLX RichText。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。
+---
+
+# 快速开始
+
+本教程将清晰、全面地引导您完成在页面上获得完整可用 RichText 所需的步骤。
+
+<div className="img_border">
+![DHTMLX RichText 经典模式](./assets/richtext/classic_mode.png)
+</div>
+
+## 步骤 1：引入源文件 {#step-1-including-source-files}
+
+首先创建一个 HTML 文件并将其命名为 *index.html*，然后将 RichText 源文件引入到该文件中。
+
+需要引入以下两个文件：
+
+- RichText 的 JS 文件
+- RichText 的 CSS 文件
+
+~~~html {5-6} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <script>
+        // 您的代码将放在这里
+        </script>
+    </body>
+</html>
+~~~
+
+### 通过 npm 或 yarn 安装 RichText {#installing-richtext-via-npm-or-yarn}
+
+您可以使用 **yarn** 或 **npm** 包管理器将 JavaScript RichText 导入到您的项目中。
+
+#### 通过 npm 或 yarn 安装试用版 RichText {#installing-trial-richtext-via-npm-or-yarn}
+
+:::info[信息]
+如果您想使用 RichText 的试用版，请下载 [**试用版 RichText 包**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml)，并按照 *README* 文件中的步骤进行操作。请注意，试用版 RichText 仅可使用 30 天。
+:::
+
+#### 通过 npm 或 yarn 安装 PRO 版 RichText {#installing-pro-richtext-via-npm-or-yarn}
+
+:::info[信息]
+您可以在[客户区](https://dhtmlx.com/clients/)为 **npm** 生成登录名和密码，从而直接访问 DHTMLX 私有 **npm**。详细的安装指南也可在那里找到。请注意，访问私有 **npm** 的权限仅在您的 RichText 专有许可证有效期间内可用。
+:::
+
+## 步骤 2：创建 RichText {#step-2-creating-richtext}
+
+现在您可以将 RichText 添加到页面中。首先，为 RichText 创建 `<div>` 容器，具体步骤如下：
+
+- 在 *index.html* 文件中指定一个 DIV 容器
+- 使用 `richtext.Richtext` 构造函数初始化 RichText
+
+构造函数接受 RichText 将放置其中的 HTML 容器的任意有效 CSS 选择器以及对应的配置对象作为参数。
+
+~~~html {9,12-14} title="index.html"
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>How to Start with RichText</title>
+        <script src="./codebase/richtext.js"></script>
+        <link href="./codebase/richtext.css" rel="stylesheet">
+    </head>
+    <body>
+        <div id="root"></div>
+
+        <script>
+            const editor = new richtext.Richtext("#root", {
+                // 配置属性
+            });
+        </script>
+    </body>
+</html>
+~~~
+
+## 步骤 3：配置 RichText {#step-3-configuring-richtext}
+
+接下来，您可以指定希望 RichText 组件在初始化时具备的配置属性。
+
+要开始使用 RichText，首先需要通过 [`value`](api/config/value.md) 属性为编辑器提供初始数据。除此之外，您还可以启用 [**menubar**（菜单栏）](api/config/menubar.md)、自定义 [**toolbar**（工具栏）](api/config/toolbar.md)、指定 [**fullscreen**（全屏）](api/config/fullscreen-mode.md) 和 [**layout**（布局）](api/config/layout-mode.md) 模式、应用新的 [**locale**（语言区域）](api/config/locale.md) 以及 [**default styles**（默认样式）](api/config/default-styles.md)。
+
+~~~jsx {2-12}
+const editor = new richtext.Richtext("#root", {
+    menubar: true,
+    toolbar: false,
+    fullscreenMode: true,
+    layoutMode: "document",
+    locale: richtext.locales.cn
+    defaultStyles: {
+        h4: {
+            "font-family": "Roboto"
+        },
+        // 其他设置
+    }
+});
+~~~
+
+## 下一步 {#whats-next}
+
+就这些了。只需三个简单步骤，您就拥有了一个便捷的内容编辑工具。现在您可以开始处理您的内容，或者继续探索 JavaScript RichText 的内部世界。
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/index.md
new file mode 100644
index 0000000..8589a60
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/index.md
@@ -0,0 +1,126 @@
+---
+sidebar_label: RichText 概览
+title: RichText 概览
+slug: /
+description: 您可以在文档中查阅 DHTMLX JavaScript RichText 库的概览。浏览开发指南和 API 参考，体验代码示例与在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。
+---
+
+# RichText 概览
+
+**DHTMLX RichText** 是一款基于 JavaScript 构建的灵活、轻量级所见即所得（WYSIWYG）编辑器。它专为现代 Web 应用提供流畅的编辑体验，具备简洁的 UI、丰富的格式化功能以及对内容渲染的完全控制。无论您正在构建 CMS、内部管理工具还是嵌入式文档编辑器，RichText 都可以轻松集成并按需定制。
+
+**DHTMLX RichText** 组件包含以下功能：
+
+- 两种[**布局模式**](api/config/layout-mode.md)
+
+- 内容序列化为纯文本和 HTML 两种格式
+
+- 可配置的[**工具栏（toolbar）**](api/config/toolbar.md)，支持内置按钮和自定义按钮
+
+- 可显示或隐藏的静态[**菜单栏（menubar）**](api/config/menubar.md)
+
+- 图片上传、富文本格式化、自定义样式和全屏模式
+
+- 完整的 [API 访问](api/overview/main_overview.md)，支持[事件处理](api/overview/event_bus_methods_overview.md)、[内容操作](api/overview/methods_overview.md)和[响应式状态管理](api/overview/state_methods_overview.md)
+
+RichText 与框架无关，可轻松与 [React](guides/integration_with_react.md)、[Angular](guides/integration_with_angular.md)、[Vue](guides/integration_with_vue.md) 和 [Svelte](guides/integration_with_svelte.md) 框架集成，适用于各种前端生态系统。
+
+本文档提供了安装、配置、使用和定制的详细指导。您将找到常见场景的示例、[完整 API 参考](api/overview/main_overview.md)以及将 RichText 嵌入应用程序的最佳实践。
+
+## RichText 结构 {#richtext-structure}
+
+### 菜单栏（Menubar） {#menubar}
+
+RichText 菜单栏（menubar）提供对编辑操作的访问，例如新建文档、打印、导入/导出内容等。默认情况下，菜单栏处于隐藏状态。
+
+使用 [`menubar`](api/config/menubar.md) 属性可切换其可见性。菜单栏可以启用或禁用，但目前其内容不可配置。
+
+<div className="img_border">
+![菜单栏](./assets/richtext/menubar.png)
+</div>
+
+### 工具栏（Toolbar） {#toolbar}
+
+RichText 工具栏（toolbar）提供对文本格式化和结构编辑功能的快速访问。默认情况下，[工具栏](api/config/toolbar.md#default-config)已启用，并显示一组预定义的常用控件，如加粗、斜体、字体设置、列表格式化等。
+
+[`toolbar`](api/config/toolbar.md) 属性允许您完全自定义工具栏的内容和布局。您可以启用或禁用工具栏、重新排列默认控件，或使用预定义按钮标识符数组和自定义按钮对象定义完全自定义的工具栏。
+
+<div className="img_border">
+![工具栏](./assets/richtext/toolbar.png)
+</div>
+
+### 编辑区（Editor） {#editor}
+
+RichText 编辑区是用户创建和格式化内容的核心区域。您可以通过 [`value`](api/config/value.md)、[`layoutMode`](api/config/layout-mode.md) 和 [`defaultStyles`](api/config/default-styles.md) 等配置选项控制编辑器的外观和行为。RichText 还支持自定义样式、图片嵌入和响应式布局调整，以满足应用程序的需求。
+
+#### 两种工作模式 {#two-working-modes}
+
+DHTMLX RichText 可在"classic"（经典）和"document"（文档）两种模式下处理内容。您可以选择最适合的模式以获得舒适的文本编辑体验。使用 [`layoutMode`](api/config/layout-mode.md) 属性可以通过程序切换模式。
+
+- **"classic"（经典模式）**
+
+<div className="img_border">
+![经典模式](./assets/richtext/classic_mode.png)
+</div>
+
+- **"document"（文档模式）**
+
+<div className="img_border">
+![文档模式](./assets/richtext/document_mode.png)
+</div>
+
+## 支持的格式 {#supported-formats}
+
+RichText 编辑器支持 **HTML** 和纯文本格式的[解析](api/methods/set-value.md)和[序列化](api/methods/get-value.md)。
+
+#### HTML 格式 {#html-format}
+
+<div className="img_border">
+![HTML 格式](./assets/richtext/html_format.png)
+</div>
+
+#### 文本格式 {#text-format}
+
+<div className="img_border">
+![文本格式](./assets/richtext/text_format.png)
+</div>
+
+## 键盘快捷键 {#keyboard-shortcuts}
+
+RichText 编辑器支持一组常用键盘快捷键，以便更快速地进行格式化和编辑操作。快捷键遵循平台惯例，在 **Windows/Linux**（`Ctrl`）和 **macOS**（`⌘`）上均可使用。
+
+### 文本格式化 {#text-formatting}
+
+| 操作            | Windows/Linux   | macOS         |
+|-----------------|-----------------|---------------|
+| 加粗*           | `Ctrl+B`        | `⌘B`          |
+| 斜体            | `Ctrl+I`        | `⌘I`          |
+| 下划线           | `Ctrl+U`        | `⌘U`          |
+| 删除线           | `Ctrl+Shift+X`  | `⌘⇧X`         |
+
+### 编辑操作 {#editing}
+
+| 操作     | Windows/Linux            | macOS         |
+|----------|--------------------------|---------------|
+| 撤销     | `Ctrl+Z`                 | `⌘Z`          |
+| 重做     | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z`  |
+| 剪切     | `Ctrl+X`                 | `⌘X`          |
+| 复制     | `Ctrl+C`                 | `⌘C`          |
+| 粘贴     | `Ctrl+V`                 | `⌘V`          |
+
+### 特殊操作 {#special-actions}
+
+| 操作         | Windows/Linux | macOS |
+|--------------|---------------|-------|
+| 插入链接     | `Ctrl+K`      | `⌘K`  |
+| 打印         | `Ctrl+P`      | `⌘P`  |
+
+:::info[信息]
+未来更新中可能会引入更多快捷键。
+:::
+
+要获取 RichText 键盘快捷键的实际参考，请按 **Help（帮助）** 并选择 **Keyboard shortcuts（键盘快捷键）** 选项：
+
+<div className="img_border">
+![键盘快捷键](./assets/richtext/shortcut_reference.png)
+</div>
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/zh/docusaurus-plugin-content-docs/current/news/migration.md
new file mode 100644
index 0000000..58e418a
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/news/migration.md
@@ -0,0 +1,167 @@
+---
+sidebar_label: 迁移至新版本
+title: 迁移至新版本
+description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解迁移至新版本的相关信息。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。
+---
+
+# 迁移至新版本
+
+## 1.2 -> 2.0 {#12---20}
+
+### 属性迁移 {#properties-migration}
+
+| 旧版属性        | 替代方案                      | 说明                                      |
+| --------------- | ----------------------------- | ----------------------------------------- |
+| `customStats`   | *(已移除)*                    | 新版本 2.0 中不再可用                     |
+| `toolbarBlocks` | `toolbar`                     | 现在支持详细的工具栏结构                  |
+| `defaultStyles` | `defaultStyles`（已更新）     | 结构现在按块类型划分并基于 CSS            |
+| `mode`          | `layoutMode`                  | 替换为更严格的枚举设置                    |
+
+### - `customStats` {#--customstats}
+
+`customStats`属性已被移除。当前版本的 RichText 不再支持显示用户自定义统计信息（例如字符数、单词数、句子数）。
+
+如果您仍需计算文本指标，可以通过访问编辑器内容并手动处理来在外部实现：
+
+```jsx
+const content = editor.getValue();
+const wordCount = content.split(/\s+/).length;
+```
+
+### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) {#--toolbarblocks--toolbar}
+
+在 **2.0** 之前，用户只能指定带有控件的块
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+  toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"]
+});
+```
+
+从 **2.0** 开始，用户可以指定独立的控件
+```jsx{2-4} title="From 2.0"
+new richtext.Richtext("#root", {
+    toolbar: [
+        "undo", "style", "bold", "italic", "underline", "text-color",
+        "align", "link"
+    ]
+});
+```
+
+### - [`defaultStyles`](api/config/default-styles.md) {#--defaultstyles}
+
+在 **2.0** 之前，用户可以为工具栏选择控件定义默认值
+```jsx title="Before 2.0"
+defaultStyles: {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+}
+```
+
+从 **2.0** 开始，用户可以为特定块类型指定默认样式值
+```jsx title="From 2.0"
+defaultStyles: {
+  "*": {
+    "font-family": "Tahoma",
+    "font-size": "14px"
+  },
+  h1: {
+    "font-size": "32px",
+    "color": "#333"
+  }
+}
+```
+
+:::note[注意]
+使用`*`为所有块定义基础默认值，然后覆盖特定元素（p、h1、blockquote 等）。
+:::
+
+### - `mode` → [`layoutMode`](api/config/layout-mode.md) {#--mode--layoutmode}
+
+```jsx{2} title="Before 2.0"
+new dhx.RichText("#root", {
+    mode: "document"
+});
+```
+
+```jsx{2} title="From 2.0"
+new Richtext("#root", {
+    layoutMode: "document" // or "classic"
+});
+```
+
+新的[`layoutMode`](api/config/layout-mode.md)严格支持`"classic"`和`"document"`值。
+
+### 方法迁移 {#methods-migration}
+
+| 旧版方法                | 新版等价方法                         | 说明                                                          |
+| ----------------------- | ------------------------------------ | ------------------------------------------------------------- |
+| `getValue(mode)`        | `getValue(encoder)`                  | 编码器替代字符串模式；编码器需单独导入                        |
+| `setValue(value, mode)` | `setValue(value, encoder)`           | 编码器替代字符串模式；编码器需单独导入                        |
+| `getStats()`            | *已移除*                             | 无替代方案；需手动实现逻辑                                    |
+| `getEditorAPI()`        | *已移除*                             | 内部方法；请改用公共 API                                      |
+| `fire()`                | *已移除*                             | 由`exec()`和`intercept()`替代                                 |
+| `on()`、`detach()`      | ✅ 已保留（`api.on`、`api.detach`）  | 现通过`richtext.api`访问                                      |
+| `fullScreen()`          | *已移除*                             | 使用`fullscreenMode`配置属性                                  |
+| `exitFullScreen()`      | *已移除*                             | 使用`fullscreenMode`配置属性                                  |
+| `paint()`               | *已移除*                             | 不再需要                                                      |
+| `destructor()`          | ✅ 仍可用                            | 未变更                                                        |
+| `setConfig()`           | ✅ 新增                              | 支持实时配置更新                                              |
+| `setLocale()`           | ✅ 新增                              | 支持动态切换语言区域                                          |
+| `getReactiveState()`    | ✅ 新增                              | 支持响应式状态追踪                                            |
+| `getState()`            | ✅ 新增                              | 提供当前静态配置状态                                          |
+| `intercept()`           | ✅ 新增                              | 拦截内部操作                                                  |
+| `exec()`                | ✅ 新增                              | 执行内部操作                                                  |
+
+### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) {#--setvalue--getvalue}
+
+```jsx title="Before 2.0"
+...
+editor.setValue("<p>Hello</p>", "html");
+editor.getValue("text");
+```
+
+```jsx title="From 2.0"
+const fromTextEncoder = richtext.text.fromText;
+const fromHTMLEncoder = richtext.html.fromHTML;
+
+const toTextEncoder = richtext.text.toText;
+const toHTMLEncoder = richtext.html.toHTML;
+...
+editor.setValue("<p>Hello</p>", fromHTMLEncoder);
+editor.getValue(toTextEncoder);
+```
+
+:::note[注意]
+您仍然可以在不传入编码器的情况下调用`getValue()`和`setValue()`——默认使用 HTML
+:::
+
+### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) {#--on--detach}
+
+```jsx title="Before 2.0"
+editor.events.on("Change", function(action, canUndo, canRedo){
+  // your code here
+});
+
+editor.events.detach("Change");
+```
+
+```jsx title="From 2.0"
+editor.api.on("set-font-size", (obj) => {
+    console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+```
+
+### - `fire()` → 使用 [`exec()`](api/internal/exec.md) 和 [`intercept()`](api/internal/intercept.md) {#--fire--use-exec-and-intercept}
+
+```jsx title="Before 2.0"
+editor.events.fire("some-event", [data]);
+```
+
+```jsx title="From 2.0"
+editor.api.exec("some-event", obj);
+
+// Preventing execution
+editor.api.intercept("some-event", (obj) => false);
+```
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/zh/docusaurus-plugin-content-docs/current/news/whats_new.md
new file mode 100644
index 0000000..70fc242
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/news/whats_new.md
@@ -0,0 +1,192 @@
+---
+sidebar_label: 新功能
+title: 新功能
+description: 您可以在 DHTMLX JavaScript UI 库的文档中探索 DHTMLX RichText 的新功能及其发布历史。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。
+---
+
+## 版本 2.0.5 {#version-205}
+
+发布于 2026 年 3 月 6 日
+
+### 修复 {#fixes}
+
+- IME 输入未被正确处理
+- 基于组合输入法的输入（例如，桌面端中文、日文、韩文）未被正确处理
+- 解析 HTML 时忽略了`margin-left`和`line-height`属性
+- 内联元素从块级父元素继承属性
+- 无法在两个编辑器实例之间复制文本
+- 当两个（或更多）编辑器实例处于活动状态时，选区处理不正确
+- 当段落中唯一内容为图片时，光标定位不正确
+- 下标和上标元素无限嵌套
+- 粘贴图片时将其内联，而非先上传
+- 在特定位置（首行或末行）无法移除空的内联块
+- 编辑器在输入时不会滚动到光标位置
+- Android 上的输入未被正确处理
+- HR 元素的选区处理不正确
+- 初始值为空时渲染不正确
+- 复制内容时，若包含自闭合块则可能失败
+- Chrome：无法从上下文菜单插入 emoji
+- Firefox：全选（CTRL+A）未被正确处理
+
+## 版本 2.0.4 {#version-204}
+
+发布于 2025 年 10 月 15 日
+
+### 修复 {#fixes-1}
+
+- 段落的范围选区不正确
+- 链接弹出框在紧邻已链接图片时不显示
+- 工具栏初始值与实际内容不匹配
+
+## 版本 2.0.3 {#version-203}
+
+发布于 2025 年 8 月 27 日
+
+### 修复 {#fixes-2}
+
+- 点击水平线导致脚本错误
+- 默认行高不正确
+- 内容样式包含重复选择器
+- 解析 HTML 时纯文本块忽略样式变更
+- 解析器忽略 HTML 中转义的字体名称
+- 解析器忽略 HTML 中的`margin-left`和`line-height`属性
+
+## 版本 2.0.2 {#version-202}
+
+发布于 2025 年 8 月 4 日
+
+### 修复 {#fixes-3}
+
+- 更新了包内容
+
+## 版本 2.0.1 {#version-201}
+
+发布于 2025 年 7 月 30 日
+
+### 修复 {#fixes-4}
+
+- 更新`defaultStyles`属性的类型定义
+
+## 版本 2.0 {#version-20}
+
+发布于 2025 年 7 月 30 日
+
+:::note[注意]
+v1.2 的 API 与 v2.0 不兼容。请参阅[**迁移指南**](news/migration.md)获取更多信息。
+:::
+
+### 新功能 {#new-functionality}
+
+- **新一代文本渲染**
+  通过我们全新的引擎，体验更流畅、更快速、更精准的文本渲染
+
+- **精细化工具栏配置**
+  完全掌控工具栏：
+  - 定义[各个工具栏控件](guides/configuration.md/#default-toolbar-controls)及其顺序
+  - 添加[自定义控件](guides/configuration.md/#custom-toolbar-controls)
+
+- **可选的 [menubar（菜单栏）](api/config/menubar.md)**
+  在编辑器顶部启用经典菜单样式界面
+
+- **增强的[文档模式](guides/configuration.md/#layout-modes)**
+  新增对不同文档尺寸的支持
+
+- **图片支持**
+  - 插入图片并支持[上传功能](api/config/image-upload-url.md)
+  - 以交互方式[调整图片大小](api/events/resize-image.md)
+
+- **改进的链接体验**
+  重新设计的[弹出交互](api/events/show-popup.md)，提升易用性
+
+- **新格式化工具**
+  - 文本对齐：**两端对齐**
+  - 插入[水平线](api/events/insert-line.md)
+  - [增加缩进](api/events/indent.md) / [减少缩进](api/events/outdent.md)
+  - 设置[行高](api/events/set-line-height.md)
+  - 应用[下标](api/events/subscript.md) / [上标](api/events/superscript.md)
+
+- **列表管理**
+  在内容中轻松[插入和管理列表](api/events/insert-list.md)
+
+- **导入/导出与打印**
+  - [导入 DOCX](api/events/import.md) 文件
+  - 将内容[导出](api/events/export.md)为 DOCX 或 PDF
+  - 直接从编辑器[打印](api/events/print.md)文档
+
+- **键盘快捷键**
+  扩展了对常用格式化和编辑快捷键的支持
+
+### 新增 API {#new-api}
+
+#### 新增属性 {#new-properties}
+
+- [`fullscreenMode`](api/config/fullscreen-mode.md)
+- [`imageUploadUrl`](api/config/image-upload-url.md)
+- [`layoutMode`](api/config/layout-mode.md)
+- [`locale`](api/config/locale.md)
+- [`menubar`](api/config/menubar.md)
+- [`toolbar`](api/config/toolbar.md)
+- [`value`](api/config/value.md)
+
+#### 新增方法 {#new-methods}
+
+- [`setConfig()`](api/methods/set-config.md) — 动态更新配置
+- [`setLocale()`](api/methods/set-locale.md) — 动态切换语言区域
+
+#### 新增内部方法 {#new-internal-methods}
+
+- [`api.exec()`](api/internal/exec.md)
+- [`api.intercept()`](api/internal/intercept.md)
+- [`api.getReactiveState()`](api/internal/get-reactive-state.md)
+- [`api.getState()`](api/internal/get-state.md)
+
+#### 新增事件 {#new-events}
+
+新增事件的完整列表请参见[此处](api/overview/events_overview.md)
+
+### 更新 API {#updated-api}
+
+#### 更新属性 {#updated-properties}
+
+- [`defaultStyles`](api/config/default-styles.md)
+
+#### 更新方法 {#updated-methods}
+
+- [`setValue()`](api/methods/set-value.md)
+- [`getValue()`](api/methods/get-value.md)
+
+#### 更新内部方法 {#updated-internal-methods}
+
+- [`api.detach()`](api/internal/detach.md)
+- [`api.on()`](api/internal/on.md)
+
+## 已移除的 API {#removed-api}
+
+:::warning[警告]
+请勿在您的项目中使用已移除的 API！<br/> 请参阅[迁移](news/migration.md)主题获取更多信息。
+:::
+
+### [已移除的属性](news/migration.md#properties-migration) {#removed-properties}
+
+- [`customStats`](news/migration.md#--customstats)
+- [`mode`](news/migration.md#--mode--layoutmode)
+- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar)
+
+### [已移除的方法](news/migration.md#methods-migration) {#removed-methods}
+
+- `exitFullScreen()`
+- `fullScreen()`
+- `getEditorAPI()`
+- `getStats()`
+- `paint()`
+
+### 已移除的内部方法 {#removed-internal-methods}
+
+- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept)
+
+### 已移除的事件 {#removed-events}
+
+- `Action`
+- `Change`
+- `selectionChange`
+- `selectionRefresh`
diff --git a/i18n/zh/docusaurus-theme-classic/footer.json b/i18n/zh/docusaurus-theme-classic/footer.json
new file mode 100644
index 0000000..cb5c883
--- /dev/null
+++ b/i18n/zh/docusaurus-theme-classic/footer.json
@@ -0,0 +1,62 @@
+{
+  "link.title.Development center": {
+    "message": "Development center",
+    "description": "The title of the footer links column with title=Development center in the footer"
+  },
+  "link.title.Community": {
+    "message": "Community",
+    "description": "The title of the footer links column with title=Community in the footer"
+  },
+  "link.title.Company": {
+    "message": "Company",
+    "description": "The title of the footer links column with title=Company in the footer"
+  },
+  "link.item.label.Download RichText": {
+    "message": "Download RichText",
+    "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml"
+  },
+  "link.item.label.Examples": {
+    "message": "Examples",
+    "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext"
+  },
+  "link.item.label.Blog": {
+    "message": "Blog",
+    "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/"
+  },
+  "link.item.label.Forum": {
+    "message": "Forum",
+    "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/"
+  },
+  "link.item.label.GitHub": {
+    "message": "GitHub",
+    "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX"
+  },
+  "link.item.label.Youtube": {
+    "message": "Youtube",
+    "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx"
+  },
+  "link.item.label.Facebook": {
+    "message": "Facebook",
+    "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx"
+  },
+  "link.item.label.Twitter": {
+    "message": "Twitter",
+    "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx"
+  },
+  "link.item.label.Linkedin": {
+    "message": "Linkedin",
+    "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/"
+  },
+  "link.item.label.About us": {
+    "message": "About us",
+    "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml"
+  },
+  "link.item.label.Contact us": {
+    "message": "Contact us",
+    "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml"
+  },
+  "link.item.label.Licensing": {
+    "message": "Licensing",
+    "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses"
+  }
+}
diff --git a/i18n/zh/docusaurus-theme-classic/navbar.json b/i18n/zh/docusaurus-theme-classic/navbar.json
new file mode 100644
index 0000000..cdc91aa
--- /dev/null
+++ b/i18n/zh/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,26 @@
+{
+  "title": {
+    "message": "JavaScript RichText Documentation",
+    "description": "The title in the navbar"
+  },
+  "logo.alt": {
+    "message": "DHTMLX RichText Documentation",
+    "description": "The alt text of navbar logo"
+  },
+  "item.label.Examples": {
+    "message": "Examples",
+    "description": "Navbar item with label Examples"
+  },
+  "item.label.Forum": {
+    "message": "Forum",
+    "description": "Navbar item with label Forum"
+  },
+  "item.label.Support": {
+    "message": "Support",
+    "description": "Navbar item with label Support"
+  },
+  "item.label.Download": {
+    "message": "Download",
+    "description": "Navbar item with label Download"
+  }
+}
diff --git a/plugins/dhx-md-data-transformer-plugin.js b/plugins/dhx-md-data-transformer-plugin.js
index 789ab3b..31188d5 100644
--- a/plugins/dhx-md-data-transformer-plugin.js
+++ b/plugins/dhx-md-data-transformer-plugin.js
@@ -17,7 +17,7 @@ module.exports = (context, options) => {
         module: {
           rules: [
             {
-              include: [path.resolve(siteDir, 'docs')],
+              include: [path.resolve(siteDir, 'docs'), path.resolve(siteDir, 'i18n')],
               test: /(\.mdx?)$/,
               use: [
                 {