@@ -95,7 +95,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation}
})
export class RichTextComponent implements OnInit, OnDestroy {
- // initialize container for RichText
+ // container for RichText
@ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
private _editor!: Richtext;
@@ -106,20 +106,20 @@ export class RichTextComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
- this._editor.destructor(); // destruct RichText
+ this._editor.destructor(); // destroy RichText
}
}
~~~
-#### Adding styles
+#### Add styles
-To display RichText correctly, you need to provide the corresponding styles. For this purpose, you can create the **richtext.component.css** file in the **src/app/richtext/** directory and specify important styles for RichText and its container:
+Create the *richtext.component.css* file in the *src/app/richtext/* directory with the styles for RichText and its container:
~~~css title="richtext.component.css"
/* import RichText styles */
@import "@dhx/trial-richtext/dist/richtext.css";
-/* specify styles for initial page */
+/* base page styles */
html,
body{
height: 100%;
@@ -127,21 +127,21 @@ body{
margin: 0;
}
-/* specify styles for RichText container */
+/* RichText container */
.component_container {
height: 100%;
margin: 0 auto;
}
-/* specify styles for RichText widget */
+/* RichText widget */
.widget {
height: calc(100% - 56px);
}
~~~
-#### Loading data
+#### Load data
-To add data into RichText, you need to provide a data set. You can create the **data.ts** file in the **src/app/richtext/** directory and add some data into it:
+Provide data for RichText. Create the *data.ts* file in the *src/app/richtext/* directory:
~~~jsx {} title="data.ts"
export function getData() {
@@ -153,12 +153,12 @@ export function getData() {
}
~~~
-Then open the ***richtext.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of RichText within the `ngOnInit()` method, as shown below:
+Open *richtext.component.ts*. Import the data and pass the `value` property to the RichText configuration inside `ngOnInit()`:
~~~jsx {} title="richtext.component.ts"
-import { Richtext} from '@dhx/trial-richtext';
+import { Richtext } from '@dhx/trial-richtext';
import { getData } from "./data"; // import data
-import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
@@ -172,10 +172,10 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation}
export class RichTextComponent implements OnInit, OnDestroy {
@ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
- private _editor!: RichText;
+ private _editor!: Richtext;
ngOnInit() {
- const { value } = getData(); // initialize data property
+ const { value } = getData(); // extract the value from the data module
this._editor = new Richtext(this.richtext_container.nativeElement, {
value
// other configuration properties
@@ -188,12 +188,12 @@ export class RichTextComponent implements OnInit, OnDestroy {
}
~~~
-You can also use the [`setValue()`](api/methods/set-value.md) method inside the `ngOnInit()` method of Angular to load data into RichText.
+Alternatively, call the [`setValue()`](api/methods/set-value.md) method inside `ngOnInit()` to load data into RichText:
~~~jsx {} title="richtext.component.ts"
-import { Richtext} from '@dhx/trial-richtext';
+import { Richtext } from '@dhx/trial-richtext';
import { getData } from "./data"; // import data
-import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None,
@@ -207,16 +207,16 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation}
export class RichTextComponent implements OnInit, OnDestroy {
@ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
- private _editor!: RichText;
+ private _editor!: Richtext;
ngOnInit() {
- const { value } = getData(); // initialize data property
+ const { value } = getData(); // extract the value from the data module
this._editor = new Richtext(this.richtext_container.nativeElement, {
// other configuration properties
});
// apply the data via the setValue() method
- this._editor.setValue({ value });
+ this._editor.setValue(value);
}
ngOnDestroy(): void {
@@ -225,13 +225,13 @@ export class RichTextComponent implements OnInit, OnDestroy {
}
~~~
-Now the RichText component is ready to use. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties.
+The RichText component is ready to use. Angular renders the editor with data when the `
` element mounts. For the full list of configuration options, see the [RichText API overview](api/overview/main_overview.md).
-#### Handling events
+#### Handle events
-When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
+RichText fires events on user actions. Subscribe to events with the [`api.on()`](api/internal/on.md) method to react to user input. See the [full list of events](api/overview/events_overview.md).
-Open the **richtext.component.ts** file and complete the `ngOnInit()` method in the following way:
+Open *richtext.component.ts* and update the `ngOnInit()` method. The example below logs a message on every [`print`](api/events/print.md) event:
~~~jsx {} title="richtext.component.ts"
// ...
@@ -248,9 +248,9 @@ ngOnDestroy(): void {
}
~~~
-### Step 3. Adding RichText into the app
+### Step 3. Add RichText to the app
-To add the ***RichTextComponent*** component into your app, open the ***src/app/app.component.ts*** file and replace the default code with the following one:
+Open *src/app/app.component.ts* and replace the default code with the `
` selector:
~~~jsx {} title="app.component.ts"
import { Component } from "@angular/core";
@@ -264,7 +264,7 @@ export class AppComponent {
}
~~~
-Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *RichTextComponent* as shown below:
+Create *src/app/app.module.ts* and declare the `RichTextComponent`:
~~~jsx {} title="app.module.ts"
import { NgModule } from "@angular/core";
@@ -281,7 +281,7 @@ import { RichTextComponent } from "./richtext/richtext.component";
export class AppModule {}
~~~
-The last step is to open the ***src/main.ts*** file and replace the existing code with the following one:
+Open *src/main.ts* and replace the contents with the bootstrap 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 render with data on the page.
-Now you know how to integrate DHTMLX RichText with Angular. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo).
+You now have a working RichText integration in Angular. Customize the code to fit your needs. A complete example is available 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..73a882e 100644
--- a/docs/guides/integration_with_react.md
+++ b/docs/guides/integration_with_react.md
@@ -7,99 +7,99 @@ description: You can learn about the integration with React in the documentation
# Integration with React
:::tip
-You should be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, please refer to the [**React documentation**](https://react.dev/learn).
+Make sure you are familiar with basic [React](https://react.dev) concepts and patterns. For a refresher, see the [React documentation](https://react.dev/learn).
:::
-DHTMLX RichText is compatible with **React**. We have prepared code examples on how to use DHTMLX RichText with **React**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/react-richtext-demo).
+DHTMLX RichText works with React. For a complete code example, see the [GitHub demo](https://github.com/DHTMLX/react-richtext-demo).
-## Creating a project
+## Create a project
:::info
-Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
+Install [Node.js](https://nodejs.org/en/) and (optionally) [Vite](https://vite.dev/) before creating a new project.
:::
-You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-richtext-app**:
+Create a new *my-react-richtext-app* project with Create React App:
-~~~json
+~~~bash
npx create-react-app my-react-richtext-app
~~~
-### Installation of dependencies
+### Install dependencies
-Go to the new created app directory:
+Switch to the new app directory:
-~~~json
+~~~bash
cd my-react-richtext-app
~~~
-Install dependencies and start the dev server. For this, use a package manager:
+Install dependencies and start the dev server with a package manager.
-- if you use [**yarn**](https://yarnpkg.com/), run the following commands:
+For [yarn](https://yarnpkg.com/), run:
-~~~json
+~~~bash
yarn
yarn start
~~~
-- if you use [**npm**](https://www.npmjs.com/), run the following commands:
+For [npm](https://www.npmjs.com/), run:
-~~~json
+~~~bash
npm install
-npm run dev
+npm start
~~~
-The app should run on a localhost (for instance `http://localhost:3000`).
+The app runs on localhost (for example, `http://localhost:3000`).
-## Creating RichText
+## Create RichText
-Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
+Stop the app and install the RichText package.
-### Step 1. Package installation
+### Step 1. Install the package
-Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only.
+Download the [trial RichText package](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial license is valid for 30 days.
-### Step 2. Component creation
+### Step 2. Create the component
-Now you need to create a React component, to add a RichText into the application. Create a new file in the ***src/*** directory and name it ***Richtext.jsx***.
+Create a React component to add RichText to the application. In the *src/* directory, create a new file named *Richtext.jsx*.
-#### Importing source files
+#### Import source files
-Open the ***Richtext.jsx*** file and import RichText source files. Note that:
+Open *Richtext.jsx* and import the RichText source files.
-- if you use PRO version and install the RichText package from a local folder, the import paths look like this:
+For the PRO version installed from a local folder, use:
~~~jsx title="Richtext.jsx"
-import { Richtext} from 'dhx-richtext-package';
+import { Richtext } from 'dhx-richtext-package';
import 'dhx-richtext-package/dist/richtext.css';
~~~
-- if you use the trial version of RichText, specify the following paths:
+For the trial version, use:
~~~jsx title="Richtext.jsx"
-import { Richtext} from '@dhx/trial-richtext';
+import { Richtext } from '@dhx/trial-richtext';
import "@dhx/trial-richtext/dist/richtext.css";
~~~
-In this tutorial you can see how to configure the **trial** version of RichText.
+This tutorial uses the trial version of RichText.
-#### Setting containers and adding Richtext
+#### Set the container and initialize RichText
-To display RichText on the page, you need to create container for RichText and initialize the component using the corresponding constructors:
+Set a container element for RichText and initialize the component with the `Richtext` constructor inside `useEffect()`. Call the [`destructor()`](api/methods/destructor.md) method in the cleanup function to remove RichText:
~~~jsx {} title="Richtext.jsx"
import { useEffect, useRef } from "react";
-import { Richtext} from '@dhx/trial-richtext';
+import { Richtext } from '@dhx/trial-richtext';
import '@dhx/trial-richtext/dist/richtext.css'; // include RichText styles
export default function RichTextComponent(props) {
- let richtext_container = useRef(); // initialize container for RichText
+ let richtext_container = useRef(); // container for RichText
useEffect(() => {
// initialize the RichText component
const editor = new Richtext(richtext_container.current, {});
return () => {
- editor.destructor(); // destruct RichText
+ editor.destructor(); // destroy RichText
};
}, []);
@@ -109,12 +109,12 @@ export default function RichTextComponent(props) {
}
~~~
-#### Adding styles
+#### Add styles
-To display RichText correctly, you need to specify important styles for RichText and its container in the main css file of the project:
+Add the styles for RichText and its container to the main CSS file of the project:
~~~css title="index.css"
-/* specify styles for initial page */
+/* base page styles */
html,
body,
#root {
@@ -123,21 +123,21 @@ body,
margin: 0;
}
-/* specify styles for RichText container */
+/* RichText container */
.component_container {
height: 100%;
margin: 0 auto;
}
-/* specify styles for RichText widget */
+/* RichText widget */
.widget {
height: calc(100% - 56px);
}
~~~
-#### Loading data
+#### Load data
-To add data into the RichText, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
+Provide data for RichText. Create the *data.js* file in the *src/* directory:
~~~jsx {} title="data.js"
export function getData() {
@@ -149,7 +149,7 @@ export function getData() {
}
~~~
-Then open the ***App.js*** file and import data. After this you can pass data into the new created `
` components as **props**:
+Open *App.js* and import the data. Pass the value to the `
` component as a prop:
~~~jsx {2,5-6} title="App.js"
import RichText from "./Richtext";
@@ -163,11 +163,11 @@ function App() {
export default App;
~~~
-Go to the ***Richtext.jsx*** file and apply the passed **props** to the RichText configuration object:
+Open *Richtext.jsx* and pass `props.value` to the RichText configuration:
~~~jsx {} title="Richtext.jsx"
import { useEffect, useRef } from "react";
-import { Richtext} from "@dhx/trial-richtext";
+import { Richtext } from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";
export default function RichTextComponent(props) {
@@ -190,11 +190,11 @@ export default function RichTextComponent(props) {
}
~~~
-You can also use the [`setValue()`](api/methods/set-value.md) method inside the `useEffect()` method of React to load data into RichText:
+Alternatively, call the [`setValue()`](api/methods/set-value.md) method inside `useEffect()` to load data into RichText:
~~~jsx {} title="Richtext.jsx"
import { useEffect, useRef } from "react";
-import { Richtext} from "@dhx/trial-richtext";
+import { Richtext } from "@dhx/trial-richtext";
import "@dhx/trial-richtext/dist/richtext.css";
export default function RichTextComponent(props) {
@@ -220,13 +220,13 @@ export default function RichTextComponent(props) {
}
~~~
-Now the RichText component is ready. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties.
+The RichText component is ready to use. React renders the editor with data when the `
` element mounts. For the full list of configuration options, see the [RichText API overview](api/overview/main_overview.md).
-#### Handling events
+#### Handle events
-When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
+RichText fires events on user actions. Subscribe to events with the [`api.on()`](api/internal/on.md) method to react to user input. See the [full list of events](api/overview/events_overview.md).
-Open ***Richtext.jsx*** and complete the `useEffect()` method in the following way:
+Open *Richtext.jsx* and update the `useEffect()` hook. The example below logs a message on every [`print`](api/events/print.md) event:
~~~jsx {} title="Richtext.jsx"
// ...
@@ -244,10 +244,10 @@ useEffect(() => {
// ...
~~~
-After that, you can start the app to see RichText loaded with data on a page.
+Start the app to see RichText render with data on the page.
-Now you know how to integrate DHTMLX RichText with React. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/react-richtext-demo).
+You now have a working RichText integration in React. Customize the code to fit your needs. A complete example is available 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..3553b25 100644
--- a/docs/guides/integration_with_svelte.md
+++ b/docs/guides/integration_with_svelte.md
@@ -7,104 +7,98 @@ description: You can learn about the integration with Svelte in the documentatio
# Integration with Svelte
:::tip
-You should be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, please refer to the [**Svelte documentation**](https://svelte.dev/).
+Make sure you are familiar with basic [Svelte](https://svelte.dev/) concepts and patterns. For a refresher, see the [Svelte documentation](https://svelte.dev/docs).
:::
-DHTMLX RichText is compatible with **Svelte**. We have prepared code examples on how to use DHTMLX RichText with **Svelte**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).
+DHTMLX RichText works with Svelte. For a complete code example, see the [GitHub demo](https://github.com/DHTMLX/svelte-richtext-demo).
-## Creating a project
+## Create a project
:::info
-Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
+Install [Node.js](https://nodejs.org/en/) and (optionally) [Vite](https://vite.dev/) before creating a new project.
:::
-There are several ways of creating a **Svelte** project:
+This tutorial uses a Vite-based Svelte project. For SvelteKit and other options, see the [Svelte project guide](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit).
-- you can use the [**SvelteKit**](https://kit.svelte.dev/)
+Start a new Vite project:
-or
-
-- you can also use **Svelte with Vite** (but without SvelteKit):
-
-~~~json
+~~~bash
npm create vite@latest
~~~
-Check the details in the [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit).
+### Install dependencies
-### Installation of dependencies
+When the scaffolder prompts for a project name, use *my-svelte-richtext-app*. Then switch to the new directory:
-Let's name the project as **my-svelte-richtext-app** and go to the app directory:
-
-~~~json
+~~~bash
cd my-svelte-richtext-app
~~~
-Install dependencies and start the dev server. For this, use a package manager:
+Install dependencies and start the dev server with a package manager.
-- if you use [**yarn**](https://yarnpkg.com/), run the following commands:
+For [yarn](https://yarnpkg.com/), run:
-~~~json
+~~~bash
yarn
-yarn start
+yarn dev
~~~
-- if you use [**npm**](https://www.npmjs.com/), run the following commands:
+For [npm](https://www.npmjs.com/), run:
-~~~json
+~~~bash
npm install
npm run dev
~~~
-The app should run on a localhost (for instance `http://localhost:3000`).
+The app runs on localhost (for example, `http://localhost:3000`).
-## Creating RichText
+## Create RichText
-Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
+Stop the app and install the RichText package.
-### Step 1. Package installation
+### Step 1. Install the package
-Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only.
+Download the [trial RichText package](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial license is valid for 30 days.
-### Step 2. Component creation
+### Step 2. Create the component
-Now you need to create a Svelte component, to add a RichText into the application. Let's create a new file in the ***src/*** directory and name it ***Richtext.svelte***.
+Create a Svelte component to add RichText to the application. In the *src/* directory, create a new file named *Richtext.svelte*.
-#### Importing source files
+#### Import source files
-Open the ***Richtext.svelte*** file and import RichText source files. Note that:
+Open *Richtext.svelte* and import the RichText source files.
-- if you use PRO version and install the RichText package from a local folder, the import paths look like this:
+For the PRO version installed from a local folder, use:
~~~html title="Richtext.svelte"
~~~
-- if you use the trial version of RichText, specify the following paths:
+For the trial version, use:
~~~html title="Richtext.svelte"
~~~
-In this tutorial you can see how to configure the **trial** version of RichText.
+This tutorial uses the trial version of RichText.
-#### Setting containers and adding RichText
+#### Set the container and initialize RichText
-To display RichText on the page, you need to create container for RichText, and initialize the component using the corresponding constructor:
+Set a container element for RichText and initialize the component inside `onMount()`. Call the [`destructor()`](api/methods/destructor.md) method inside `onDestroy()` to remove RichText:
~~~html {} title="Richtext.svelte"
@@ -122,11 +116,36 @@ onDestroy(() => {
~~~
-#### Loading data
+#### Add styles
+
+Add the styles for RichText and its container to the main CSS file of the project (for example, *src/app.css*):
+
+~~~css title="app.css"
+/* base page styles */
+html,
+body {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+/* RichText container */
+.component_container {
+ height: 100%;
+ margin: 0 auto;
+}
+
+/* RichText widget */
+.widget {
+ height: calc(100% - 56px);
+}
+~~~
+
+#### Load data
-To add data into the RichText, we need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
+Provide data for RichText. Create the *data.js* file in the *src/* directory:
-~~~jsx {} title="data.ts"
+~~~jsx {} title="data.js"
export function getData() {
const value = `