Skip to content

Commit

Permalink
HTML Editor: section Formats topic (#6935) (#6937)
Browse files Browse the repository at this point in the history
  • Loading branch information
vladaskorohodova authored Dec 30, 2024
1 parent a5c84e2 commit 1435242
Show file tree
Hide file tree
Showing 11 changed files with 162 additions and 177 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
- **Inline Formats**
- [**Inline Formats**](/Documentation/Guide/UI_Components/HtmlEditor/Formats/#Inline_Or_Text_Formats)
HTML Editor includes various inline formatting options:
- **Bold**, *italic*, <s>strikethrough</s>, and <u>underscore</u>
- Typeface, font size, and text color

- **Block Formats**
- [**Block Formats**](/Documentation/Guide/UI_Components/HtmlEditor/Formats/#Block_Formats)
HTML Editor supports block formatting such as:
- Headers
- Lists (ordered and unordered)
Expand Down
3 changes: 3 additions & 0 deletions concepts/05 UI Components/HtmlEditor/10 Formats/00 Formats.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
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.

The following tables list available formats and their values grouped into five categories: inline (or text), block, embedded, image, and table formats.
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<table class="dx-table full-width">
<tr>
<th>Format Name</th>
<th>Accepted Values</th>
<th>Customization Type</th>
</tr>
<tr>
<td>"background"</td>
<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>
<td>Modify</td>
</tr>
<tr>
<td>"bold"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"color"</td>
<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>
<td>Modify</td>
</tr>
<tr>
<td>"font"</td>
<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>
<td>Modify</td>
</tr>
<tr>
<td>"italic"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"link"</td>
<td>String <br/> or <br/> Object ({ href: String, text: String, target: Boolean })</td>
<td>Extend</td>
</tr>
<tr>
<td>"size"</td>
<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>
<td>Modify</td>
</tr>
<tr>
<td>"strike"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"script"</td>
<td>"sub", "super", false</td>
<td>Extend</td>
</tr>
<tr>
<td>"underline"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
</table>
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<table class="dx-table full-width">
<tr>
<th>Format Name</th>
<th>Accepted Values</th>
<th>Customization Type</th>
</tr>
<tr>
<td>"blockquote"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"header"</td>
<td>1, 2, 3, 4, 5, 6, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"indent"</td>
<td>"+1", "-1", false</td>
<td>Modify</td>
</tr>
<tr>
<td>"list"</td>
<td>"ordered", "bullet", false</td>
<td>Extend</td>
</tr>
<tr>
<td>"align"</td>
<td>"left", "right", "center", "justify", false</td>
<td>Modify</td>
</tr>
<tr>
<td>"code-block"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
</table>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
All the following formats are extendable:

<table class="dx-table full-width">
<tr>
<th>Format Name</th>
<th>Value Types</th>
</tr>
<tr>
<td>"extendedImage"</td>
<td>String <br/> or <br/> Object ({ src: String, width: Number, height: Number, alt: String })</td>
</tr>
<tr>
<td>"variable"</td>
<td>Object ({ value: String, escapeChar: String | Array&lt;String&gt; })</td>
</tr>
<tr>
<td>"mention"</td>
<td>Object ({ marker: String, id: String | Number, value: String })</td>
</tr>
</table>
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<table class="dx-table full-width">
<tr>
<th>Format Name</th>
<th>Supports Pasting into HTML Editor</th>
<th>Supports Drag and Drop from File Explorer</th>
</tr>
<tr>
<td>*.png</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.jpg</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.gif</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.webp</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.bmp</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.svg</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>*.ico</td>
<td>Yes</td>
<td>No</td>
</tr>
</table>
Original file line number Diff line number Diff line change
@@ -1,175 +1,3 @@
The following tables list available formats and their values grouped into five categories: inline (or text), block, embedded, image, and table formats.

**Inline (or text) formats**

<table class="dx-table full-width">
<tr>
<th>Format Name</th>
<th>Accepted Values</th>
<th>Customization Type</th>
</tr>
<tr>
<td>"background"</td>
<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>
<td>Modify</td>
</tr>
<tr>
<td>"bold"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"color"</td>
<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>
<td>Modify</td>
</tr>
<tr>
<td>"font"</td>
<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>
<td>Modify</td>
</tr>
<tr>
<td>"italic"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"link"</td>
<td>String <br/> or <br/> Object ({ href: String, text: String, target: Boolean })</td>
<td>Extend</td>
</tr>
<tr>
<td>"size"</td>
<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>
<td>Modify</td>
</tr>
<tr>
<td>"strike"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"script"</td>
<td>"sub", "super", false</td>
<td>Extend</td>
</tr>
<tr>
<td>"underline"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
</table>

**Block formats**

<table class="dx-table full-width">
<tr>
<th>Format Name</th>
<th>Accepted Values</th>
<th>Customization Type</th>
</tr>
<tr>
<td>"blockquote"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"header"</td>
<td>1, 2, 3, 4, 5, 6, false</td>
<td>Extend</td>
</tr>
<tr>
<td>"indent"</td>
<td>"+1", "-1", false</td>
<td>Modify</td>
</tr>
<tr>
<td>"list"</td>
<td>"ordered", "bullet", false</td>
<td>Extend</td>
</tr>
<tr>
<td>"align"</td>
<td>"left", "right", "center", "justify", false</td>
<td>Modify</td>
</tr>
<tr>
<td>"code-block"</td>
<td>true, false</td>
<td>Extend</td>
</tr>
</table>

**Embedded formats**

All the following formats are extendable:

<table class="dx-table full-width">
<tr>
<th>Format Name</th>
<th>Value Types</th>
</tr>
<tr>
<td>"extendedImage"</td>
<td>String <br/> or <br/> Object ({ src: String, width: Number, height: Number, alt: String })</td>
</tr>
<tr>
<td>"variable"</td>
<td>Object ({ value: String, escapeChar: String | Array&lt;String&gt; })</td>
</tr>
<tr>
<td>"mention"</td>
<td>Object ({ marker: String, id: String | Number, value: String })</td>
</tr>
</table>

**Image formats**

<table class="dx-table full-width">
<tr>
<th>Format Name</th>
<th>Supports Pasting into HTML Editor</th>
<th>Supports Drag and Drop from File Explorer</th>
</tr>
<tr>
<td>*.png</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.jpg</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.gif</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.webp</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.bmp</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>*.svg</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>*.ico</td>
<td>Yes</td>
<td>No</td>
</tr>
</table>

**Table formats**

The following formats apply only to the `<table>` element and can be modified (not extendable):

<table class="dx-table full-width">
Expand Down Expand Up @@ -274,6 +102,4 @@ The following formats apply only to the `<th>` and `<td>` elements and can be mo
<td>"cellPaddingBottom"</td>
<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>
</tr>
</table>

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.
</table>

0 comments on commit 1435242

Please sign in to comment.