当前位置：首页 > news >正文

C# 利用XejeN框架源码，编写一个在 Winform 界面上的语法高亮的编辑器，使用 Monaco 编辑器

news 来源：原创 2024/9/30 1:26:28

析锦基于Monaco技术实现的Winform语法高亮编辑器

winform中，我们有时需要高亮显示基于某种语言的语法编辑器。

目前比较强大且UI现代化的，无疑是宇宙最强IDE的兄弟：VS Code。

类似 VS Code 的体验，可以考虑使用 Monaco Editor（VS Code 使用的编辑器）。虽然它主要用于 Web，但你可以在 WPF 或者 Winform 中嵌入一个浏览器控件（如 WebView2）并加载 Monaco Editor。

当然，适用于Winform的这种语法高亮的编辑器，除了Monaco外，还有AvalonEdit、ScintillaNET等，都可以用于复杂需求的高亮显示。

今天，我们只讲 Monaco 如何引入到 Winform 中。

本文是基于 XejeN 的 C/S 框架编写的，若您想了解 XejeN 的 C/S 框架，可以阅读此文章：
https://blog.csdn.net/mazhiyuan1981/article/details/138852326

若您想直接下载XejeN的 C/S 框架，可以访问：https://gitee.com/mazhiyuan1981/xejen-open.git

好的，下面我们开始介绍如何将 Monaco 编辑器引入到 Winform 中。

一、新建一个 Winform 项目

二、创建一个 Winform 窗体

窗体留出一个Panel控件，用于承载 Monaco 编辑器

三、安装必要的 Winform 浏览网页的 WebView2 控件

四、创建一个承载编辑器的网页界面

此为重点，这个html页面，将会显示和编辑数据内容，并能获取编辑器内容。

主要是通过setEditorContent和getEditorContent这两个方法完成的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Monaco Editor</title><link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/editor/editor.main.css"><style>html, body, #container {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}#container {display: flex;}</style>
</head>
<body><div id="container"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/loader.js"></script><script>require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs' } });window.MonacoEnvironment = { getWorkerUrl: function (workerId, label) { return `data:text/javascript;base64,${btoa("self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/base/worker/workerMain.js');")}` } };require(['vs/editor/editor.main'], function () {window.editor = monaco.editor.create(document.getElementById('container'), {value: "",language: 'plaintext',automaticLayout: true  // This line ensures the editor adjusts to its container's size});window.addEventListener('resize', () => {window.editor.layout();  // Adjust editor layout on window resize});window.chrome.webview.postMessage('initialized');});window.setEditorContent = function (content, language) {window.editor.setValue(content);monaco.editor.setModelLanguage(window.editor.getModel(), language);};window.getEditorContent = function () {return window.editor.getValue();};</script>
</body>
</html>

五、在 Winform 窗体界面中，加载编辑器并执行

        private void LoadEditorAsync(){if (string.IsNullOrEmpty(Data)) return;string content;string language;if (Data.IsJson()){content = Data.FormatJson();language = "json";}else if (Data.IsXml()){content = Data.FormatXml();language = "xml";}else{content = Data;language = "plaintext";}string htmlPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "monaco-editor.html");DataTextBox.CoreWebView2InitializationCompleted += (sender, args) =>{if (!args.IsSuccess){MessageBox.Show("WebView2 initialization failed.");return;}DataTextBox.CoreWebView2.WebMessageReceived += (sender2, args2) =>{if (args2.TryGetWebMessageAsString() == "initialized"){DataTextBox.CoreWebView2.ExecuteScriptAsync($"setEditorContent({JsonConvert.SerializeObject(content)}, '{_language ?? language}');");SaveButton.Enabled = true;}};DataTextBox.CoreWebView2.NavigateToString(File.ReadAllText(htmlPath));};DataTextBox.Source = new Uri(htmlPath);}

六、获取编辑器修改后的内容

        /// <summary>/// 获取文本数据内容/// </summary>/// <returns></returns>public async Task<string> GetDataAsync(){return JsonConvert.DeserializeObject(await DataTextBox.CoreWebView2.ExecuteScriptAsync("getEditorContent();")).ToString();}

使用GetDataAsync方法，去调用html页面的js方法getEditorContent，便可以取到编辑器的内容