在本文中我們將演示一個混合實現：如何將web UI工具集成到WinForms桌面應用程序中。具體來說，我們將把DevExtreme JavaScript WYSIWYG HTML編輯器(作為DevExtreme UI組件套件的一部分發布的組件)集成到Windows Forms應用程序中。

獲取DevExtreme v23.2正式版下載

DevExpress技術交流群9：909157416      歡迎一起進群討論

在開始之前，首先為大家列出一些可能會遇到的問題：

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

注意：在WinForms桌面應用程序中使用DevExpress JavaScript HTML編輯器需要一個有效的DevExtreme授權。

入門指南

官方已經創建了一個示例WinForms應用程序，它集成了基于web的HTML編輯器組件。

要開始，您必須：

1. 。

2. 在Visual Studio IDE中打開解決方案。

3. 使用 Project Converter （項目轉換器）工具更新基于您當前版本的DevExpress引用。

4. 構建解決方案并運行應用程序。

實現細節

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

HTML編輯器功能

• 導出到HTML和Markdown
• 內聯格式和塊格式
• 復制/粘貼富文本格式
• 插入媒體和上傳圖像
• 表格
• 郵件合并
• 用戶界面定制
• Light/Dark主題

我們的示例還實現了以下內容：

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

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

公共API和事件

我們在DXHtmlEditorWebView類中實現了以下公共方法和事件：

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

在WinForms應用程序中使用HTML編輯器

1. 將DXHtmlEditor復制到您的項目中。

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

3. 打開DXHtmlEditorClient.cs文件然后在OnWebResourceRequested方法中指定默認命名空間：

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. 對Assets文件夾中的所有文件設置Build Action為“Embedded Resource”。

5. 構建解決方案。

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

擴展嵌入式HTML編輯器的功能

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

實現包括以下內容：

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

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項目到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();
}

總結

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

更多DevExpress線上公開課、中文教程資訊請上中文網獲取