### Install dependencies and start dev server with npm

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

Use these commands to install dependencies and start the development server when using npm.

```bash
npm install
npm run dev
```

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

### Install dependencies and start dev server with yarn

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

Use these commands to install dependencies and start the development server when using yarn.

```bash
yarn
yarn dev
```

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

### Example

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

Shows a complete example of configuring a custom toolbar with custom buttons.

```APIDOC
## Example

### Description
A complete example of configuring a custom toolbar with custom buttons in the RichText widget.

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

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

### Run documentation locally with Yarn start

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

Starts the local development server to explore the documentation.

```bash
$ yarn start
```

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

### Example

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

A complete example of a custom toolbar with predefined buttons and a custom button using all supported options.

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

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

### Install dependencies with Yarn

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

Installs the project dependencies using Yarn.

```bash
$ yarn
```

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

### Example: get reactive state

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

Initializes a RichText editor and retrieves its reactive state via the getReactiveState method, logging the result to the console.

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

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

### Example: getState with RichText initialization

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

Initializes a RichText editor and calls getState to retrieve the current state, logging it to the console.

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

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

### Subscribe to copy event example

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

Example of subscribing to the copy event using the editor.api.on method. Logs a message when selected text is copied.

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

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

### Example: setting font-family for h4-h6

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

Example of using defaultStyles to set the font-family to Roboto for h4, h5, and h6 blocks when initializing RichText.

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

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

### setValue Example with Text Encoder

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

Example of creating a RichText editor and setting its value using the text encoder. The editor_value is a long string of placeholder text.

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

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

### Subscribe to print Event Example

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

Initializes a RichText editor and subscribes to the 'print' event, logging a message when the document is printing.

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

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

### Initialize RichText with fullscreenMode enabled

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

Example of initializing RichText with fullscreenMode set to true. The comment '// other configuration properties' indicates that additional properties can be added.

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

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

### Start in fullscreen mode with fullscreenMode property

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

Open the editor in fullscreen mode on initialization by setting fullscreenMode to true. The default value is false.

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

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

### Subscribe to hide-suggest event

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

Example of initializing the RichText editor and subscribing to the hide-suggest event to log when the suggestion dropdown closes.

```jsx
// initialize RichText
const editor = new richtext.Richtext("#root", {
    // configuration properties
});
// subscribe to the "hide-suggest" event
editor.api.on("hide-suggest", () => {
    console.log("Suggestion dropdown closed");
});
```

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

### Bootstrap Angular app in main.ts

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

Replace the contents of src/main.ts with this bootstrap code to start the Angular application and load the AppModule.

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

```

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

### Subscribe to outdent event

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

Example of subscribing to the outdent event using the Event Bus. Logs the event object and a message when indentation is decreased.

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

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

### layoutMode Example

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

Initializes RichText with the 'document' mode, which displays the edit area as a document page. The comment indicates that this mode is set by default.

```jsx
// initialize RichText
new richtext.Richtext("#root", {
    layoutMode: "document"  // initializes RichText with "document" mode by default
    // other configuration properties
});
```

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

### Configure the RichText toolbar with default controls

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

Defines the RichText toolbar as an array of control name strings passed to the `toolbar` configuration property. The example includes all default controls, with `separator` entries to visually divide groups; the `mode` control switches between `classic` and `document` layouts. Use this as a starting point to customize which buttons appear and their order.

```jsx
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"
        // other buttons
    ],
    // other configuration properties
});
```

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

### Switch to the app directory

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

Change into the project directory created by the scaffolder.

```bash
cd my-vue-richtext-app
```

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

### Prompt: Set up @ mention trigger

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

Use this prompt to ask how to set up an @ mention trigger that looks up users from a server. The prompt instructs to use the docs.

```text
How do I set up an @ mention trigger that looks up users from a server? Use the docs.
```

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

### Subscribe to toggle-fullscreen-mode and enable full screen

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

Shows how to subscribe to the toggle-fullscreen-mode event and then enable full screen mode using the exec method. The callback logs the object and a message.

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

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

### Create a Vue project with create-vue

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

Run this command to create a new Vue project. The scaffolder will prompt for a project name; use 'my-vue-richtext-app'.

```bash
npm create vue@latest
```

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

### Switch to project directory

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

After creating the project, change into the new directory named 'my-svelte-richtext-app'.

```bash
cd my-svelte-richtext-app
```

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

### Switch to app directory

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

Changes the current directory to the newly created React app.

```bash
cd my-react-richtext-app
```

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

### superscript Event

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

Documentation for the superscript event in the DHTMLX RichText library, including usage and an example.

```APIDOC
## superscript Event

### Description
Fires when pressing the "Superscript" button in the menubar/toolbar or via Event Bus methods.

### Usage
```jsx
"superscript": () => boolean | void;
```

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

### Change log
The event was added in v2.0
```

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

### Initialize RichText with menubar enabled

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

Shows how to enable the menubar by setting `menubar: true` when initializing a RichText instance. The comment indicates other configuration properties can be added.

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

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

### undo Event

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

Documentation for the undo event in the DHTMLX RichText library, including usage and an example.

```APIDOC
## Event: undo

### Description
Fires when pressing the "Undo" button in the menubar/toolbar or via Event Bus methods.

### Usage
```jsx
"undo": () => boolean | void;
```

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

### Change log
The event was added in v2.0
```

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

### redo Event

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

Documentation for the redo event in the DHTMLX RichText library, including usage and example.

```APIDOC
## redo Event

### Description
Fires when pressing the "Redo" button in the menubar/toolbar or via Event Bus methods.

### Usage

```jsx
"redo": () => boolean | void;
```

### Example

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

### Change log
The event was added in v2.0
```

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

### Import RichText source files (trial version)

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

Imports the RichText package and CSS for the trial version. The tutorial uses this version

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

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

### insert-line Event

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

Documentation for the insert-line event in the DHTMLX RichText library, including usage and an example.

```APIDOC
## insert-line Event

### Description
Fires when inserting horizontal line.

### Usage

```jsx
"insert-line": () => boolean | void;
```

### Example

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

### Change log
The event was added in v2.0.
```

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

### Import RichText for PRO version

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

Imports the RichText source for the PRO version installed from a local folder.

```jsx
import { Richtext } from 'dhx-richtext-package';
```

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

### setConfig() Example with layoutMode

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

Shows how to apply new configuration parameters to an existing RichText instance. The setConfig() call preserves all previously set parameters that are not explicitly provided in the call.

```jsx
const editor = new richtext.Richtext("#root", {
    value: "<h1>Some text</h1>",
    // other configuration properties
});

editor.setConfig({
    layoutMode: "document"
});
```

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

### Create React app with Create React App

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

Creates a new React project named my-react-richtext-app. Requires Node.js and optionally Vite.

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

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

### toggle-list Event

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

Documentation for the toggle-list event in the DHTMLX RichText library, including its usage, parameters, and an example.

```APIDOC
## toggle-list Event

### Description
Fires when a user toggles a list on the selected blocks. The event powers the context-aware bulleted/numbered list buttons. Instead of inserting a new list, the event inspects the current selection and picks one of four behaviors automatically: Wrap, Unwrap, Convert, or Mixed.

### Usage
```jsx
type TListType = "bulleted" | "numbered";
"toggle-list": ({ type: TListType }) => boolean | void;
```

### Parameters
The callback of the `toggle-list` event can take an object with the following parameter:
- `type` (TListType) - Required - The type of the list to toggle. Possible values: `"bulleted"` (bulleted/unordered list) or `"numbered"` (numbered/ordered list).

### Example
```jsx
// initialize RichText
const editor = new richtext.Richtext("#root", {
    // configuration properties
});
// subscribe to the "toggle-list" event
editor.api.on("toggle-list", (obj) => {
    console.log(obj.type);
    console.log("The list was toggled");
});
```

### Change log
The event was added in v2.0.6
```

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

### Create a new Vite project

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

Run this command to scaffold a new Vite project. The scaffolder will prompt for a project name; use 'my-svelte-richtext-app'.

```bash
npm create vite@latest
```

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

### toggle-shortcut-info Event

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

Documentation for the toggle-shortcut-info event in the DHTMLX RichText library, including usage, parameters, and an example.

```APIDOC
## Event: toggle-shortcut-info

### Description
Fires when toggling the shortcut info.

### Usage
```jsx
"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void;
```

### Parameters
The callback of the `toggle-shortcut-info` event can take an object with the following parameter:
- `mode` (boolean) - Optional - Enables a shortcut info; `true` to show shortcut info popup, `false` to hide shortcut info popup.

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

**Change log:** The event was added in v2.0
```

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

### Use demo server for image upload

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

Point RichText at the demo server for testing. The demo server resizes large images, stores them on disk, and returns URLs it serves itself. Intended for evaluation and demos only.

```jsx
new richtext.Richtext("#root", {
    imageUploadUrl: "https://docs.dhtmlx.com/richtext-backend/images"
    // other configuration properties
});
```

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

### insert-list Event

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

Documentation for the insert-list event in the DHTMLX RichText library, including usage, parameters, and an example.

```APIDOC
## insert-list Event

### Description
Fires when inserting a list.

### Usage
```jsx
type TListType = "bulleted" | "numbered";

"insert-list": ({ type: TListType }) => boolean | void;
```

### Parameters
The callback of the `insert-list` event can take an object with the following parameter:
- `type` (TListType) - Required - The type of the inserted list. Possible values: `"bulleted"` (bulleted list) or `"numbered"` (numbered list).

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

**Change log:** The event was added in v2.0
```

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

### set-text-style Event

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

Documentation for the set-text-style event in the DHTMLX RichText library, including usage, parameters, and an example.

```APIDOC
## set-text-style Event

### Description
Fires when setting a text style.

### Usage
```jsx
"set-text-style": ({ tag: TBlockType }) => boolean | void;

type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
```

### Parameters
The callback of the `set-text-style` event can take an object with the following parameters:
- `tag` (TBlockType) - a text style

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

**Change log:** The event was added in v2.0
```

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

### toggle-fullscreen-mode Event

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

Documentation for the toggle-fullscreen-mode event in the DHTMLX RichText library, including its usage, parameters, and an example.

```APIDOC
## toggle-fullscreen-mode Event

### Description
Fires when toggling the full screen mode.

### Usage

```jsx
"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void;
```

### Parameters
The callback of the `toggle-fullscreen-mode` event can take an object with the following parameter:

- `mode` (boolean) - Optional - enables a fullscreen mode

### Example

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

**Change log:** The event was added in v2.0
```

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

### Prompt: Show layout mode switcher as dropdown

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

Use this prompt to ask how to make the built-in layout mode switcher appear as a dropdown instead of a plain button.

```text
How do I make the built-in layout mode switcher show up as a dropdown instead of a plain button?
```

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

### set-text-color Event

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

Documentation for the set-text-color event in the DHTMLX RichText library, including its usage, parameters, and an example.

```APIDOC
## set-text-color Event

### Description
Fires when setting a text color and/or a background text color.

### Usage

```jsx
"set-text-color": (ITextColor) => boolean | void;

interface ITextColor {
    color?: string;
    background?: string;
}
```

### Parameters

The callback of the `set-text-color` event can take an object with the following parameters:

- `color` - a text color
- `background` - a text background color

### Example

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

**Change log:** The event was added in v2.0
```

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

### Using defaultToolbarButtons

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

Shows how to initialize RichText with the default toolbar buttons spread into the toolbar array, and then add a custom button.

```jsx
// initialize RichText
new richtext.Richtext("#root", {
    toolbar: [
        ...richtext.defaultToolbarButtons,
        {
            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")
        }
    ]
    // other configuration properties
});
```

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

### set-font-size Event

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

Documentation for the set-font-size event in the DHTMLX RichText library, including usage, parameters, and an example.

```APIDOC
## set-font-size Event

### Description
Fires when setting a font size.

### Usage
```jsx
"set-font-size": ({ fontSize: string }) => boolean | void;
```

### Parameters
The callback of the `set-font-size` event can take an object with the following parameter:
- `fontSize` (string) - a font size to be applied

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

**Change log:** The event was added in v2.0
```

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

### Import RichText for trial version

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

Imports the RichText source for the trial version. This tutorial uses the trial version.

```jsx
import { Richtext } from '@dhx/trial-richtext';
```

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

### insert-link Event

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

Documentation for the insert-link event in the DHTMLX RichText library, including usage, parameters, and an example.

```APIDOC
## insert-link Event

### Description
Fires when inserting link.

### Usage

~~~jsx {}
"insert-link": ({ url: string }) => boolean | void;
~~~

### Parameters
The callback of the `insert-link` event can take an object with the following parameter:

- `url` - the url to be inserted

### 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);
});
~~~

**Change log:** The event was added in v2.0
```

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

### Subscribe to and execute show-popup event

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

Initializes a RichText editor, subscribes to the 'show-popup' event to log the popup object and a message, then executes the event with a configuration specifying the popup type as 'link'.

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

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

### paste Event

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

Documentation for the paste event in the DHTMLX RichText library, including its usage and an example of subscribing to it.

```APIDOC
## paste Event

### Description
Fires when pasting content.

### Usage

```jsx
type PasteHandler = () => boolean | void;
```

### Example

```jsx
// initialize RichText
const editor = new richtext.Richtext("#root", {
    // configuration properties
});
// subscribe to the "paste" event
editor.api.on("paste", () => {
    console.log("Content was pasted");
});
```

### Change Log
The event was added in v2.0.
```

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

### Create RichText editor in index.html

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

HTML file that creates a div container with id "root" and initializes the RichText editor using the richtext.Richtext constructor with a CSS selector and an empty 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>
```

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

### import Event

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

Documentation for the import event in the DHTMLX RichText library, including usage, parameters, and an example.

```APIDOC
## import Event

### Description
Fires after pressing the "Import" option in the menubar or via Event Bus methods.

### Usage

```jsx
"import": ({ html?: string }) => boolean | void;
```

### Parameters

The callback of `import` event can take an object with the following parameter:

- `html` - a text value in the html format

### Example

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

**Change log:** The event was added in v2.0
```

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

### getValue(encoder?: any): string

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

Documentation for the getValue() method of the DHTMLX RichText library, including usage, parameters, and an example.

```APIDOC
## getValue(encoder?: any): string

### Description
Returns the RichText value.

### Method
N/A (SDK method)

### Endpoint
N/A (SDK method)

### Parameters
- `encoder` (any) - Optional - A parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default), `text`, and `markdown`.

### Request Example
```jsx
const toTextEncoder = richtext.text.toText;             // text encoder
const toHTMLEncoder = richtext.html.toHTML;             // html encoder
const toMarkdownEncoder = richtext.markdown.toMarkdown; // markdown encoder
```

### Response
#### Success Response
- Returns a string containing the RichText value in the specified format.

#### Response Example
```jsx
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);
```

### Change Log
The method was updated in v2.0. The `mode` parameter was removed. The `encoder` parameter was added.
```

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

### insert-token Event

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

Documentation for the insert-token event in the DHTMLX RichText library, including its description, parameters, usage, and example.

```APIDOC
## insert-token Event

### Description
Fires after the user picks a suggestion item and RichText inserts it as a token.

### Event Name
`insert-token`

### Event Type
Event

### Parameters
The callback of the `insert-token` event receives an object with the following fields:

- `data` (object) - The picked suggestion item. Contains the `id`, `label`, and `url` of the item, as well as any custom fields added to the trigger's `data` source.
- `trigger` (string) - The trigger character that opened the dropdown (for example, `"@"` or `"#"`).
- `showTrigger` (boolean) - When `false`, RichText inserts only `label`; otherwise the widget also shows the trigger character (default).
- `action` (function) - A custom action defined for the matching trigger. When set, the parameter takes priority over token insertion: RichText removes the typed text (the trigger character and the query) and calls `action(data)` instead of inserting a token. The `showTrigger` parameter has no effect in this case.

### Usage
```jsx
"insert-token": ({
    data: {
        id?: string | number,
        label?: string,
        url?: string,
        // ...any custom fields from the trigger's data source
    },
    trigger: string,
    showTrigger?: boolean,
    action?: (item) => void
}) => boolean | void;
```

### Example
```jsx
// initialize RichText
const editor = new richtext.Richtext("#root", {
    // configuration properties
});
// subscribe to the "insert-token" event
editor.api.on("insert-token", ({ data, trigger, showTrigger }) => {
    console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`);
});
```

### Change Log
The event was added in v2.1

### Related Sample
[RichText. Mentions, tags, and async lookup](https://snippet.dhtmlx.com/nfvvfize?tag=richtext)

### Related Articles
[Mentions and tags](guides/mentions_and_tags.md)
```

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

### Prompt: Build custom toolbar with bold, italic, and custom button

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

Use this prompt to ask how to create a custom toolbar containing only bold, italic, and one custom button.

```text
How do I build a custom toolbar with only bold, italic, and one custom button?
```

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

### Configure RichText editor with menubar, toolbar, fullscreen, layout, locale, and defaultStyles

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

Configuration example for the RichText editor. It enables the menubar, disables the toolbar, sets fullscreen and document layout modes, applies a Chinese locale, and defines default styles for h4 headings. Note that the locale line is missing a comma before defaultStyles.

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

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

### Subscribe to align event and align text to left

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

Example of initializing RichText, subscribing to the 'align' event, and aligning text to the left using the Event Bus methods.

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

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

### Intercept the set-font-size event

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

Example that creates a RichText editor and uses intercept to block changing the font size when it is not '36px'.

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