We expect to ship the next major version of our HTML/Markdown Editor (v21.2) in November. This update will include the following new features/capabilities:
Table Support Enhancements
Table Resize Support
Angular
<dx-html-editor>
<dxo-table-resizing
[enabled]="true"
[minColumnWidth]="70"
[minRowHeight]="30">
</dxo-table-resizing>
</dx-html-editor>
Vue
<DxHtmlEditor>
<DxTableResizing
:enabled="true"
:min-column-width="70"
:min-row-height="30"
/>
</DxHtmlEditor>
React
<HtmlEditor>
<TableResizing
enabled={true}
minColumnWidth={70}
minRowHeight={30}
/>
</HtmlEditor>
jQuery
$(function() {
$("#html-editor").dxHtmlEditor({
tableResizing: {
enabled: true,
minColumnWidth: 70,
minRowHeight: 30
}
});
});
Multiline Text in Table Cells
With v21.2, our HTML/Markdown Editor adds support for multiline text within table cells. To add a new line, users can simply press the Enter key.
Table Context Menu
Table cells now include a context menu with common table operation commands. Previously, these commands were executed using toolbar controls. The introduction of this context menu allows you to free toolbar space for other controls/commands.
To activate the context menu, set the
tableContextMenu.enabled property to
true. You can also use the
tableContextMenu.items array to rearrange or hide menu commands:
Angular
<dx-html-editor>
<dxo-table-context-menu
[enabled]="true">
<dxi-item name="tableProperties"></dxi-item>
<dxi-item name="cellProperties"></dxi-item>
</dxo-table-context-menu>
</dx-html-editor>
Vue
<DxHtmlEditor>
<DxTableContextMenu
:enabled="true">
<DxItem name="tableProperties" />
<DxItem name="cellProperties" />
</DxTableContextMenu>
</DxHtmlEditor>
React
<HtmlEditor>
<TableContextMenu
enabled={true}>
<Item name="tableProperties" />
<Item name="cellProperties" />
</TableContextMenu>
</HtmlEditor>
jQuery
$(function() {
$("#html-editor").dxHtmlEditor({
tableContextMenu: {
enabled: true,
items: [ "tableProperties", "cellProperties" ]
}
});
});
Table Header Support
We improved our table markup processing algorithm and now support table headers (<thead>).
To add a header row, end users can click the Insert Header Row toolbar button. Use the following code to add this button to the toolbar:
Angular
<dx-html-editor>
<dxo-toolbar>
<dxi-item name="insertHeaderRow"></dxi-item>
</dxo-toolbar>
</dx-html-editor>
Vue
<DxHtmlEditor>
<DxToolbar>
<DxItem name="insertHeaderRow" />
</DxToolbar>
</DxHtmlEditor>
React
<HtmlEditor>
<Toolbar>
<Item name="insertHeaderRow" />
</Toolbar>
</HtmlEditor>
jQuery
$(function() {
$("#html-editor").dxHtmlEditor({
toolbar: {
items: [
// ...
"insertHeaderRow"
]
}
});
});
Alternatively, users can select the Insert Header Row command from our newly introduced table context menu (see the previous section of this blog post to learn more about our table context menu).
Table/Cell Appearance Customization
New pop-up dialogs allow users to modify table and cell properties as requirements dictate.
The following table properties can be changed:
- Outer border (style, thickness, color)
- Width and height
- Alignment
- Fill color
Cells support the following properties:
- Outer border (style, thickness, color)
- Width and height
- Fill color
- Content alignment (vertical and horizontal)
- Paddings (vertical and horizontal)
Our HTML/Markdown Editor saves corresponding attributes and styles in output markup and can parse them when they are specified in the input markup.
Soft Line Break Support
We have added the ability to insert a line break within block elements (lists, tables, quotes). To start a new line, users must use the Shift + Enter key combination. Assign
true to the
allowSoftLineBreak property to enable this functionality:
Angular
<dx-html-editor
[allowSoftLineBreak]="true">
</dx-html-editor>
Vue <DxHtmlEditor
:allow-soft-line-break="true">
</DxHtmlEditor>
React
<HtmlEditor
allowSoftLineBreak={true}>
</HtmlEditor>
jQuery $(function() {
$("#html-editor").dxHtmlEditor({
allowSoftLineBreak: true
});
});
Your Feedback Matters
If you’re currently using our HTML/Markdown Editor, please tell us which of the features described in this post you are most likely to use?
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.