Skip to content

Commit d2e5847

Browse files
serhiipylypchuk1991serhiipylypchuk1991
authored
Merge pull request #10 from DHTMLX/next
[update] RichText 2.0
2 parents 0d89b78 + 2cc3816 commit d2e5847

File tree

121 files changed

+9296
-7760
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+9296
-7760
lines changed

‎docs/api/config/default-styles.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
sidebar_label: defaultStyles
3+
title: defaultStyles Config
4+
description: You can learn about the defaultStyles config 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+
# defaultStyles
8+
9+
### Description
10+
11+
@short: Optional. Specifies default style values for specific block types
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
defaultStyles?: {
17+
"*"?: { // affects all blocks, allowing you to set common properties for all of these blocks
18+
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
19+
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
20+
color?: string;
21+
background?: string;
22+
},
23+
p?: {
24+
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
25+
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
26+
color?: string;
27+
background?: string;
28+
},
29+
blockquote?: {
30+
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
31+
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
32+
color?: string;
33+
background?: string;
34+
},
35+
h1?: {
36+
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
37+
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
38+
color?: string;
39+
background?: string;
40+
},
41+
h2?: {
42+
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
43+
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
44+
color?: string;
45+
background?: string;
46+
},
47+
h3?: {
48+
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
49+
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
50+
color?: string;
51+
background?: string;
52+
},
53+
h4?: {
54+
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
55+
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
56+
color?: string;
57+
background?: string;
58+
},
59+
h5?: {
60+
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
61+
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
62+
color?: string;
63+
background?: string;
64+
},
65+
h6?: {
66+
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
67+
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
68+
color?: string;
69+
background?: string;
70+
}
71+
};
72+
~~~
73+
74+
:::important
75+
The `defaultStyles` property DOES NOT set the actual CSS to the affected blocks. CSS styles have to be applied separately:
76+
77+
```jsx title="index.js"
78+
new richtext.Richtext("#root", {
79+
defaultStyles: {
80+
h2: {
81+
"font-family": "Roboto",
82+
"font-size": "28px",
83+
color: "purple",
84+
background: "#FFC0CB"
85+
}
86+
}
87+
});
88+
```
89+
90+
```css title="index.css"
91+
<style>
92+
#root h2 {
93+
font-family: Roboto;
94+
font-size: 28px;
95+
color: purple;
96+
background: #FFC0CB;
97+
}
98+
</style>
99+
```
100+
101+
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 assigned to `h2` blocks as well.
102+
:::
103+
104+
### Default config
105+
106+
~~~jsx
107+
const defaultStyles = {
108+
"*": { "font-family": "Arial" },
109+
p: { "font-size": "14px" },
110+
blockquote: { "font-size": "14px" },
111+
h1: { "font-size": "32px" },
112+
h2: { "font-size": "24px" },
113+
h3: { "font-size": "18px" },
114+
h4: { "font-size": "16px" },
115+
h5: { "font-size": "14px" },
116+
h6: { "font-size": "12px" }
117+
};
118+
~~~
119+
120+
### Example
121+
122+
~~~jsx {3-13}
123+
// initialize RichText
124+
new richtext.Richtext("#root", {
125+
defaultStyles: {
126+
h4: {
127+
"font-family": "Roboto"
128+
},
129+
h5: {
130+
"font-family": "Roboto"
131+
},
132+
h6: {
133+
"font-family": "Roboto"
134+
}
135+
},
136+
// other configuration properties
137+
});
138+
~~~
139+
140+
**Change log:** The property was updated in v2.0
141+
142+
**Related articles:** [Configuration](guides/configuration.md)
143+
144+
**Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s)

‎docs/api/config/fullscreen-mode.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
sidebar_label: fullscreenMode
3+
title: fullscreenMode Config
4+
description: You can learn about the fullscreenMode config 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+
# fullscreenMode
8+
9+
### Description
10+
11+
@short: Optional. Enables the RichText fullscreen mode
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
fullscreenMode?: boolean;
17+
~~~
18+
19+
### Default config
20+
21+
~~~jsx
22+
fullscreenMode: false;
23+
~~~
24+
25+
### Example
26+
27+
~~~jsx {3}
28+
// initialize RichText
29+
new richtext.Richtext("#root", {
30+
fullscreenMode: true
31+
// other configuration properties
32+
});
33+
~~~
34+
35+
**Change log:** The property was added in v2.0
36+
37+
**Related articles:** [Configuration](guides/configuration.md)
38+
39+
**Related sample:** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7)

‎docs/api/config/image-upload-url.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
sidebar_label: imageUploadUrl
3+
title: imageUploadUrl Config
4+
description: You can learn about the imageUploadUrl config 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+
# imageUploadUrl
8+
9+
### Description
10+
11+
@short: Optional. Specifies the URL which will be used for image upload
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
imageUploadUrl?: string;
17+
~~~
18+
19+
### Example
20+
21+
~~~jsx {3}
22+
// initialize RichText
23+
new richtext.Richtext("#root", {
24+
imageUploadUrl: "some URL"
25+
// other configuration properties
26+
});
27+
~~~
28+
29+
**Change log:** The property was added in v2.0
30+
31+
**Related articles:** [Configuration](guides/configuration.md)
32+
33+
**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy)

‎docs/api/config/layout-mode.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
sidebar_label: layoutMode
3+
title: layoutMode Config
4+
description: You can learn about the layoutMode config 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+
# layoutMode
8+
9+
### Description
10+
11+
@short: Optional. Specifies the layout mode for the main editor area
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
layoutMode: "classic" | "document";
17+
~~~
18+
19+
The `"classic"` mode represents the edit area that fits the entire page. The `"document"` mode closely represent the real document sizes (sizes used: A4, A5, A6, A7).
20+
21+
### Default config
22+
23+
~~~jsx
24+
layoutMode: "classic";
25+
~~~
26+
27+
### Example
28+
29+
~~~jsx {3}
30+
// initialize RichText
31+
new richtext.Richtext("#root", {
32+
layoutMode: "document" // initializes RichText with "document" mode by default
33+
// other configuration properties
34+
});
35+
~~~
36+
37+
**Change log:** The property was added in v2.0 instead of the removed `mode` property
38+
39+
**Related articles:** [Configuration](guides/configuration.md)
40+
41+
**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy)

‎docs/api/config/locale.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
sidebar_label: locale
3+
title: locale Config
4+
description: You can learn about the locale config 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+
# locale
8+
9+
### Description
10+
11+
@short: Optional. An object that includes localization labels of RichText
12+
13+
:::info
14+
The **locale** object needs to include all labels of RichText with the corresponding translations.
15+
:::
16+
17+
### Usage
18+
19+
~~~jsx {}
20+
locale?: object;
21+
~~~
22+
23+
### Default config
24+
25+
By default, RichText uses the **English** locale. You can set it to the custom locale as well.
26+
27+
:::tip
28+
To change the current locale dynamically, you can use the [**setLocale()**](api/methods/set-locale.md) method of RichText
29+
:::
30+
31+
### Example
32+
33+
~~~jsx {3}
34+
// initialize RichText
35+
const editor = new richtext.RichText("#root", {
36+
locale: richtext.locales.cn // the Chineese locale will be set initially
37+
// locale: richtext.locales.en // the English locale will be set initially
38+
// locale: richtext.locales.de // the Germany locale will be set initially
39+
// other configuration properties
40+
});
41+
~~~
42+
43+
**Change log:** The property was added in v2.0
44+
45+
**Related articles:** [Localization](guides/localization.md)
46+
47+
**Related sample:** [RichText. Localization](https://snippet.dhtmlx.com/zxjrin3i)

‎docs/api/config/menubar.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
sidebar_label: menubar
3+
title: menubar Config
4+
description: You can learn about the menubar config 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+
# menubar
8+
9+
### Description
10+
11+
@short: Optional. Enables the top menubar of RichText
12+
13+
### Usage
14+
15+
~~~jsx {}
16+
menubar?: boolean;
17+
~~~
18+
19+
### Example
20+
21+
~~~jsx {3}
22+
// initialize RichText
23+
new richtext.Richtext("#root", {
24+
menubar: true
25+
// other configuration properties
26+
});
27+
~~~
28+
29+
**Change log:** The property was added in v2.0
30+
31+
**Related articles:** [Configuration](guides/configuration.md)
32+
33+
**Related sample:** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7)

0 commit comments

Comments
 (0)