在本文中我們將演示一個(gè)混合實(shí)現(xiàn)：如何將web UI工具集成到WinForms桌面應(yīng)用程序中。具體來(lái)說(shuō)，我們將把DevExtreme JavaScript WYSIWYG HTML編輯器(作為DevExtreme UI組件套件的一部分發(fā)布的組件)集成到Windows Forms應(yīng)用程序中。

獲取DevExtreme v23.2正式版下載

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

在開(kāi)始之前，首先為大家列出一些可能會(huì)遇到的問(wèn)題：

• DevExtreme HTML編輯器不支持所有與HTML相關(guān)的功能和標(biāo)簽(閱讀限制)。
• 為了無(wú)縫地將Web HTML編輯器集成到桌面UI中，您可能需要隱藏其工具欄和對(duì)話框(而不是在WinForms應(yīng)用程序中實(shí)現(xiàn)它們)。
• 您需要管理皮膚/主題的變化，以確保在WinForms和Web UI控件之間有一個(gè)一致的外觀和感覺(jué)，減少應(yīng)用程序本身視覺(jué)不一致的風(fēng)險(xiǎn)。

注意：在WinForms桌面應(yīng)用程序中使用DevExpress JavaScript HTML編輯器需要一個(gè)有效的DevExtreme授權(quán)。

入門指南

官方已經(jīng)創(chuàng)建了一個(gè)示例WinForms應(yīng)用程序，它集成了基于web的HTML編輯器組件。

要開(kāi)始，您必須：

1. 。

2. 在Visual Studio IDE中打開(kāi)解決方案。

3. 使用 Project Converter （項(xiàng)目轉(zhuǎn)換器）工具更新基于您當(dāng)前版本的DevExpress引用。

4. 構(gòu)建解決方案并運(yùn)行應(yīng)用程序。

實(shí)現(xiàn)細(xì)節(jié)

我們將客戶端HTML編輯器封裝到Microsoft Edge WebView2控件(dxhtmlleditorwebview)中，WebView2是一個(gè)可嵌入的瀏覽器控件，它允許您在為WinForms和WPF構(gòu)建桌面應(yīng)用程序時(shí)使用web技術(shù)，如HTML、CSS和JavaScript。

HTML編輯器功能

• 導(dǎo)出到HTML和Markdown
• 內(nèi)聯(lián)格式和塊格式
• 復(fù)制/粘貼富文本格式
• 插入媒體和上傳圖像
• 表格
• 郵件合并
• 用戶界面定制
• Light/Dark主題

我們的示例還實(shí)現(xiàn)了以下內(nèi)容：

• 自動(dòng)同步WinForms應(yīng)用程序皮膚與HTML編輯器的主題。
  當(dāng)從深色調(diào)色板切換到淺色調(diào)色板(反之亦然)時(shí)，相應(yīng)的主題(深色或淺色)將應(yīng)用于HTML Editor。

• 撤消/重做功能區(qū)命令。
  用戶可以在HTML編輯器中撤銷/重做操作。

公共API和事件

我們?cè)贒XHtmlEditorWebView類中實(shí)現(xiàn)了以下公共方法和事件：

• GetHtmlText() – 以HTML格式導(dǎo)出HTML編輯器的內(nèi)容。
• SetHtmlText(string htmlString) – 設(shè)置HTML編輯器的內(nèi)容，傳遞給SetHtmlText方法的HTML字符串應(yīng)該是格式良好的HTML標(biāo)記，此方法將HTML編輯器中的任何現(xiàn)有內(nèi)容替換為新的HTML內(nèi)容。
• SetTheme(string themeName) – 將指定的主題應(yīng)用于HTML編輯器。
• Undo() –恢復(fù)在HTML編輯器中執(zhí)行的最新操作或一系列操作。
• Redo() – 重新應(yīng)用以前未完成的操作。
• HtmlChanged
• HtmlLoaded

在WinForms應(yīng)用程序中使用HTML編輯器

1. 將DXHtmlEditor復(fù)制到您的項(xiàng)目中。

2. 安裝Microsoft.Web.WebView2 NuGet包。

3. 打開(kāi)DXHtmlEditorClient.cs文件然后在OnWebResourceRequested方法中指定默認(rèn)命名空間：

void OnWebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs e) {
var environment = webView?.Environment;
if(environment == null)
return;
string asset = $@"{nameof(MyDefaultNamespace)}.{nameof(DXHtmlEditor)}.Assets.{e.Request.Uri.Substring(rootURIFilter.Length - 1)}";
// ...
}

4. 對(duì)Assets文件夾中的所有文件設(shè)置Build Action為“Embedded Resource”。

5. 構(gòu)建解決方案。

6. 將DXHtmlEditorWebView組件從工具箱中拖放到表單中。

擴(kuò)展嵌入式HTML編輯器的功能

要將HTML編輯器與“本地”用戶界面集成，您應(yīng)該隱藏它的工具欄/對(duì)話框(在../Assets/index.js中)，并在WinForms UI中實(shí)現(xiàn)相應(yīng)的UI元素。在我們的例子中，隱藏了HTML編輯器的撤銷/重做工具欄命令，并在Ribbon UI中添加了相應(yīng)的命令。

實(shí)現(xiàn)包括以下內(nèi)容：

1. 在index.js中，我們添加了undo 和 redo函數(shù)：

function undo() {
htmlEditor.undo();
}
function redo() {
htmlEditor.redo();
}

2. 在DXHtmlEditorClient.cs中，我們添加了Undo 和 Redo方法：

public async Task Undo() {
await CallDxHtmlEditClient("undo()");
}
public async Task Redo() {
await CallDxHtmlEditClient("redo()");
}

3. 在DXHtmlWebView.cs中，我們添加了Undo 和 Redo方法：

public async Task Undo() {
await EnsureIsLoaded();
await client.Undo();
}
public async Task Redo() {
await EnsureIsLoaded();
await client.Redo();
}

4. 我們添加了Undo 和 Redo項(xiàng)目到Ribbon中，并處理了它們的ItemClick事件：

async void OnUndo(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
await dxHtmlEditorWebView.Undo();
}
async void OnRedo(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
await dxHtmlEditorWebView.Redo();
}

總結(jié)

這種混合方法的主要好處是能夠在.NET桌面應(yīng)用程序中利用web技術(shù)的優(yōu)勢(shì)，獨(dú)家和成熟的web組件(如DevExtreme HTML編輯器)經(jīng)過(guò)了廣泛的測(cè)試和改進(jìn)。這些UI組件通常包含廣泛的特性集，可以處理各種使用場(chǎng)景。

更多DevExpress線上公開(kāi)課、中文教程資訊請(qǐng)上中文網(wǎng)獲取