Skip to content

Commit 88b3de8

Browse files
serhiipylypchuk1991serhiipylypchuk1991
committed
Add properties description
1 parent aba23eb commit 88b3de8

7 files changed

Lines changed: 318 additions & 42 deletions

File tree

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

Lines changed: 116 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,134 @@ description: You can learn about the defaultStyles config in the documentation o
88

99
### Description
1010

11-
@short: Optional. ...
11+
@short: Optional. Specifies default style values for specific block types
1212

1313
### Usage
1414

1515
~~~jsx {}
16-
defaultStyles?: ...;
16+
defaultStyles?: boolean | {
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+
```html{12-19}
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+
<style>
90+
#container h2 {
91+
font-family: Roboto;
92+
font-size: 28px;
93+
color: purple;
94+
background: #FFC0CB;
95+
}
96+
</style>
97+
```
98+
99+
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.
100+
:::
101+
102+
### Default config
103+
104+
~~~jsx
105+
const defaultStyles = {
106+
"*": { "font-family": "Arial" },
107+
p: { "font-size": "14px" },
108+
blockquote: { "font-size": "14px" },
109+
h1: { "font-size": "32px" },
110+
h2: { "font-size": "24px" },
111+
h3: { "font-size": "18px" },
112+
h4: { "font-size": "16px" },
113+
h5: { "font-size": "14px" },
114+
h6: { "font-size": "12px" }
115+
};
17116
~~~
18117

19118
### Example
20119

21-
~~~jsx {4}
120+
~~~jsx {2-12}
22121
new richtext.Richtext("#root", {
23-
defaultStyles: ...
122+
defaultStyles: {
123+
h4: {
124+
"font-size": "17px"
125+
},
126+
h5: {
127+
"font-size": "15px"
128+
},
129+
h6: {
130+
"font-size": "13px"
131+
}
132+
}
24133
// other parameters
25134
});
26135
~~~
27136

28-
**Change log:** The property was added in v2.0
137+
**Change log:** The property was updated in v2.0
29138

30-
**Related articles:** [Configuration](../../../guides/configuration)
139+
**Related articles:** [Configuration](guides/configuration.md)
31140

32-
**Related sample:** [Richtext. Lazy rendering and column scroll](https://snippet.dhtmlx.com/...)
141+
**Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s)

‎docs/api/config/fullscreen.md‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,31 @@ description: You can learn about the fullscreen config in the documentation of t
88

99
### Description
1010

11-
@short: Optional. ...
11+
@short: Optional. Enables the editor fullscreen mode
1212

1313
### Usage
1414

1515
~~~jsx {}
16-
fullscreen?: ...;
16+
fullscreen?: boolean;
17+
~~~
18+
19+
### Default config
20+
21+
~~~jsx
22+
fullscreen: false
1723
~~~
1824

1925
### Example
2026

21-
~~~jsx {4}
27+
~~~jsx {2}
2228
new richtext.Richtext("#root", {
23-
fullscreen: ...
29+
fullscreen: true
2430
// other parameters
2531
});
2632
~~~
2733

2834
**Change log:** The property was added in v2.0
2935

30-
**Related articles:** [Configuration](../../../guides/configuration)
36+
**Related articles:** [Configuration](guides/configuration.md)
3137

32-
**Related sample:** [Richtext. Lazy rendering and column scroll](https://snippet.dhtmlx.com/...)
38+
**Related sample:** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7)

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,25 @@ description: You can learn about the imageUploadUrl config in the documentation
88

99
### Description
1010

11-
@short: Optional. ...
11+
@short: Optional. Specifies the URL which will be used for image upload
1212

1313
### Usage
1414

1515
~~~jsx {}
16-
imageUploadUrl?: ...;
16+
imageUploadUrl?: string;
1717
~~~
1818

1919
### Example
2020

21-
~~~jsx {4}
21+
~~~jsx {2}
2222
new richtext.Richtext("#root", {
23-
imageUploadUrl: ...
23+
imageUploadUrl: "some URL"
2424
// other parameters
2525
});
2626
~~~
2727

2828
**Change log:** The property was added in v2.0
2929

30-
**Related articles:** [Configuration](../../../guides/configuration)
30+
**Related articles:** [Configuration](guides/configuration.md)
3131

32-
**Related sample:** [Richtext. Lazy rendering and column scroll](https://snippet.dhtmlx.com/...)
32+
**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy)

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

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,33 @@ description: You can learn about the layoutMode config in the documentation of t
88

99
### Description
1010

11-
@short: Optional. ...
11+
@short: Optional. Specifies the layout mode for the main editor area
1212

1313
### Usage
1414

1515
~~~jsx {}
16-
layoutMode?: ...;
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"
1725
~~~
1826

1927
### Example
2028

21-
~~~jsx {4}
29+
~~~jsx {2}
2230
new richtext.Richtext("#root", {
23-
layoutMode: ...
31+
layoutMode: "document" // initializes richtext with "document" mode by default
2432
// other parameters
2533
});
2634
~~~
2735

28-
**Change log:** The property was added in v2.0
36+
**Change log:** The property was added in v2.0 instead of the deprecated `mode` property
2937

3038
**Related articles:** [Configuration](../../../guides/configuration)
3139

32-
**Related sample:** [Richtext. Lazy rendering and column scroll](https://snippet.dhtmlx.com/...)
40+
**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy)

‎docs/api/config/menubar.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,25 @@ description: You can learn about the menubar config in the documentation of the
88

99
### Description
1010

11-
@short: Optional. ...
11+
@short: Optional. Enables the top menubar
1212

1313
### Usage
1414

1515
~~~jsx {}
16-
menubar?: ...;
16+
menubar?: boolean;
1717
~~~
1818

1919
### Example
2020

21-
~~~jsx {4}
21+
~~~jsx {2}
2222
new richtext.Richtext("#root", {
23-
menubar: ...
23+
menubar: true
2424
// other parameters
2525
});
2626
~~~
2727

2828
**Change log:** The property was added in v2.0
2929

30-
**Related articles:** [Configuration](../../../guides/configuration)
30+
**Related articles:** [Configuration](guides/configuration.md)
3131

32-
**Related sample:** [Richtext. Lazy rendering and column scroll](https://snippet.dhtmlx.com/...)
32+
**Related sample:** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7)

0 commit comments

Comments
 (0)