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
v21.2 allows you to resize tables displayed within our HTML/Markdown Editor. To enable this new feature, set the tableResizing.enabled property to
true. You can limit minimum column width and row height using the tableResizing.minColumnWidth and tableResizing.minRowHeight properties: 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.
Image may be NSFW.Clik here to view.
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.
Image may be NSFW.Clik here to view.
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
Clik here to view.
Cells support the following properties:
- Outer border (style, thickness, color)
- Width and height
- Fill color
- Content alignment (vertical and horizontal)
- Paddings (vertical and horizontal)
Clik here to view.
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> <DxHtmlEditor
:allow-soft-line-break="true">
</DxHtmlEditor> React
<HtmlEditor
allowSoftLineBreak={true}>
</HtmlEditor> $(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?
Image may be NSFW.Clik here to view.