带有.NET Core 3和Electron.NET的多平台桌面HTML编辑器

目录

介绍

先决条件

应用程序编码

1.创建ASP.NET MVC应用程序

2.将ElectronNET.API NuGet程序包添加到项目中

3.在应用程序中实例化ElectronNET.API

4.将自定义菜单添加到应用程序

5.在您的应用程序中添加JavaScript HTML编辑器

6.在主线程和渲染线程之间建立通信

7.使用文件操作对象

8.生成.NET Core 3 / Electron.NET应用程序

当前问题

结论

---

• Github repo 

介绍

借助.NET Core 3，C＃开发人员现在可以开发出真正的多平台GUI应用程序。您可以在最近发行的书中找到有关这些解决方案的研究：

• 为macOS，Linux和Windows构建C＃GUI应用程序

Electron.NET是本书介绍的解决方案之一，它提供了所有基于同一.NET Core 3项目为Windows，Linux和Mac OS X编写GUI应用程序的方法。Electron.NET是围绕着著名的Electron框架（基于NodeJS）的.NET Core包装器。

为了说明该工具的用法，我将开发一个HTML编辑器应用程序。该原型程序说明了Electron.NET在跨平台桌面应用程序中使用JavaScript组件的能力。

在我们的例子中，CKeditor用于实现编辑器本身。

Electron.NET应用程序是从ASP.NET MVC Web应用程序构建的，因此通过使用.NET Core的Electron包装器，扩展了桌面应用程序的特定功能：Electron.NET。

先决条件

在使用Electron.NET 检查HTMLEditor应用程序的开发之前，您必须安装适当的开发环境。

因此，您应该已经在计算机上安装了：

• NodeJS
• NPM
• 适用于dotnet CLI的Electron.NET全局工具（请参阅GitHub网站）

检查该项目的GitHub网站： https://github.com/ElectronNET/Electron.NET.。

该HtmlEditor应用程序使用Electron.NET的5.30.1版本。

请注意，您必须仔细检查是否使用了适当的.NET Core版本，Electron.NET的当前版本是针对.NET Core 3.0的（如果使用3.1版的.NET Core，它将无法正常工作……甚至没有安装）。

应用程序编码

应用程序的开发可以描述为一个简单的过程。

1.创建ASP.NET MVC应用程序

首先，您必须使用以下命令创建一个标准的.NET Core 3 ASP.NET MVC应用程序，但是您可以使用Visual Studio进行创建。

dotnet new mvc -o Multiplatform.HtmlEditor

2.将ElectronNET.API NuGet程序包添加到项目中

要添加NuGet依赖项，可以使用Visual Studio 的熟悉的“NuGet package Manager”：

您还必须安装CLI工具。
要添加所需的dotnet CLI Electron.NET全局工具：

dotnet tool install ElectronNET.CLI -g --version 5.30.1

3.在应用程序中实例化ElectronNET.API

这是通过在MVC应用程序中添加Electron包装器的实例来完成的。实际上，在startup.cs文件中：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
    } else {
        app.UseExceptionHandler("/Home/Error");
    }
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints => {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });

    // Open the Electron-Window here
    //Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
    if (HybridSupport.IsElectronActive) {
        ElectronBootstrap();
    }
}

public async void ElectronBootstrap()
{
    var browserWindow = await Electron.WindowManager.CreateWindowAsync
                        (new BrowserWindowOptions {
        Width = 1000,
        Height = 800,
        Show = false,
    });

    browserWindow.OnReadyToShow += () => browserWindow.Show();
    browserWindow.SetTitle("HTMLEditor 2020");
}

该应用程序现在在桌面容器中运行，但未集成任何功能：

除了在应用程序中添加Electron之外，还从不必要的代码（页面，日志记录，配置…）中清除了默认的ASP.NET MVC应用程序。

4.将自定义菜单添加到应用程序

当应用程序作为桌面应用程序运行后，您必须修改默认的本地菜单。为此，应用程序的“本地”菜单是通过专用的MVC Controller：MenusController.cs实现的。

>
public class MenusController : Controller
{
    public IActionResult Index()
    {
        if (HybridSupport.IsElectronActive) {
            var menu = new MenuItem[] {
                new MenuItem {
                    Label = "File", Submenu = new MenuItem[] {
                        new MenuItem {
                            Label = "Open HTML",
                            Accelerator = "CmdOrCtrl+O",
                            Click = async ()  =>
                            {
                                // Open file HTML
                                var mainWindow = Electron.WindowManager.BrowserWindows.First();
                                var options = new OpenDialogOptions
                                {
                                    Title = "Open HTML file",
                                    Filters = new FileFilter[]
                                    {
                                        new FileFilter { Name = "HTML", 
                                          Extensions = new string[] {"html","htm" } }
                                    }
                                };

                                var result = await Electron.Dialog.ShowOpenDialogAsync
                                             (mainWindow, options);

                                if (result.First() != "")
                                {
                                    string OpenfilePath = result.First();
                                    string strContent = FileOperation.openRead(OpenfilePath);

                                    //Call Render JS
                                    var mainWindow1 = 
                                        Electron.WindowManager.BrowserWindows.First();
                                    Electron.IpcMain.Send
                                        (mainWindow1,"setContent",strContent);

                                    mainWindow.SetTitle(OpenfilePath);
                                }
                            }
                        },
                        new MenuItem { Label = "Save HTML",
                                       Accelerator = "CmdOrCtrl+S",
                                       Click = async () =>
                        {
                            var mainWindow = Electron.WindowManager.BrowserWindows.First();

                            Electron.IpcMain.Send(mainWindow,"saveContent");
                        }
                                     },
                        new MenuItem { Type = MenuType.separator },
                        new MenuItem {
                            Label = "Exit",
                            Accelerator = "CmdOrCtrl+X",
                            Click = () =>
                            {
                                // Exit app
                                Electron.App.Exit();
                            }
                        },
                    }
                },
                new MenuItem {
                    Label = "Help", Submenu = new MenuItem[] {
                        new MenuItem
                        {
                            Label = "About",
                            Accelerator = "CmdOrCtrl+R",
                            Click = async () =>
                            {
                                // open native  message  windows
                                var options = new MessageBoxOptions
                                      ("This is a demo application for Electron.NEt 
                                        and .NET CORE 3.");
                                options.Type = MessageBoxType.info;
                                options.Title = "About HTMLEditor";

                                await Electron.Dialog.ShowMessageBoxAsync(options);
                            }
                        }
                    }
                }
            };
            Electron.Menu.SetApplicationMenu(menu);
        }
        return View();
    }
}

请注意，菜单控制器可用于调用（同步或异步）应用程序的多个功能。

5.在您的应用程序中添加JavaScript HTML编辑器

HTML编辑器本身是一个免费的JavaScript组件：CKeditor4。该网站允许您通过生成config.js文件来个性化编辑器的菜单。该文件可从ckeditor4网站直接下载： https://github.com/ckeditor/ckeditor4。

专用网站允许您使用专用图形界面配置编辑器。您可以在https://ckeditor.com/cke4/builder上在线找到该应用程序。

创建适当的配置文件后，必须将其添加到MVC项目中（在客户端）。

实现编辑器所需的组件（js，css，img）必须添加到项目中。这是用于将ckeditor4 HTML编辑器添加到项目中的客户端依赖项的文件树状结构。

6.在主线程和渲染线程之间建立通信

有两个功能需要C＃（主进程）和Html / Js（Render进程）之间的通信。

• 打开文件
• 保存存档

这是实现这两个功能所需的两个过程之间的通信模式：

打开文件

保存存档

7.使用文件操作对象

编辑器集成了基本文件的操作：打开，保存。为这些操作实现了一个专用类：FileOperations.cs。该static对象集成了示例所需的两种匹配方法。

一旦成功完成了每个步骤（并测试了这些步骤），应用程序就完成了，至此，您必须构建项目，并且对于要生成的可执行文件的类型可能有些棘手。

8.生成.NET Core 3 / Electron.NET应用程序

对于本文的第一个版本，公开了最明显的（实际上是基本的）可执行文件部署类型。

这部分在ElectronNET GitHub网站上有很好的记录。

• 首先，您必须使用以下命令为ASP.NET MVC应用程序创建Electron配置文件：

electronize init

• 之后，您可以使用以下命令执行应用程序：

electronize start

此命令将完成构建以及项目的还原，第一次执行可能会花费一些时间（必须加载Electron包装器）。

当前问题

• 我尚未设法更新应用程序的图标（正在使用该图标）
• 在Mac OS X的菜单栏中，菜单显示“Electron”而不是“File”。

结论

对于想要开发多平台桌面应用程序（适用于Windows，Linux和MacOS X）的ASP.NET开发人员，Electron.NET的使用似乎是一种选择的解决方案。Electron.NET使之成为可能。

通过将Web应用程序封装到桌面应用程序中，可以将许多JavaScript组件重复使用或回收用于桌面开发，这是这种方法的强项。有很多JavaScript组件可以很好地添加到桌面应用程序中（用于导航，GUI效果……）。

但是，Electron.NET的使用并未针对Windows平台进行优化，并且.NET Core包装器中没有原始项目的许多方法。此外，Elentron.NET要求您比实际的ASP.NET C＃知识更精通JavaScript编程。

但是Electron.NET是一个很好的包装器，如果您想从网站开发中生成桌面应用程序，可以使用它。

如果Electron.NET不符合您的期望，那么还有许多其他解决方案可以使用C＃.NET Core 3编写多平台GUI桌面应用程序，请在此处查阅启发本文的书。