在本文中我們將演示一個混合實現：如何將web UI工具集成到WinForms桌面應用程序中。具體來說，我們將把DevExtreme JavaScript WYSIWYG HTML編輯器(作爲DevExtreme UI組件套件的一部分發布的組件)集成到Windows Forms應用程序中。
在開始之前，首先爲大家列出一些可能會遇到的問題：
- DevExtreme HTML編輯器不支持所有與HTML相關的功能和標籤(閱讀限制)。
- 爲了無縫地將Web HTML編輯器集成到桌面UI中，您可能需要隱藏其工具欄和對話框(而不是在WinForms應用程序中實現它們)。
- 您需要管理皮膚/主題的變化，以確保在WinForms和Web UI控件之間有一個一致的外觀和感覺，減少應用程序本身視覺不一致的風險。
注意：在WinForms桌面應用程序中使用DevExpress JavaScript HTML編輯器需要一個有效的DevExtreme授權。
入門指南
官方已經創建了一個示例WinForms應用程序，它集成了基於web的HTML編輯器組件。
要開始，您必須：
1. 從GitHub下載我們的示例WinForms應用程序。
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組件通常包含廣泛的特性集，可以處理各種使用場景。