Skip to content

Commit 100f283

Browse files
vladaskorohodovavladaskorohodova
authored
HTML Editor: section Formats topic (DevExpress#6935) (DevExpress#6936)
1 parent 63ed6a6 commit 100f283

File tree

11 files changed

+162
-177
lines changed

11 files changed

+162
-177
lines changed

‎concepts/05 UI Components/HtmlEditor/02 Overview/10 Key Features.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
- **Inline Formats**
1+
- [**Inline Formats**](/Documentation/Guide/UI_Components/HtmlEditor/Formats/#Inline_Or_Text_Formats)
22
HTML Editor includes various inline formatting options:
33
- **Bold**, *italic*, <s>strikethrough</s>, and <u>underscore</u>
44
- Typeface, font size, and text color (HTML)
55

6-
- **Block Formats**
6+
- [**Block Formats**](/Documentation/Guide/UI_Components/HtmlEditor/Formats/#Block_Formats)
77
HTML Editor supports block formatting such as:
88
- Headers
99
- Lists (ordered and unordered)

‎concepts/05 UI Components/HtmlEditor/10 Formats/00 Formats.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
The formats are applied by toolbar items. Most formats have items attached to them out-of-the-box. Refer to [Predefined Items](/concepts/05%20UI%20Components/HtmlEditor/20%20Toolbar/00%20Predefined%20Items '/Documentation/Guide/UI_Components/HtmlEditor/Toolbar/Predefined_Items/') for a full list of toolbar items and the formats they apply.
2+
3+
The following tables list available formats and their values grouped into five categories: inline (or text), block, embedded, image, and table formats.

‎concepts/05 UI Components/HtmlEditor/10 Formats/05 Inline (Or Text) Formats.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<table class="dx-table full-width">
2+
<tr>
3+
<th>Format Name</th>
4+
<th>Accepted Values</th>
5+
<th>Customization Type</th>
6+
</tr>
7+
<tr>
8+
<td>"background"</td>
9+
<td>Any value the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" target="_blank">background-color</a> CSS property accepts.</td>
10+
<td>Modify</td>
11+
</tr>
12+
<tr>
13+
<td>"bold"</td>
14+
<td>true, false</td>
15+
<td>Extend</td>
16+
</tr>
17+
<tr>
18+
<td>"color"</td>
19+
<td>Any value the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">color</a> CSS property accepts.</td>
20+
<td>Modify</td>
21+
</tr>
22+
<tr>
23+
<td>"font"</td>
24+
<td>Any value the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" target="_blank">font-family</a> CSS property accepts.</td>
25+
<td>Modify</td>
26+
</tr>
27+
<tr>
28+
<td>"italic"</td>
29+
<td>true, false</td>
30+
<td>Extend</td>
31+
</tr>
32+
<tr>
33+
<td>"link"</td>
34+
<td>String <br/> or <br/> Object ({ href: String, text: String, target: Boolean })</td>
35+
<td>Extend</td>
36+
</tr>
37+
<tr>
38+
<td>"size"</td>
39+
<td>Any value the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" target="_blank">font-size</a> CSS property accepts.</td>
40+
<td>Modify</td>
41+
</tr>
42+
<tr>
43+
<td>"strike"</td>
44+
<td>true, false</td>
45+
<td>Extend</td>
46+
</tr>
47+
<tr>
48+
<td>"script"</td>
49+
<td>"sub", "super", false</td>
50+
<td>Extend</td>
51+
</tr>
52+
<tr>
53+
<td>"underline"</td>
54+
<td>true, false</td>
55+
<td>Extend</td>
56+
</tr>
57+
</table>

‎concepts/05 UI Components/HtmlEditor/10 Formats/10 Block Formats.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<table class="dx-table full-width">
2+
<tr>
3+
<th>Format Name</th>
4+
<th>Accepted Values</th>
5+
<th>Customization Type</th>
6+
</tr>
7+
<tr>
8+
<td>"blockquote"</td>
9+
<td>true, false</td>
10+
<td>Extend</td>
11+
</tr>
12+
<tr>
13+
<td>"header"</td>
14+
<td>1, 2, 3, 4, 5, 6, false</td>
15+
<td>Extend</td>
16+
</tr>
17+
<tr>
18+
<td>"indent"</td>
19+
<td>"+1", "-1", false</td>
20+
<td>Modify</td>
21+
</tr>
22+
<tr>
23+
<td>"list"</td>
24+
<td>"ordered", "bullet", false</td>
25+
<td>Extend</td>
26+
</tr>
27+
<tr>
28+
<td>"align"</td>
29+
<td>"left", "right", "center", "justify", false</td>
30+
<td>Modify</td>
31+
</tr>
32+
<tr>
33+
<td>"code-block"</td>
34+
<td>true, false</td>
35+
<td>Extend</td>
36+
</tr>
37+
</table>

‎concepts/05 UI Components/HtmlEditor/10 Formats/15 Embedded Formats.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
All the following formats are extendable:
2+
3+
<table class="dx-table full-width">
4+
<tr>
5+
<th>Format Name</th>
6+
<th>Value Types</th>
7+
</tr>
8+
<tr>
9+
<td>"extendedImage"</td>
10+
<td>String <br/> or <br/> Object ({ src: String, width: Number, height: Number, alt: String })</td>
11+
</tr>
12+
<tr>
13+
<td>"variable"</td>
14+
<td>Object ({ value: String, escapeChar: String | Array&lt;String&gt; })</td>
15+
</tr>
16+
<tr>
17+
<td>"mention"</td>
18+
<td>Object ({ marker: String, id: String | Number, value: String })</td>
19+
</tr>
20+
</table>

‎concepts/05 UI Components/HtmlEditor/10 Formats/20 Image Formats.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<table class="dx-table full-width">
2+
<tr>
3+
<th>Format Name</th>
4+
<th>Supports Pasting into HTML Editor</th>
5+
<th>Supports Drag and Drop from File Explorer</th>
6+
</tr>
7+
<tr>
8+
<td>*.png</td>
9+
<td>Yes</td>
10+
<td>Yes</td>
11+
</tr>
12+
<tr>
13+
<td>*.jpg</td>
14+
<td>Yes</td>
15+
<td>Yes</td>
16+
</tr>
17+
<tr>
18+
<td>*.gif</td>
19+
<td>Yes</td>
20+
<td>Yes</td>
21+
</tr>
22+
<tr>
23+
<td>*.webp</td>
24+
<td>Yes</td>
25+
<td>Yes</td>
26+
</tr>
27+
<tr>
28+
<td>*.bmp</td>
29+
<td>Yes</td>
30+
<td>Yes</td>
31+
</tr>
32+
<tr>
33+
<td>*.svg</td>
34+
<td>No</td>
35+
<td>Yes</td>
36+
</tr>
37+
<tr>
38+
<td>*.ico</td>
39+
<td>Yes</td>
40+
<td>No</td>
41+
</tr>
42+
</table>

‎concepts/05 UI Components/HtmlEditor/10 Formats/10 Formats.md‎ renamed to ‎concepts/05 UI Components/HtmlEditor/10 Formats/25 Table Formats.md‎

Lines changed: 1 addition & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -1,175 +1,3 @@
1-
The following tables list available formats and their values grouped into five categories: inline (or text), block, embedded, image, and table formats.
2-
3-
**Inline (or text) formats**
4-
5-
<table class="dx-table full-width">
6-
<tr>
7-
<th>Format Name</th>
8-
<th>Accepted Values</th>
9-
<th>Customization Type</th>
10-
</tr>
11-
<tr>
12-
<td>"background"</td>
13-
<td>Any value the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" target="_blank">background-color</a> CSS property accepts.</td>
14-
<td>Modify</td>
15-
</tr>
16-
<tr>
17-
<td>"bold"</td>
18-
<td>true, false</td>
19-
<td>Extend</td>
20-
</tr>
21-
<tr>
22-
<td>"color"</td>
23-
<td>Any value the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">color</a> CSS property accepts.</td>
24-
<td>Modify</td>
25-
</tr>
26-
<tr>
27-
<td>"font"</td>
28-
<td>Any value the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" target="_blank">font-family</a> CSS property accepts.</td>
29-
<td>Modify</td>
30-
</tr>
31-
<tr>
32-
<td>"italic"</td>
33-
<td>true, false</td>
34-
<td>Extend</td>
35-
</tr>
36-
<tr>
37-
<td>"link"</td>
38-
<td>String <br/> or <br/> Object ({ href: String, text: String, target: Boolean })</td>
39-
<td>Extend</td>
40-
</tr>
41-
<tr>
42-
<td>"size"</td>
43-
<td>Any value the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" target="_blank">font-size</a> CSS property accepts.</td>
44-
<td>Modify</td>
45-
</tr>
46-
<tr>
47-
<td>"strike"</td>
48-
<td>true, false</td>
49-
<td>Extend</td>
50-
</tr>
51-
<tr>
52-
<td>"script"</td>
53-
<td>"sub", "super", false</td>
54-
<td>Extend</td>
55-
</tr>
56-
<tr>
57-
<td>"underline"</td>
58-
<td>true, false</td>
59-
<td>Extend</td>
60-
</tr>
61-
</table>
62-
63-
**Block formats**
64-
65-
<table class="dx-table full-width">
66-
<tr>
67-
<th>Format Name</th>
68-
<th>Accepted Values</th>
69-
<th>Customization Type</th>
70-
</tr>
71-
<tr>
72-
<td>"blockquote"</td>
73-
<td>true, false</td>
74-
<td>Extend</td>
75-
</tr>
76-
<tr>
77-
<td>"header"</td>
78-
<td>1, 2, 3, 4, 5, 6, false</td>
79-
<td>Extend</td>
80-
</tr>
81-
<tr>
82-
<td>"indent"</td>
83-
<td>"+1", "-1", false</td>
84-
<td>Modify</td>
85-
</tr>
86-
<tr>
87-
<td>"list"</td>
88-
<td>"ordered", "bullet", false</td>
89-
<td>Extend</td>
90-
</tr>
91-
<tr>
92-
<td>"align"</td>
93-
<td>"left", "right", "center", "justify", false</td>
94-
<td>Modify</td>
95-
</tr>
96-
<tr>
97-
<td>"code-block"</td>
98-
<td>true, false</td>
99-
<td>Extend</td>
100-
</tr>
101-
</table>
102-
103-
**Embedded formats**
104-
105-
All the following formats are extendable:
106-
107-
<table class="dx-table full-width">
108-
<tr>
109-
<th>Format Name</th>
110-
<th>Value Types</th>
111-
</tr>
112-
<tr>
113-
<td>"extendedImage"</td>
114-
<td>String <br/> or <br/> Object ({ src: String, width: Number, height: Number, alt: String })</td>
115-
</tr>
116-
<tr>
117-
<td>"variable"</td>
118-
<td>Object ({ value: String, escapeChar: String | Array&lt;String&gt; })</td>
119-
</tr>
120-
<tr>
121-
<td>"mention"</td>
122-
<td>Object ({ marker: String, id: String | Number, value: String })</td>
123-
</tr>
124-
</table>
125-
126-
**Image formats**
127-
128-
<table class="dx-table full-width">
129-
<tr>
130-
<th>Format Name</th>
131-
<th>Supports Pasting into HTML Editor</th>
132-
<th>Supports Drag and Drop from File Explorer</th>
133-
</tr>
134-
<tr>
135-
<td>*.png</td>
136-
<td>Yes</td>
137-
<td>Yes</td>
138-
</tr>
139-
<tr>
140-
<td>*.jpg</td>
141-
<td>Yes</td>
142-
<td>Yes</td>
143-
</tr>
144-
<tr>
145-
<td>*.gif</td>
146-
<td>Yes</td>
147-
<td>Yes</td>
148-
</tr>
149-
<tr>
150-
<td>*.webp</td>
151-
<td>Yes</td>
152-
<td>Yes</td>
153-
</tr>
154-
<tr>
155-
<td>*.bmp</td>
156-
<td>Yes</td>
157-
<td>Yes</td>
158-
</tr>
159-
<tr>
160-
<td>*.svg</td>
161-
<td>No</td>
162-
<td>Yes</td>
163-
</tr>
164-
<tr>
165-
<td>*.ico</td>
166-
<td>Yes</td>
167-
<td>No</td>
168-
</tr>
169-
</table>
170-
171-
**Table formats**
172-
1731
The following formats apply only to the `<table>` element and can be modified (not extendable):
1742

1753
<table class="dx-table full-width">
@@ -274,6 +102,4 @@ The following formats apply only to the `<th>` and `<td>` elements and can be mo
274102
<td>"cellPaddingBottom"</td>
275103
<td>Any value the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom" target="_blank">padding-bottom</a> CSS property accepts.</td>
276104
</tr>
277-
</table>
278-
279-
The formats are applied by toolbar items. Most formats have items attached to them out-of-the-box. Refer to [Predefined Items](/concepts/05%20UI%20Components/HtmlEditor/20%20Toolbar/00%20Predefined%20Items '/Documentation/Guide/UI_Components/HtmlEditor/Toolbar/Predefined_Items/') for a full list of toolbar items and the formats they apply.
105+
</table>

‎concepts/05 UI Components/HtmlEditor/10 Formats/20 Format the Content Programmatically.md‎ renamed to ‎concepts/05 UI Components/HtmlEditor/10 Formats/40 Format the Content Programmatically.md‎

File renamed without changes.

‎concepts/05 UI Components/HtmlEditor/10 Formats/33 Customize Built-In Formats and Modules/10 Modify.md‎ renamed to ‎concepts/05 UI Components/HtmlEditor/10 Formats/60 Customize Built-In Formats and Modules/10 Modify.md‎

File renamed without changes.

‎concepts/05 UI Components/HtmlEditor/10 Formats/33 Customize Built-In Formats and Modules/20 Extend.md‎ renamed to ‎concepts/05 UI Components/HtmlEditor/10 Formats/60 Customize Built-In Formats and Modules/20 Extend.md‎

File renamed without changes.

0 commit comments

Comments
 (0)