DevExtreme HTML/Markdown Editor – Enhanced Table Support and Soft Line Breaks (v21.2)

DevExtreme Team Blog
08 October 2021
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.

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 Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
CRM-1a1ca56e-12dd-4bfb-99d6-3c0eb0634564
Fabiano Castro
Great! 😃
18 October 2021
CRM-0cd4a9d0-8830-437d-8f3f-751a85cdbbba
Customer229902
How the ASPxRichEdit control stands up the text
24 October 2021

Please login or register to post comments.