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

析锦基于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,便可以取到编辑器的内容

七、将monaco-editor.html设置为:如果较新则复制


 

完整源码位置在:

完整Demo演示位置在:

源码位置:https://gitee.com/mazhiyuan1981/xejen-open.git

祝您用餐愉快。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/30007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3-父子通信

一个简单的vue3子组件调用父组件方法的demo <template> <div> <h2>Parent Component父组件</h2> <ChildComponent notify-parent"handleParentMethod" /> </div> </template> <script> import { ref } fr…

LVGL开发教程-objects对象

知不足而奋进 望远山而前行 目录 知不足而奋进 望远山而前行​ 文章目录 前言 1.图层 2.objects 2.1 位置 2.2 尺寸 2.3 align 2.4 样式 总结 前言 在嵌入式 GUI 开发中&#xff0c;LVGL&#xff08;Light and Versatile Graphics Library&#xff09;是一个强大的工…

vue.extend解决vue页面转构造函数暴露js供全局使用

用途: 解决在一些微前端项目中, B工程使用A工程的弹窗代码 // MaterialListPlugin.js文件, 在项目入口引入 // eg: 在main.js中添加一行 import /components/MaterialListPlugin.jsimport Vue from vue import MaterialListPlugin from /components/MaterialListPlugin.vue //…

电脑丢失dll文件一键修复的方法有哪些?分析dll文件修复的多种策略

我们经常会遇到各种各样的问题&#xff0c;其中之一就是DLL文件的丢失。DLL文件&#xff08;动态链接库&#xff09;是操作系统和应用程序正常运行所必需的文件&#xff0c;当这些文件丢失或损坏时&#xff0c;可能会导致软件无法正常启动&#xff0c;甚至影响系统的稳定性。对…

SpringMVC系列二: 请求方式介绍

RequestMapping &#x1f49e;基本使用&#x1f49e;RequestMapping注解其它使用方式可以修饰类和方法可以指定请求方式可以指定params和headers支持简单表达式支持Ant 风格资源地址配合PathVariable 映射 URL 绑定的占位符注意事项和使用细节课后作业 上一讲, 我们学习的是Spr…

植物大战僵尸杂交版2024最新手机版下载!功能全面升级,战斗更刺激!

植物大战僵尸杂交版2024——让游戏更加有趣&#xff01; 嘿&#xff0c;各位游戏爱好者们&#xff01;&#x1f31f;今天我要给你们介绍的是一个全新版本的植物大战僵尸——植物大战僵尸杂交版2024。这款游戏不仅保留了原版的经典元素&#xff0c;还增加了许多新的特性和玩法&a…

操作系统 大作业

1、现有成绩文件按“姓名 学校 年级 班级 分数”五列组成&#xff0c;编写Shell脚本&#xff0c;将某目录下所有成绩文件&#xff08;≥3个&#xff09;合并为一个&#xff0c;形成“姓名 班级 分数”三列&#xff0c;并按成绩排序&#xff0c;输出年级排名前十。同时输出60以下…

实现一个渐进优化的 Linux cp 命令

1&#xff0c;第1版 copy 先写个轮廓 selfcp.c &#xff1a; #include <stdio.h>int main() {FILE *source, *destination;char ch;source fopen("H222.txt", "r");if (source NULL) {printf("Error opening source file!\n");retur…

8.华为两台交换机的三种连接方式access 、trunk、undo portswitch

目的&#xff1a;两台三层交换机的三种连接方式 1.access 2.trunk 3.undo portswitch 模拟机不支持此配置&#xff0c;实体机支持 第一种access CE1配置 [~HUAWEI]vlan batch 10 [~HUAWEI]int Vlanif 10 [~HUAWEI-Vlanif10]ip add 10.10.10.1 24 [~HUAWEI]int g1/0/0 [~HUAWE…

Web前端连接Redis:深入探索、实践挑战与未来展望

Web前端连接Redis&#xff1a;深入探索、实践挑战与未来展望 在当今日益复杂且多变的网络环境中&#xff0c;Web前端与后端数据库的交互方式正在经历着前所未有的变革。其中&#xff0c;Redis作为一种高性能、开源的键值存储系统&#xff0c;逐渐成为了前端开发者的新宠。然而…

小马识途营销顾问谈小红书平台运营推广策略

近年来&#xff0c;互联网平台层出不穷&#xff0c;小红书作为大多数年轻女性比较喜欢使用的软件之一&#xff0c;拥有很高的流量&#xff0c;目前已经成为网络推广渠道中商品的一个重要营销阵地。很多的品牌开始利用小红书平台做推广&#xff0c;那么如何运营小红书?是否投放…

卫士通电科网安安全IpSec网关Ukey开发对接

官方公开的开发文档&#xff0c;有几个坑&#xff0c;着重说一下踩坑的记录过程。 1、通过官方的客户端接口模拟程序获取前端参数&#xff1a;随机数和token 2、java程序调用官方sdk&#xff0c;postman请求测试&#xff1a; 3、贴出关键的java集成类&#xff1a; import cn.h…

shell脚本 函数

函数 shell的函数 定义&#xff1a;将命令序列按照格式写在一起。格式指的是函数的固定格式。两种格式。 for i in {} do 命令序列 done if [ ] then 命令序列 fi 作用&#xff1a;方便重复使用。函数库&#xff0c;集中在一起&#xff0c;随时可以传参调用。大的工…

Spring延迟Bean的初始化

在Spring中&#xff0c;ApplicationContext默认会在容器初始化时创建并配置所有定义为单例&#xff08;Singleton&#xff09;的Bean。这有助于在应用程序启动时立即发现任何配置错误或依赖问题。然而&#xff0c;在某些情况下&#xff0c;你可能希望延迟Bean的初始化&#xff…

pause 容器

概述 通过容器资源隔离的原理中知道容器之间是通过 NameSpace 和 cgroups 隔离开的&#xff0c;但是 pod 中的网络和存储却是共享的. kubernetes 为了解决网络共享问题&#xff0c;引入了 pause 容器&#xff0c;又叫Infra容器&#xff0c;在kubelet的配置中有KUBELET_POD_IN…

Vim和Nano简介

**Vim**&#xff1a; - Vim 是一个文本编辑器&#xff0c;它是 Vi 编辑器的一个改进版本&#xff0c;Vi 编辑器最初由 Bill Joy 在1976年为 BSD Unix 开发。 - Vim 由 Bram Moolenaar 开发&#xff0c;其第一个版本在1991年发布。Vim 的设计理念是“持继改进”&#xff0c;它的…

SpringMVC系列五: SpringMVC映射请求数据

SpringMVC映射请求数据 &#x1f49e;获取参数值说明应用实例 &#x1f49e;获取http请求消息头&#x1f49e;获取JavaBean对象使用场景说明应用实例注意事项和细节 &#x1f49e;获取servlet api说明应用实例注意事项和细节 上一讲, 我们学习的是SpringMVC系列四: Rest-优雅的…

VUE 项目用 Docker+Nginx进行打包部署

一、Docker Docker 是一个容器化平台&#xff0c;允许你将应用程序及其依赖项打包在容器中。使用 Docker&#xff0c;你可以创建一个包含 Vue.js 应用程序的容器镜像&#xff0c;并在任何支持 Docker 的环境中运行该镜像。 二、Nginx Nginx 是一个高性能的 HTTP 服务器和反向…

Eureka 学习笔记(1)

一 、contextInitialized() eureka-core里面&#xff0c;监听器的执行初始化的方法&#xff0c;是contextInitialized()方法&#xff0c;这个方法就是整个eureka-server启动初始化的一个入口。 Overridepublic void contextInitialized(ServletContextEvent event) {try {init…

React useRef 组件内及组件传参使用

保存变量&#xff0c; 改变不引起渲染 import { useRef} from react; const dataRef useRef(null) ... dataRef.current setTimeout(()>console.log(...),1000)绑定dom const inputRef useRef(null) <input ref {inputRef} />绑定dom列表 - ref 回调 const ite…