DevExpress官方技術(shù)團(tuán)隊(duì)預(yù)計(jì)在11月發(fā)布HTML/Markdown 編輯器 (v21.2) 的下一個(gè)主要版本，此次更新將包括以下的新特性/功能：

DevExtreme v21.2正式版下載

表格支持的增強(qiáng)功能

支持表格調(diào)整大小

v21.2允許開發(fā)人員調(diào)整在HTML/Markdown編輯器中顯示的表格大小，要啟用此新功能，請(qǐng)將屬性設(shè)置為 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 編輯器增加了對(duì)表格單元格內(nèi)多行文本的支持，要添加新行，用戶只需按 Enter 鍵即可。

表格上下文菜單

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

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

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

支持表格標(biāo)題

新版本改進(jìn)了表格標(biāo)記處理算法，現(xiàn)在支持表格標(biāo)題 (<thead>)。

要添加標(biāo)題行，最終用戶可以單擊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"
]
}
});
});

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

表格/單元格外觀定制

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

可以更改下表屬性：

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

單元格支持以下屬性：

• 外邊框（樣式、粗細(xì)、顏色）
• 寬度和高度
• 填色
• 內(nèi)容對(duì)齊（垂直和水平）
• 填充（垂直和水平）

HTML/Markdown 編輯器將相應(yīng)的屬性和樣式保存在輸出標(biāo)記中，并且可以在輸入標(biāo)記中指定它們時(shí)對(duì)其進(jìn)行解析。

支持軟換行

添加了在塊元素（列表、表格、引號(hào)）中插入換行符的功能，要開始新行，用戶必須使用 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小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論