Skip to content

Commit 8580bbc

Browse files
serhiipylypchuk1991serhiipylypchuk1991
committed
[update] svelte integration guide
1 parent eca2cda commit 8580bbc

File tree

3 files changed

+271
-25
lines changed

3 files changed

+271
-25
lines changed

‎docs/guides/integration_with_svelte.md‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
---
2+
sidebar_label: Integration with Svelte
3+
title: Integration with Svelte
4+
description: You can learn about the integration with Svelte in the documentation of the DHTMLX JavaScript RichText library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText.
5+
---
6+
7+
# Integration with Svelte
8+
9+
:::tip
10+
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/).
11+
:::
12+
13+
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).
14+
15+
## Creating a project
16+
17+
:::info
18+
Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
19+
:::
20+
21+
There are several ways of creating a **Svelte** project:
22+
23+
- you can use the [**SvelteKit**](https://kit.svelte.dev/)
24+
25+
or
26+
27+
- you can also use **Svelte with Vite** (but without SvelteKit):
28+
29+
~~~json
30+
npm create vite@latest
31+
~~~
32+
33+
Check the details in the [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit).
34+
35+
### Installation of dependencies
36+
37+
Let's name the project as **my-svelte-richtext-app** and go to the app directory:
38+
39+
~~~json
40+
cd my-svelte-richtext-app
41+
~~~
42+
43+
Install dependencies and start the dev server. For this, use a package manager:
44+
45+
- if you use [**yarn**](https://yarnpkg.com/), run the following commands:
46+
47+
~~~json
48+
yarn
49+
yarn start
50+
~~~
51+
52+
- if you use [**npm**](https://www.npmjs.com/), run the following commands:
53+
54+
~~~json
55+
npm install
56+
npm run dev
57+
~~~
58+
59+
The app should run on a localhost (for instance `http://localhost:3000`).
60+
61+
## Creating RichText
62+
63+
Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
64+
65+
### Step 1. Package installation
66+
67+
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.
68+
69+
### Step 2. Component creation
70+
71+
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***.
72+
73+
#### Importing source files
74+
75+
Open the ***Richtext.svelte*** file and import RichText source files. Note that:
76+
77+
- if you use PRO version and install the RichText package from a local folder, the import paths look like this:
78+
79+
~~~html title="Richtext.svelte"
80+
<script>
81+
import { Richtext} from 'dhx-richtext-package';
82+
import 'dhx-richtext-package/codebase/richtext.css';
83+
</script>
84+
~~~
85+
86+
Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **richtext.min.css**.
87+
88+
- if you use the trial version of RichText, specify the following paths:
89+
90+
~~~html title="Richtext.svelte"
91+
<script>
92+
import { Richtext} from '@dhx/trial-richtext';
93+
import '@dhx/trial-richtext/codebase/richtext.css';
94+
<script>
95+
~~~
96+
97+
In this tutorial you can see how to configure the **trial** version of RichText.
98+
99+
#### Setting containers and adding RichText
100+
101+
To display RichText on the page, you need to create container for RichText, and initialize the component using the corresponding constructor:
102+
103+
~~~html {3,6,10-11,13-17,27-28} title="Richtext.svelte"
104+
<script>
105+
import { onMount, onDestroy } from "svelte";
106+
import { Richtext} from "@dhx/trial-richtext";
107+
import "@dhx/trial-richtext/codebase/richtext.css";
108+
109+
let richtext_container; // initialize container for RichText
110+
let editor;
111+
112+
onMount(() => {
113+
// initialize the RichText component
114+
editor = new Richtext(richtext_container, {});
115+
});
116+
117+
onDestroy(() => {
118+
editor?.destructor(); // destruct RichText
119+
});
120+
</script>
121+
122+
<div class="component_container">
123+
<div bind:this={richtext_container} class="widget"></div>
124+
</div>
125+
~~~
126+
127+
#### Loading data
128+
129+
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:
130+
131+
~~~jsx {2-6} title="data.ts"
132+
export function getData() {
133+
const value = `
134+
<h2>RichText 2.0</h2>
135+
<p>Repository at <a href="https://git.webix.io/xbs/richtext">https://git.webix.io/xbs/richtext</a></p>
136+
<p><img src="https://placecats.com/500/300" style="width:500px;height:300px;"></p>`;
137+
return { value };
138+
}
139+
~~~
140+
141+
Then open the ***App.svelte*** file, import data, and pass it into the new created `<RichText/>` components as **props**:
142+
143+
~~~html {3,5,8} title="App.svelte"
144+
<script>
145+
import RichText from "./Richtext.svelte";
146+
import { getData } from "./data.js";
147+
148+
const { value } = getData();
149+
</script>
150+
151+
<RichText value={value} />
152+
~~~
153+
154+
Go to the ***Richtext.svelte*** file and apply the passed **props** to the RichText configuration object:
155+
156+
~~~html {6-8,15-17} title="Richtext.svelte"
157+
<script>
158+
import { onMount, onDestroy } from "svelte";
159+
import { Richtext } from "@dhx/trial-richtext";
160+
import "@dhx/trial-richtext/codebase/richtext.css";
161+
162+
export let value
163+
164+
let richtext_container;
165+
let editor;
166+
167+
onMount(() => {
168+
editor = new Richtext(richtext_container, {
169+
value
170+
// other configuration properties
171+
})
172+
});
173+
174+
onDestroy(() => {
175+
editor.destructor();
176+
});
177+
</script>
178+
179+
<div class="component_container">
180+
<div bind:this={richtext_container} class="widget"></div>
181+
</div>
182+
~~~
183+
184+
You can also use the [`setValue()`](/api/methods/set-value.md) method inside the `onMount()` method of Svelte to load data into RichText:
185+
186+
~~~html {6-8,27} title="Richtext.svelte"
187+
<script>
188+
import { onMount, onDestroy } from "svelte";
189+
import { Richtext } from "@dhx/trial-richtext";
190+
import "@dhx/trial-richtext/codebase/richtext.css";
191+
192+
export let value;
193+
194+
let richtext_container;
195+
let editor;
196+
197+
onMount(() => {
198+
editor = new Richtext(richtext_container, {
199+
// other configuration properties
200+
})
201+
202+
editor.setValue(value);
203+
});
204+
205+
onDestroy(() => {
206+
editor.destructor();
207+
});
208+
</script>
209+
210+
<div class="component_container">
211+
<div bind:this={richtext_container} class="widget"></div>
212+
</div>
213+
~~~
214+
215+
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](/category/api/) to check the full list of available properties.
216+
217+
#### Handling events
218+
219+
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](/category/richtext-events/).
220+
221+
Open ***Richtext.svelte*** and complete the `onMount()` method in the following way:
222+
223+
~~~html {8-10} title="Richtext.svelte"
224+
<script>
225+
// ...
226+
let editor;
227+
228+
onMount(() => {
229+
editor = new Richtext(richtext_container, {})
230+
231+
editor.api.on("print", () => {
232+
console.log("The document is printing");
233+
});
234+
});
235+
236+
onDestroy(() => {
237+
editor?.destructor();
238+
});
239+
</script>
240+
241+
// ...
242+
~~~
243+
244+
### Step 3. Adding RichText into the app
245+
246+
To add the component into the app, open the **App.svelte** file and replace the default code with the following one:
247+
248+
~~~html title="App.svelte"
249+
<script>
250+
import RichText from "./Richtext.svelte";
251+
import { getData } from "./data.js";
252+
253+
const { value } = getData();
254+
</script>
255+
256+
<RichText value={value} />
257+
~~~
258+
259+
After that, you can start the app to see RichText loaded with data on a page.
260+
261+
[TODO]
262+
263+
Now you know how to integrate DHTMLX RichText with Svelte. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).

‎docs/guides/integration_with_vue.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -259,8 +259,8 @@ export default {
259259
this.editor = new Richtext(this.$refs.cont, {});
260260
261261
this.editor.api.on("print", () => {
262-
console.log("The document is printing");
263-
});
262+
console.log("The document is printing");
263+
});
264264
},
265265
266266
unmounted() {

‎sidebars.js‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ module.exports = {
9494
}
9595
]
9696
},
97+
// JS RichText events
9798
{
9899
type: "category",
99100
label: "RichText events",
@@ -112,6 +113,8 @@ module.exports = {
112113
"api/events/create-new",
113114
"api/events/cut",
114115
"api/events/delete-link",
116+
"api/events/export",
117+
"api/events/import",
115118
"api/events/indent",
116119
"api/events/insert-image",
117120
"api/events/insert-line",
@@ -124,19 +127,20 @@ module.exports = {
124127
"api/events/resize-image",
125128
"api/events/set-font-family",
126129
"api/events/set-font-size",
127-
"api/events/set-layout-mode",
128130
"api/events/set-line-height",
129131
"api/events/set-text-color",
130132
"api/events/set-text-format",
131133
"api/events/set-text-style",
132-
"api/events/set-value",
133134
"api/events/subscript",
134135
"api/events/superscript",
135136
"api/events/toggle-fullscreen",
137+
"api/events/toggle-layout-mode",
138+
"api/events/toggle-shortcut-info",
136139
"api/events/undo",
137140
"api/events/update-link"
138141
]
139142
},
143+
// JS RichText properties
140144
{
141145
type: "category",
142146
label: "RichText properties",
@@ -149,7 +153,6 @@ module.exports = {
149153
image: "/img/docusaurus.png"
150154
},
151155
items: [
152-
// JS RichText
153156
"api/config/default-styles",
154157
"api/config/fullscreen",
155158
"api/config/image-upload-url",
@@ -162,26 +165,6 @@ module.exports = {
162165
}
163166
]
164167
},
165-
/*
166-
{
167-
type: "category",
168-
label: "API",
169-
collapsed: false,
170-
link: {
171-
type: "doc",
172-
id: "api/overview"
173-
},
174-
items: [
175-
"api/methods",
176-
"api/events_bus",
177-
"api/events",
178-
"api/properties",
179-
"api/editor_api_methods",
180-
"api/toolbar_methods",
181-
"api/toolbar_controls",
182-
],
183-
},
184-
*/
185168
{
186169
type: "category",
187170
label: "Guides",

0 commit comments

Comments
 (0)