diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index f782c3a..e2538aa 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -6,33 +6,92 @@ description: You can learn about the configuration in the documentation of the D # Configuration -You can configure RichText appearance and functionality via the corresponding API. The available parameters will allow you to: +Configure RichText appearance and functionality with the following properties: -- Show/hide **menubar** using the [`menubar`](api/config/menubar.md) property -- Configure **toolbar** using the [`toolbar`](api/config/toolbar.md) property -- Enable the **fullscreen mode** using the [`fullscreenMode`](api/config/fullscreen-mode.md) property -- Toggle the **layout** between "classic" and "document" modes using the [`layoutMode`](api/config/layout-mode.md) property -- Specify **initial value** using the [`value`](api/config/value.md) property -- Specify **initial locale** using the [`locale`](api/config/locale.md) property -- Apply **initial styles** using the [`defaultStyles`](api/config/default-styles.md) property +- [`menubar`](api/config/menubar.md) — show or hide the top menubar +- [`toolbar`](api/config/toolbar.md) — configure the toolbar controls +- [`fullscreenMode`](api/config/fullscreen-mode.md) — enable fullscreen mode on initialization +- [`layoutMode`](api/config/layout-mode.md) — set the layout to `"classic"` or `"document"` mode +- [`value`](api/config/value.md) — set the initial content of the editor +- [`locale`](api/config/locale.md) — set the initial locale +- [`defaultStyles`](api/config/default-styles.md) — apply default styles to specific block types +- [`imageUploadUrl`](api/config/image-upload-url.md) — specify the server URL for image uploads -## Layout modes +## Show the menubar -There are two layout modes of RichText editor between which you can select to get the best working place for creating your perfect content: +Use the [`menubar`](api/config/menubar.md) property to show the top menubar of the editor. -- **"classic"** +The following code snippet enables the menubar during initialization: + +~~~jsx {3} +new richtext.Richtext("#root", { + menubar: true + // other configuration properties +}); +~~~ + +**Related sample:** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) + +## Enable fullscreen mode + +Use the [`fullscreenMode`](api/config/fullscreen-mode.md) property to launch the editor in fullscreen on initialization. The default value is `false`. + +The following code snippet enables fullscreen mode: + +~~~jsx {3} +new richtext.Richtext("#root", { + fullscreenMode: true + // other configuration properties +}); +~~~ + +**Related sample:** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) + +## Set the initial value + +Use the [`value`](api/config/value.md) property to set the initial content of the editor. Pass the content as an HTML string. + +The following code snippet sets an initial value: + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

Hello World

" + // other configuration properties +}); +~~~ + +## Set the image upload URL + +Use the [`imageUploadUrl`](api/config/image-upload-url.md) property to specify the server endpoint for image uploads. When set, the image toolbar control uploads the selected file to this URL. + +The following code snippet sets the image upload URL during initialization: + +~~~jsx {3} +new richtext.Richtext("#root", { + imageUploadUrl: "https://your-server.com/upload" + // other configuration properties +}); +~~~ + +**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) + +## Choose a layout mode + +RichText provides two layout modes for the editor: + +- `"classic"`
![Classic mode](./../assets/richtext/classic_mode.png)
-- **"document"** +- `"document"`
![Document mode](./../assets/richtext/document_mode.png)
-To specify the desired mode, you need to define it in the [`layoutMode`](api/config/layout-mode.md) property of the RichText configuration object during initialization of the component: +The following code snippet sets the layout to document mode: ~~~jsx const editor = new richtext.Richtext("#root", { @@ -42,7 +101,7 @@ const editor = new richtext.Richtext("#root", { ## Toolbar -The RichText toolbar consists of several blocks of controls that can be changed according to your needs. +The RichText toolbar contains several groups of controls that you can customize. ### Default toolbar controls @@ -80,7 +139,7 @@ You can specify the following buttons and controls in the RichText toolbar: | `shortcuts` | Displays a list of available keyboard shortcuts | | `separator` | Adds a visual separator between controls | -The toolbar structure is defined using the [`toolbar`](api/config/toolbar.md) property, which is an array with strings presenting the names of controls. +Use the [`toolbar`](api/config/toolbar.md) property to define the toolbar structure as an array of control name strings: ~~~jsx {2-36} new richtext.Richtext("#root", { @@ -127,34 +186,34 @@ new richtext.Richtext("#root", { ### Custom toolbar controls -You can also specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property with the following parameters: +Specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property. Each object supports the following parameters: + +- `type: string` — (required) the control type: `"button"`, `"richselect"`, or `"colorpicker"` +- `id: string` — (optional) a unique control ID; must not overlap with an existing control ID +- `label: string` — (optional) a button label; combines with icon if both are set +- `tooltip: string` — (optional) a tooltip shown on hover; defaults to `label` if not set +- `css: string` — (optional) a CSS class name for the control; built-in classes: `wx-primary`, `wx-secondary` +- `handler: function` — (optional) a callback that executes when the button is clicked -- `type` - (required) specifies a custom control type. The following types are available: `"button"`, `"richselect"`, `"colorpicker"` -- `id` - (optional) a custom control ID (cannot overlap with existing control ID) -- `label` - (optional) a button label (combines with icon) -- `tooltip` - (optional) a tooltip displayed on hover (if not specified, uses the value from "label") -- `css` - (optional) a css class name assigned to the control (default supported classes: wx-primary, wx-secondary) -- `handler` - (optional) a callback function that executes when the button is clicked +The following code snippet demonstrates predefined and custom control configurations in the `toolbar` property: ~~~jsx {6-32} new richtext.Richtext("#root", { toolbar: [ - // buttons (strings represent buttons only) + // string items — built-in controls "bold", "italic", - // predefined buttons (user cannot define any other options for these (no labels, tooltips, options, etc.), so only ({ type: "button", id: string }) + // predefined control as object — only type and id are supported { type: "button", id: "fullscreen", }, - // user must specify the correct type if they want to use a predefined control (e.g. richselect/colorpicker) - // non-matching types will be ignored (not added to the toolbar) + // use the correct type for predefined controls — incorrect type is ignored { - type: "richselect", // type: "button" - incorrect, will be ignored + type: "richselect", // type: "button" — incorrect, control is ignored id: "mode", }, - // custom buttons (supported options are below) - // user can only define custom buttons (no richselect/colorpicker support atm) + // custom control — only "button" type is supported { type: "button", id: "some", @@ -176,9 +235,9 @@ new richtext.Richtext("#root", { **Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) -### Hide Toolbar +### Hide the toolbar -If you need to hide toolbar, set the [`toolbar`](api/config/toolbar.md) property to `false` as follows: +To hide the toolbar, set the [`toolbar`](api/config/toolbar.md) property to `false`: ~~~jsx {2} new richtext.Richtext("#root", { @@ -187,9 +246,11 @@ new richtext.Richtext("#root", { }); ~~~ -## Default styles +## Apply default styles -You can apply default style values for specific block types in the editor using the [`defaultStyles`](api/config/default-styles.md) property. +Use the [`defaultStyles`](api/config/default-styles.md) property to set default style values for specific block types in the editor. + +The `defaultStyles` property accepts the following structure: ~~~jsx {} defaultStyles?: boolean | { @@ -250,7 +311,9 @@ defaultStyles?: boolean | { }; ~~~ -The `defaultStyles` property DOES NOT set the actual CSS to the affected blocks. CSS styles have to be applied separately: +The `defaultStyles` property does not apply actual CSS to blocks. Apply CSS styles separately. + +The following example sets default `h2` styles and applies matching CSS: ```html title="index.html"
@@ -278,6 +341,6 @@ const editor = new richtext.Richtext("#root", { } ``` -In this example, all `h2` blocks are assigned to the `"Roboto"` font-family with a font-size of 28px with both the foreground and the background colors changed as well. Css styles are assigned to `h2` blocks as well. +In this example, all `h2` blocks use the `Roboto` font family at 28px, with foreground and background colors set. Apply matching CSS to the `h2` selector in your stylesheet. **Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index a43bf9e..61177a9 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -6,37 +6,37 @@ description: You can learn about the initialization in the documentation of the # Initialization -This guide will give you detailed instructions on how to create RichText on a page to enrich your application with features of the RichText editor. Take the following steps to get a ready-to-use component: +This guide covers how to create RichText and add it to your application. Follow these steps to get a working component: -1. [Include the RichText source files on a page](#including-source-files). -2. [Create a container for RichText](#creating-container). -3. [Initialize RichText with the object constructor](#initializing-richtext). +1. [Include the source files](#include-the-source-files). +2. [Create a container](#create-a-container). +3. [Initialize RichText](#initialize-richtext). -## Including source files +## Include the source files [Download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it into a folder of your project. -To create RichText, you need to include 2 source files on your page: +Include 2 source files on your page: - *richtext.js* - *richtext.css* -Make sure that you set correct relative paths to the source files: +Set the correct relative paths to the source files in your HTML page: ~~~html title="index.html" ~~~ -## Creating container +## Create a container -Add a container for RichText and give it an ID, for example *"root"*: +Add a container for RichText and give it an ID, for example `"root"`: ~~~jsx title="index.html"
~~~ -## Initializing RichText +## Initialize RichText Initialize RichText with the `richtext.Richtext` constructor. The constructor takes two parameters: @@ -46,18 +46,16 @@ Initialize RichText with the `richtext.Richtext` constructor. The constructor ta ~~~jsx title="index.html" // create RichText const editor = new richtext.Richtext("#root", { - // configuration properties + // other configuration properties }); ~~~ ### Configuration properties -:::note -The full list of properties to configure **RichText** can be found [**here**](api/overview/properties_overview.md). -::: +See the full list of available properties in the [Properties overview](api/overview/properties_overview.md). -## Example +## View the example -In this snippet you can see how to initialize **RichText** with the initial data: +The example below demonstrates RichText initialization: diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 5525455..658ac5c 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -10,7 +10,7 @@ description: You can learn about the integration with Angular in the documentati You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://v17.angular.io/docs). ::: -DHTMLX RichText is compatible with **Angular**. We have prepared code examples on how to use DHTMLX RichText with **Angular**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/angular-richtext-demo). +DHTMLX RichText is compatible with **Angular**. You can find code examples for using DHTMLX RichText with Angular in the [**Example on GitHub**](https://github.com/DHTMLX/angular-richtext-demo). ## Creating a project @@ -18,7 +18,7 @@ DHTMLX RichText is compatible with **Angular**. We have prepared code examples o Before you start to create a new project, install [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/). ::: -Create a new **my-angular-richtext-app** project using Angular CLI. Run the following command for this purpose: +Create a new **my-angular-richtext-app** project using Angular CLI. Run the following command: ~~~json ng new my-angular-richtext-app @@ -28,28 +28,28 @@ ng new my-angular-richtext-app If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! ::: -The command above installs all the necessary tools, so you don't need to run any additional commands. +The command installs all the necessary tools. No additional commands are required. -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Go to the newly created app directory: ~~~json cd my-angular-richtext-app ~~~ -Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager: +Use the [**yarn**](https://yarnpkg.com/) package manager to install dependencies and start the dev server: ~~~json yarn yarn start ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on a localhost port, for example `http://localhost:3000`. ## Creating RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +Get the DHTMLX RichText source code. Stop the app and install the RichText package. ### Step 1. Package installation @@ -57,11 +57,11 @@ Download the [**trial RichText package**](/how_to_start/#installing-richtext-via ### 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**. +Create an Angular component to add RichText to the application. In the *src/app/* directory, add a *richtext* folder with a new file named *richtext.component.ts*. #### Import source files -Open the **richtext.component.ts** file and import RichText source files. Note that: +Open *richtext.component.ts* and import RichText source files. Note that: - if you use PRO version and install the RichText package from a local folder, the imported path looks like this: @@ -75,11 +75,11 @@ import { Richtext} from 'dhx-richtext-package'; import { Richtext} from '@dhx/trial-richtext'; ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This tutorial uses the **trial** version of RichText. -#### Set containers and initialize the Richtext +#### Set containers and initialize RichText -To display RichText on the page, you need to set a container for RichText, and initialize the component using the corresponding constructor: +Set a container for RichText and initialize the component using the constructor: ~~~jsx {} title="richtext.component.ts" import { Richtext} from '@dhx/trial-richtext'; @@ -111,9 +111,9 @@ export class RichTextComponent implements OnInit, OnDestroy { } ~~~ -#### Adding styles +#### Add styles -To display RichText correctly, you need to provide the corresponding styles. For this purpose, you can create the **richtext.component.css** file in the **src/app/richtext/** directory and specify important styles for RichText and its container: +Provide the necessary styles to display RichText correctly. Create *richtext.component.css* in the *src/app/richtext/* directory and specify styles for RichText and its container: ~~~css title="richtext.component.css" /* import RichText styles */ @@ -139,9 +139,9 @@ body{ } ~~~ -#### Loading data +#### Load data -To add data into RichText, you need to provide a data set. You can create the **data.ts** file in the **src/app/richtext/** directory and add some data into it: +To add data to RichText, create a data set. Create *data.ts* in the *src/app/richtext/* directory and add the initial content: ~~~jsx {} title="data.ts" export function getData() { @@ -153,7 +153,7 @@ export function getData() { } ~~~ -Then open the ***richtext.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of RichText within the `ngOnInit()` method, as shown below: +Open *richtext.component.ts*, import the data file, and pass the data properties to the RichText configuration object in `ngOnInit()`: ~~~jsx {} title="richtext.component.ts" import { Richtext} from '@dhx/trial-richtext'; @@ -172,7 +172,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} export class RichTextComponent implements OnInit, OnDestroy { @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; - private _editor!: RichText; + private _editor!: Richtext; ngOnInit() { const { value } = getData(); // initialize data property @@ -188,7 +188,7 @@ export class RichTextComponent implements OnInit, OnDestroy { } ~~~ -You can also use the [`setValue()`](api/methods/set-value.md) method inside the `ngOnInit()` method of Angular to load data into RichText. +You can also use the [`setValue()`](api/methods/set-value.md) method inside `ngOnInit()` to load data into RichText. ~~~jsx {} title="richtext.component.ts" import { Richtext} from '@dhx/trial-richtext'; @@ -207,7 +207,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} export class RichTextComponent implements OnInit, OnDestroy { @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; - private _editor!: RichText; + private _editor!: Richtext; ngOnInit() { const { value } = getData(); // initialize data property @@ -216,7 +216,7 @@ export class RichTextComponent implements OnInit, OnDestroy { }); // apply the data via the setValue() method - this._editor.setValue({ value }); + this._editor.setValue(value); } ngOnDestroy(): void { @@ -225,13 +225,13 @@ export class RichTextComponent implements OnInit, OnDestroy { } ~~~ -Now the RichText component is ready to use. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties. +The RichText component is ready to use. When the element is added to the page, it initializes RichText with data. You can also provide configuration settings — see the [RichText API docs](api/overview/main_overview.md) for the full list of available properties. -#### Handling events +#### Handle events -When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +When a user performs an action in RichText, it fires an event. Use these events to detect the action and run the desired code. See the [full list of events](api/overview/events_overview.md). -Open the **richtext.component.ts** file and complete the `ngOnInit()` method in the following way: +Open *richtext.component.ts* and update `ngOnInit()`: ~~~jsx {} title="richtext.component.ts" // ... @@ -250,7 +250,7 @@ ngOnDestroy(): void { ### 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: +To add `RichTextComponent` to your app, open *src/app/app.component.ts* and replace the default code: ~~~jsx {} title="app.component.ts" import { Component } from "@angular/core"; @@ -264,7 +264,7 @@ export class AppComponent { } ~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *RichTextComponent* as shown below: +Then create *app.module.ts* in *src/app/* and specify `RichTextComponent`: ~~~jsx {} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -281,7 +281,7 @@ import { RichTextComponent } from "./richtext/richtext.component"; export class AppModule {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +Finally, open *src/main.ts* and replace the existing code: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -291,10 +291,10 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -After that, you can start the app to see RichText loaded with data on a page. +Start the app to see RichText loaded with data on a page.
![RichText initialization](../assets/trial_richtext.png)
-Now you know how to integrate DHTMLX RichText with Angular. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo). +You know how to integrate DHTMLX RichText with Angular. Customize the code according to your requirements. Find the final advanced example on [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo). diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index 1244911..b4fa8b9 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -10,7 +10,7 @@ description: You can learn about the integration with React in the documentation You should be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, please refer to the [**React documentation**](https://react.dev/learn). ::: -DHTMLX RichText is compatible with **React**. We have prepared code examples on how to use DHTMLX RichText with **React**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/react-richtext-demo). +DHTMLX RichText is compatible with **React**. You can find code examples for using DHTMLX RichText with React in the [**Example on GitHub**](https://github.com/DHTMLX/react-richtext-demo). ## Creating a project @@ -18,21 +18,21 @@ DHTMLX RichText is compatible with **React**. We have prepared code examples on Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). ::: -You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-richtext-app**: +Create a basic **React** project or use **React with Vite**. The following command creates a project named **my-react-richtext-app**: ~~~json npx create-react-app my-react-richtext-app ~~~ -### Installation of dependencies +### Install dependencies -Go to the new created app directory: +Go to the newly created app directory: ~~~json cd my-react-richtext-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Use a package manager to install dependencies and start the dev server: - if you use [**yarn**](https://yarnpkg.com/), run the following commands: @@ -48,11 +48,11 @@ npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on a localhost port, for example `http://localhost:3000`. ## Creating RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +Get the DHTMLX RichText source code. Stop the app and install the RichText package. ### Step 1. Package installation @@ -60,11 +60,11 @@ Download the [**trial RichText package**](/how_to_start/#installing-richtext-via ### 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***. +Create a React component to add RichText to the application. Create a new file in *src/* and name it *Richtext.jsx*. -#### Importing source files +#### Import source files -Open the ***Richtext.jsx*** file and import RichText source files. Note that: +Open *Richtext.jsx* and import RichText source files. Note that: - if you use PRO version and install the RichText package from a local folder, the import paths look like this: @@ -80,11 +80,11 @@ import { Richtext} from '@dhx/trial-richtext'; import "@dhx/trial-richtext/dist/richtext.css"; ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This tutorial uses the **trial** version of RichText. -#### Setting containers and adding Richtext +#### Set containers and add RichText -To display RichText on the page, you need to create container for RichText and initialize the component using the corresponding constructors: +Create a container for RichText and initialize the component: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; @@ -109,9 +109,9 @@ export default function RichTextComponent(props) { } ~~~ -#### Adding styles +#### Add styles -To display RichText correctly, you need to specify important styles for RichText and its container in the main css file of the project: +Specify styles for RichText and its container in the main CSS file of the project: ~~~css title="index.css" /* specify styles for initial page */ @@ -135,9 +135,9 @@ body, } ~~~ -#### Loading data +#### Load data -To add data into the RichText, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +To add data to RichText, create a data set. Create *data.js* in *src/* and add the initial content: ~~~jsx {} title="data.js" export function getData() { @@ -149,7 +149,7 @@ export function getData() { } ~~~ -Then open the ***App.js*** file and import data. After this you can pass data into the new created `` components as **props**: +Open *App.js*, import data, and pass it to the `` component as props: ~~~jsx {2,5-6} title="App.js" import RichText from "./Richtext"; @@ -163,7 +163,7 @@ function App() { export default App; ~~~ -Go to the ***Richtext.jsx*** file and apply the passed **props** to the RichText configuration object: +Open *Richtext.jsx* and apply the props to the RichText configuration object: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; @@ -190,7 +190,7 @@ export default function RichTextComponent(props) { } ~~~ -You can also use the [`setValue()`](api/methods/set-value.md) method inside the `useEffect()` method of React to load data into RichText: +You can also use the [`setValue()`](api/methods/set-value.md) method inside `useEffect()` to load data into RichText: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; @@ -220,13 +220,13 @@ export default function RichTextComponent(props) { } ~~~ -Now the RichText component is ready. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties. +The RichText component is ready. When the element is added to the page, it initializes RichText with data. You can also provide configuration settings — see the [RichText API docs](api/overview/main_overview.md) for the full list of available properties. -#### Handling events +#### Handle events -When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +When a user performs an action in RichText, it fires an event. Use these events to detect the action and run the desired code. See the [full list of events](api/overview/events_overview.md). -Open ***Richtext.jsx*** and complete the `useEffect()` method in the following way: +Open *Richtext.jsx* and update `useEffect()`: ~~~jsx {} title="Richtext.jsx" // ... @@ -244,10 +244,10 @@ useEffect(() => { // ... ~~~ -After that, you can start the app to see RichText loaded with data on a page. +Start the app to see RichText loaded with data on a page.
![RichText initialization](../assets/trial_richtext.png)
-Now you know how to integrate DHTMLX RichText with React. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/react-richtext-demo). +You know how to integrate DHTMLX RichText with React. Customize the code according to your requirements. Find the final advanced example on [**GitHub**](https://github.com/DHTMLX/react-richtext-demo). diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index db9839f..f932799 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -10,7 +10,7 @@ description: You can learn about the integration with Svelte in the documentatio You should be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, please refer to the [**Svelte documentation**](https://svelte.dev/). ::: -DHTMLX RichText is compatible with **Svelte**. We have prepared code examples on how to use DHTMLX RichText with **Svelte**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). +DHTMLX RichText is compatible with **Svelte**. You can find code examples for using DHTMLX RichText with Svelte in the [**Example on GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). ## Creating a project @@ -32,15 +32,15 @@ npm create vite@latest Check the details in the [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). -### Installation of dependencies +### Install dependencies -Let's name the project as **my-svelte-richtext-app** and go to the app directory: +Name the project **my-svelte-richtext-app** and go to the app directory: ~~~json cd my-svelte-richtext-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Use a package manager to install dependencies and start the dev server: - if you use [**yarn**](https://yarnpkg.com/), run the following commands: @@ -56,11 +56,11 @@ npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app runs on a localhost port, for example `http://localhost:3000`. ## Creating RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +Get the DHTMLX RichText source code. Stop the app and install the RichText package. ### Step 1. Package installation @@ -68,11 +68,11 @@ Download the [**trial RichText package**](/how_to_start/#installing-richtext-via ### 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***. +Create a Svelte component to add RichText to the application. Create a new file in *src/* and name it *Richtext.svelte*. -#### Importing source files +#### Import source files -Open the ***Richtext.svelte*** file and import RichText source files. Note that: +Open *Richtext.svelte* and import RichText source files. Note that: - if you use PRO version and install the RichText package from a local folder, the import paths look like this: @@ -92,11 +92,11 @@ import '@dhx/trial-richtext/dist/richtext.css'; ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This tutorial uses the **trial** version of RichText. -#### Setting containers and adding Richtext +#### Set containers and add RichText -To display Richtext on the page, you need to create a container for RichText and initialize the component using the corresponding constructor: +Create a container for RichText and initialize the component: ~~~html {} title="Richtext.vue"