### Install Dependencies and Start Dev Server (NPM)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_svelte.md

Commands to install project dependencies and start the development server using NPM package manager.

```json
npm install
npm run dev
```

--------------------------------

### Install Dependencies and Start Dev Server (Yarn)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_svelte.md

Commands to install project dependencies and start the development server using Yarn package manager.

```json
yarn
yarn start
```

--------------------------------

### Install Dependencies and Start Dev Server (NPM)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_vue.md

Commands to install project dependencies and start the development server using NPM. Assumes the project has already been created.

```json
npm install
npm run dev
```

--------------------------------

### Clone and Run DHTMLX RichText Documentation Locally

Source: https://github.com/dhtmlx/docs-richtext/blob/master/README.md

Steps to clone the documentation repository, install dependencies using yarn, and start the local development server to explore the DHTMLX RichText documentation.

```bash
$ git clone git@github.com:DHTMLX/docs-richtext.git
$ cd docs-richtext
$ yarn
$ yarn start
```

--------------------------------

### Install Dependencies (NPM)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_react.md

Commands to install project dependencies and start the development server using NPM.

```json
npm install
npm run dev
```

--------------------------------

### Install Dependencies (Yarn)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_react.md

Commands to install project dependencies and start the development server using Yarn.

```json
yarn
yarn start
```

--------------------------------

### Navigate and Install Dependencies

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_angular.md

Commands to navigate into the newly created Angular project directory and install project dependencies using yarn, then start the development server.

```bash
cd my-angular-richtext-app
yarn
yarn start
```

--------------------------------

### Install Dependencies and Start Dev Server (Yarn)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_vue.md

Commands to install project dependencies and start the development server using Yarn. Assumes the project has already been created.

```jsx
yarn
yarn start // or yarn dev
```

--------------------------------

### Richtext Toolbar Configuration Example

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/config/toolbar.md

A comprehensive example of configuring the dhtmlx-richtext toolbar, including predefined buttons, separators, and custom buttons with all available options like id, icon, css, label, tooltip, and handler.

```jsx
// initialize RichText
new richtext.Richtext("#root", {
    toolbar: [
        "bold",
        "italic",
        "separator",
        // custom buttons (all supported options are used below)
        // user can only define custom buttons (no richselect/colorpicker support at the moment)
        {
            type: "button",
            id: "btn1", // button id (cannot overlap with existing button ids if you want to apply custom logic)
            icon: "wxo-help", // button icon (combines with label)
            css: "rounded", // css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
            label: "Custom button", // button label (combines with icon)
            tooltip: "Some tooltip", // tooltip displayed on hover (if not specified, uses the value from "label")
            handler: () => ..., // custom logic attached to this button
        }
    ]
    // other configuration properties
});
```

--------------------------------

### Toolbar Usage Example

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/config/toolbar.md

Example of how to configure the toolbar with specific buttons like 'bold', 'italic', and a 'separator'. This demonstrates the array-based configuration for the toolbar property.

```jsx
new richtext.Richtext("#root", {
    toolbar: [
        "bold",
        "italic",
        "separator",
        // other buttons
    ],
    // other configuration properties
});
```

--------------------------------

### RichText Integration with Frameworks

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/index.md

Guides for integrating DHTMLX RichText with popular JavaScript frameworks.

```APIDOC
integration_with_react:
  description: Instructions and examples for integrating DHTMLX RichText into React applications.

integration_with_angular:
  description: Instructions and examples for integrating DHTMLX RichText into Angular applications.

integration_with_vue:
  description: Instructions and examples for integrating DHTMLX RichText into Vue.js applications.

integration_with_svelte:
  description: Instructions and examples for integrating DHTMLX RichText into Svelte applications.

```

--------------------------------

### Initialize RichText Editor (HTML/JavaScript)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/how_to_start.md

This snippet demonstrates how to initialize the DHTMLX RichText editor. It involves creating a DIV container in the HTML and then using the `richtext.Richtext` constructor with a CSS selector and configuration object.

```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>
```

--------------------------------

### Create Svelte Project with Vite

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_svelte.md

Command to create a new Svelte project using Vite. This is an optional but recommended way to start a Svelte project.

```json
npm create vite@latest
```

--------------------------------

### RichText Toolbar Customization Example

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/index.md

Demonstrates how to customize the DHTMLX RichText toolbar with predefined and custom buttons.

```javascript
const editor = new dhx.RichText("#editor", {
    toolbar: {
        items: [
            "bold", "italic", "underline",
            {
                id: "customButton",
                icon: "mdi mdi-star",
                tooltip: "My Custom Button",
                click: function() {
                    alert("Custom button clicked!");
                }
            }
        ]
    }
});

```

--------------------------------

### Example Initialization with defaultStyles

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/config/default-styles.md

An example of initializing the DHTMLX RichText editor with specific default styles for heading levels h4, h5, and h6, setting their font-family to 'Roboto'.

```jsx
// initialize RichText
new richtext.Richtext("#root", {
    defaultStyles: {
        h4: {
            "font-family": "Roboto"
        },
        h5: {
            "font-family": "Roboto"
        },
        h6: {
            "font-family": "Roboto"
        }
    },
    // other configuration properties
});
```

--------------------------------

### Configure RichText Editor Properties (JSX)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/how_to_start.md

This snippet illustrates how to configure various properties of the DHTMLX RichText editor during initialization. It includes settings for the menubar, toolbar, fullscreen mode, layout mode, locale, and default styles.

```jsx
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
    }
});
```

--------------------------------

### Include RichText Source Files (HTML)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/how_to_start.md

This snippet shows how to include the necessary DHTMLX RichText JavaScript and CSS files in an HTML document. It sets up the basic structure for a web page where the RichText editor will be integrated.

```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>
```

--------------------------------

### Get RichText Editor State Example

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/internal/get-state.md

Demonstrates how to initialize the DHTMLX RichText editor and then use the api.getState() method to retrieve its current state. The state object is then logged to the console.

```jsx
const editor = new richtext.Richtext("#root", {
    // configuration properties
});
const state = editor.api.getState();
console.log(state);
```

--------------------------------

### Custom Locale Example

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/localization.md

This snippet demonstrates how to switch between different locales in dhtmlx-richtext. It shows the use of the `locale` configuration property and the `setLocale()` method for applying custom translations.

```javascript
const locale = {
    "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": "深洋红色"
};

// Applying the custom locale via configuration
const editor = new dhx.RichText("#editor", {
    locale: locale
});

// Or using the setLocale() method
// editor.setLocale(locale);
```

--------------------------------

### Subscribing to the copy Event

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/events/copy.md

Demonstrates how to initialize the DHTMLX RichText editor and subscribe to its 'copy' event using the `editor.api.on()` method. This example logs a message to the console when the event is triggered.

```jsx
// 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");
});
```

--------------------------------

### Create Angular Project

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_angular.md

Command to create a new Angular project using the Angular CLI. Ensure to disable SSR/Prerendering if following this guide.

```bash
ng new my-angular-richtext-app
```

--------------------------------

### Angular App Component Setup

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_angular.md

This snippet shows how to import and use the RichTextComponent in the main Angular application component. It sets up the basic template to render the RichText component.

```jsx
import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    template: `<richtext/>`
})
export class AppComponent {
    name = "";
}
```

--------------------------------

### Handle RichText Events

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_svelte.md

Demonstrates how to attach event listeners to the RichText component in Svelte. The example shows how to listen for a 'print' event and log a message to the console when it occurs.

```html
<script>
// ...
let editor;

onMount(() => {
    editor = new Richtext(richtext_container, {})

    editor.api.on("print", () => {
        console.log("The document is printing");
    });
});

onDestroy(() => {
    editor?.destructor();
});
</script>

// ...
```

--------------------------------

### DHTMLX RichText API Documentation

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/news/whats_new.md

This section provides comprehensive API documentation for DHTMLX RichText, covering new properties, methods, internal methods, events, and updated API elements. It also lists removed API components and links to migration guides for compatibility information.

```APIDOC
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 — Dynamically update configuration
- setLocale(): api/methods/set-locale.md — Change locale on the fly

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:
A full list of new events is available here: api/overview/events_overview.md

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

Removed Properties:
- customStats: news/migration.md#--customstats
- mode: news/migration.md#--mode--layoutmode
- toolbarBlocks: news/migration.md#--toolbarblocks--toolbar

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
```

--------------------------------

### Import RichText Source Files (PRO Version)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_vue.md

Vue component script section showing how to import DHTMLX RichText source files when using the PRO version installed from a local folder.

```html
<script>
import { Richtext} from 'dhx-richtext-package';
import 'dhx-richtext-package/dist/richtext.css';
</script>
```

--------------------------------

### Handling toggle-shortcut-info Event

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/events/toggle-shortcut-info.md

Demonstrates how to subscribe to the 'toggle-shortcut-info' event using the DHTMLX RichText API and how to trigger the event with a specific mode. This example shows logging the event object and a confirmation message.

```jsx
// 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 });
```

--------------------------------

### Export Event Handling and Triggering

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/events/export.md

Demonstrates how to subscribe to the 'export' event using the `editor.api.on()` method and how to trigger the export functionality with specific options using `editor.api.exec()`. This example shows exporting as a PDF file without direct download.

```jsx
// 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"
});
```

--------------------------------

### Subscribe and Trigger Superscript Event

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/events/superscript.md

Demonstrates how to initialize DHTMLX RichText, subscribe to the 'superscript' event using the Event Bus, and trigger the event via an API call. This example shows practical application of the event handling.

```javascript
// 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", {});
```

--------------------------------

### DHTMLX RichText Core Methods

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/overview/methods_overview.md

This section outlines the primary methods for interacting with the DHTMLX RichText editor. It includes methods for initialization, value management, configuration, and localization. Refer to individual method documentation for detailed usage, parameters, and return values.

```APIDOC
DHTMLX RichText Methods:

Destructor:
  destructor()
    - Destroys the RichText editor instance and cleans up resources.
    - No parameters.
    - Returns: undefined

Get Value:
  getValue()
    - Returns the current content of the RichText editor.
    - No parameters.
    - Returns: string (HTML content)

Set Value:
  setValue(html: string)
    - Sets the content of the RichText editor.
    - Parameters:
      - html: The HTML string to set as the editor's content.
    - Returns: undefined

Set Configuration:
  setConfig(config: object)
    - Updates the configuration of the RichText editor.
    - Parameters:
      - config: An object containing configuration options.
    - Returns: undefined

Set Locale:
  setLocale(locale: string | object)
    - Sets the locale for the RichText editor.
    - Parameters:
      - locale: The locale string (e.g., 'en') or a locale object.
    - Returns: undefined
```

--------------------------------

### Include RichText Source Files

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/initialization.md

Includes the necessary JavaScript and CSS files for the DHTMLX RichText editor. Ensure the paths to 'richtext.js' and 'richtext.css' are correct relative to your project structure.

```html
<script type="text/javascript" src="./codebase/richtext.js"></script>  
<link rel="stylesheet" href="./codebase/richtext.css">
```

--------------------------------

### RichText Content Manipulation

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/index.md

API methods for getting and setting the content of the RichText editor in different formats.

```APIDOC
get-value(type):
  description: Serializes the current content of the editor to the specified format.
  parameters:
    - name: type
      description: The desired output format ('html' or 'text').
      type: string
      required: true
  returns:
    description: The serialized content of the editor.
    type: string

set-value(value, type):
  description: Parses and sets the editor content from the specified format.
  parameters:
    - name: value
      description: The content to set.
      type: string
      required: true
    - name: type
      description: The format of the content ('html' or 'text').
      type: string
      required: true

```

--------------------------------

### setValue Example

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/methods/set-value.md

Demonstrates how to use the setValue method with a text encoder to set the content of a DHTMLX RichText editor.

```jsx
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; // text encoder
editor.setValue(editor_value, fromTextEncoder);
```

--------------------------------

### RichText Constructor

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/overview/main_overview.md

Initializes a new instance of the DHTMLX RichText editor. It requires an HTML container element and an optional configuration object for customization.

```js
new richtext.RichText("#root", {
    // configuration parameters
});
```

--------------------------------

### Custom Stats Removal Example

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/news/migration.md

Demonstrates how to manually calculate word count after the removal of the `customStats` property in DHTMLX RichText v2.0.

```jsx
const content = editor.getValue();
const wordCount = content.split(/\s+/).length;
```

--------------------------------

### Angular Main Entry Point

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_angular.md

This snippet shows the main entry point for bootstrapping the Angular application. It uses platformBrowserDynamic to launch the AppModule and includes basic error handling.

```jsx
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
```

--------------------------------

### Applying a Locale

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/methods/set-locale.md

Example of initializing the DHTMLX RichText editor and then applying a specific locale (e.g., 'de') using the setLocale method.

```jsx
const editor = new richtext.Richtext("#root", {
    // configuration properties
});

// apply the "de" locale to RichText
editor.setLocale(de);
```

--------------------------------

### Create Vue Project

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_vue.md

Command to create a new Vue.js project using the official scaffolding tool. This sets up the basic project structure and configuration.

```json
npm create vue@latest
```

--------------------------------

### Get State

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/overview/state_methods_overview.md

Retrieves the current internal state of the DHTMLX RichText editor. This method provides a snapshot of the editor's configuration and content.

```javascript
editor.getState().getState();
```

--------------------------------

### RichText Configuration Options

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/index.md

Overview of key configuration properties for DHTMLX RichText, including layout modes, toolbar, menubar, and value.

```APIDOC
layout-mode:
  description: Defines the editing mode of the RichText component. Can be 'classic' or 'document'.
  type: string
  default: 'classic'

toolbar:
  description: Configures the toolbar of the RichText editor. Allows customization of content and layout.
  type: object | boolean
  default: true

menubar:
  description: Controls the visibility of the menubar. The menubar content is not configurable.
  type: boolean
  default: false

value:
  description: Sets or gets the content of the RichText editor.
  type: string
  default: ''

default-styles:
  description: Applies default styling to the editor content.
  type: object
  default: {}

```

--------------------------------

### Import RichText (PRO Version)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_svelte.md

Svelte component script for importing RichText from the PRO package and its CSS. Assumes RichText is installed from a local folder.

```html
<script>
import { Richtext} from 'dhx-richtext-package';
import 'dhx-richtext-package/dist/richtext.css';
</script>
```

--------------------------------

### dhtmlx-richtext API Documentation

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/localization.md

This section details the API for dhtmlx-richtext, focusing on locale management. It explains how to apply custom locales using the `locale` configuration property during initialization or the `setLocale()` method after initialization.

```APIDOC
RichText:
  __init__(container: string | HTMLElement, config?: object)
    Initializes the RichText editor.
    Parameters:
      container: The ID of the HTML element or the element itself where the editor will be rendered.
      config: An optional configuration object.
        locale: object
          An object containing custom translations for the editor's UI elements. If not provided, the default locale is used.

  setLocale(locale: object): void
    Applies a custom locale to the RichText editor after initialization.
    Parameters:
      locale: An object containing custom translations for the editor's UI elements.
```

--------------------------------

### RichText Initialization with menubar

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/config/menubar.md

Demonstrates how to initialize the DHTMLX RichText component with the menubar enabled. This configuration option adds a top menubar to the RichText editor.

```jsx
new richtext.Richtext("#root", {
    menubar: true
    // other configuration properties
});
```

--------------------------------

### RichText Initialization and Event Detach Example

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/internal/detach.md

Demonstrates how to initialize the DHTMLX RichText editor and then detach a previously attached event handler using its tag.

```jsx
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");
```

--------------------------------

### Initialize RichText in Svelte Component

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_svelte.md

Complete Svelte component (`Richtext.svelte`) demonstrating how to initialize the DHTMLX RichText editor. It includes importing necessary modules, setting up a container, initializing the editor on component mount, and cleaning up on destroy.

```html
<script>
import { onMount, onDestroy } from "svelte";
import { Richtext} from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";

let richtext_container; // initialize container for RichText
let editor;

onMount(() => {
    // initialize the RichText component
    editor = new Richtext(richtext_container, {});
});

onDestroy(() => {
    editor?.destructor(); // destruct RichText
});
</script>

<div class="component_container">
    <div bind:this={richtext_container} class="widget"></div>
</div>
```

--------------------------------

### Handling the indent Event

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/events/indent.md

Example of how to subscribe to the 'indent' event in DHTMLX RichText and log the event object and a message to the console when the event fires.

```jsx
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");
});
```

--------------------------------

### Create React App

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_react.md

Command to create a new React project using create-react-app.

```json
npx create-react-app my-react-richtext-app
```

--------------------------------

### Get Reactive State

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/overview/state_methods_overview.md

Retrieves the reactive state of the DHTMLX RichText editor. This method is useful for observing changes in the editor's internal state in real-time.

```javascript
editor.getState().getReactiveState();
```

--------------------------------

### RichText Methods

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/overview/main_overview.md

Provides access to core methods for interacting with the RichText editor, including getting/setting values, updating configuration, managing locales, and destroying the instance.

```APIDOC
RichText Methods:

- getValue(): Retrieves the current content of the RichText editor.
- setValue(value): Sets the content of the RichText editor.
- setConfig(config): Updates the configuration of the RichText editor.
- setLocale(locale): Sets the locale for the RichText editor.
- destructor(): Destroys the RichText editor instance and cleans up resources.
```

--------------------------------

### Handling the cut Event

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/events/cut.md

Example of how to subscribe to the 'cut' event in the DHTMLX RichText editor and log a message when the event fires. This demonstrates event handling for the RichText component.

```jsx
// 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");
});
```

--------------------------------

### dhtmlx-richtext API Methods

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/news/migration.md

Provides an overview of key dhtmlx-richtext API methods, including those that are preserved, removed, or newly introduced. This includes methods for configuration, localization, state management, and internal action handling.

```APIDOC
API Methods:

Preserved:
- `destructor()`: Unchanged.
- `on()`: Now accessed via `richtext.api`.
- `detach()`: Now accessed via `richtext.api`.

Removed:
- `getStats()`: No replacement; manual logic required.
- `getEditorAPI()`: Use public API instead.
- `fire()`: Replaced by `exec()` and `intercept()`.
- `fullScreen()`: Use `fullscreenMode` config property.
- `exitFullScreen()`: Use `fullscreenMode` config property.
- `paint()`: No longer needed.

New:
- `setConfig()`: Enables live configuration updates.
- `setLocale()`: Allows dynamic locale switching.
- `getReactiveState()`: Enables reactive state tracking.
- `getState()`: Provides current static configuration state.
- `intercept()`: Intercept internal actions.
- `exec()`: Execute internal actions.
```

--------------------------------

### Initialize RichText Editor

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/initialization.md

Initializes the DHTMLX RichText editor using the `richtext.Richtext` constructor. It requires the ID of the HTML container and an optional configuration object for customization.

```jsx
// create RichText
const editor = new richtext.Richtext("#root", {
    // configuration properties  
});
```

--------------------------------

### RichText Component Initialization with Props

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_react.md

Demonstrates the RichText component's implementation in React. It initializes the RichText editor using a ref and applies the passed `value` prop to the editor's configuration.

```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, // apply value
            // other configuration properties
        });

        return () => {
            editor.destructor();
        };
    }, []);

    return  <div className="component_container">
                <div ref={richtext_container} className="widget"></div>
            </div>
}
```

--------------------------------

### Handling 'print' Event in RichText

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_react.md

Shows how to attach an event listener to the RichText component to detect user actions. This example specifically listens for the 'print' event and logs a message to the console.

```jsx
// ...
useEffect(() => {
    const editor = new Richtext(richtext_container.current, {});

    editor.api.on("print", () => {
        console.log("The document is printing");
    });
    
    return () => {
        editor.destructor();
    };
}, []);
// ...
```

--------------------------------

### Handle 'print' Event in RichText (Vue)

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/guides/integration_with_vue.md

Illustrates how to handle events emitted by the DHTMLX RichText component in Vue.js. This example shows how to listen for the 'print' event and execute a callback function.

```html
<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>

// ...
```

--------------------------------

### Applying defaultStyles and CSS

Source: https://github.com/dhtmlx/docs-richtext/blob/master/docs/api/config/default-styles.md

Demonstrates how to initialize the RichText editor with custom default styles and how to apply the corresponding CSS to achieve the desired visual appearance.

```jsx
new richtext.Richtext("#root", {
    defaultStyles: {
        h2: {
            "font-family": "Roboto",
            "font-size": "28px",
            color: "purple",
            background: "#FFC0CB"
        }
    }
});
```

```css
<style>
    #root h2 {
        font-family: Roboto;
        font-size: 28px;
        color: purple;
        background: #FFC0CB;
    }
</style>
```