DevExpress官方技術團隊預計在11月發布HTML/Markdown 編輯器 (v21.2) 的下一個主要版本，此次更新將包括以下的新特性/功能：

DevExtreme v21.2正式版下載

表格支持的增強功能

支持表格調整大小

v21.2允許開發人員調整在HTML/Markdown編輯器中顯示的表格大小，要啟用此新功能，請將屬性設置為 true。您還可以使用和屬性限制最小列寬和行高：

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
}
});
});

表格單元格中的多行文本

 在v21.2中，HTML/Markdown 編輯器增加了對表格單元格內多行文本的支持，要添加新行，用戶只需按 Enter 鍵即可。

表格上下文菜單

表格單元格現在包括一個帶有常用表格操作命令的上下文菜單，以前這些命令是使用工具欄控件執行的，此上下文菜單的引入允許您為其他控件/命令釋放工具欄空間。

要激活上下文菜單，請將屬性設置為 true。 您還可以使用 tableContextMenu.items 數組重新排列或隱藏菜單命令：

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" ]
}
});
});

支持表格標題

新版本改進了表格標記處理算法，現在支持表格標題 (<thead>)。

要添加標題行，最終用戶可以單擊Insert Header Row工具欄按鈕，使用以下代碼將按鈕添加到工具欄：

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"
]
}
});
});

或者，用戶可以從新引入的表格上下文菜單中選擇插入標題行命令。

表格/單元格外觀定制

新的彈出對話框允許用戶根據要求修改表格和單元格屬性。

可以更改下表屬性：

• 外邊框（樣式、粗細、顏色）
• 寬度和高度
• 對齊
• 填色

單元格支持以下屬性：

• 外邊框（樣式、粗細、顏色）
• 寬度和高度
• 填色
• 內容對齊（垂直和水平）
• 填充（垂直和水平）

HTML/Markdown 編輯器將相應的屬性和樣式保存在輸出標記中，并且可以在輸入標記中指定它們時對其進行解析。

支持軟換行

添加了在塊元素（列表、表格、引號）中插入換行符的功能，要開始新行，用戶必須使用 Shift + Enter 組合鍵，將 true 分配給 allowSoftLineBreak 屬性以啟用此功能：

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
});
});

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExpress技術交流群6：600715373      歡迎一起進群討論