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;是一个强大的工…

电脑丢失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…

卫士通电科网安安全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;随时可以传参调用。大的工…

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…

无声短视频:成都柏煜文化传媒有限公司

无声短视频&#xff1a;视觉艺术的独特魅力 在数字化时代的浪潮中&#xff0c;短视频以其简短、直观、易于传播的特点迅速崛起&#xff0c;成为当下最热门的媒体形式之一。而在众多的短视频类型中&#xff0c;无声短视频以其独特的视觉表达方式&#xff0c;逐渐吸引了越来越多…

Intelij IDEA中Mapper.xml无法构建到资源目录的问题

问题场景&#xff1a; 在尝试把原本在eclipse上的Java Web项目转移至Intelij idea上时&#xff0c;在配置文件均与eclipse一致的情况下出现了如下报错&#xff1a; org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): cn.umbrella.crm_core.…

leetcode118 杨辉三角

给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRows 1 输出: [[1]] public List…

信创服务器操作系统的适配迁移分析

浅谈信创服务器操作系统的适配迁移 01 服务器操作系统迁移适配流程复杂 随着CentOS停服临近和红帽RHEL源码权限受限&#xff0c;服务器操作系统安全漏洞风险加剧。国内众多企业面临CentOS、REHL等系统升级替换的挑战。同时&#xff0c;出于安全、功能升级和合规需求&#xff0…

33、循环语句--函数---递归+阶乘

一、函数 1.1、shell的函数 1.1.1、函数的定义&#xff1a;将命令序列按照格式写在一起。格式指的是函数的固定格式。两种格式。 for i in {}do命令序列doneif []then 命令序列else命令序列fi #可以作为一个命令序列作用&#xff1a;方便重复使用&#xff0c;函数库&…

CubeMx打不开

问题点&#xff1a;打开CubeMx一直这个界面&#xff0c;然后就消失了。 问题所在&#xff1a;java版本过高。 博主的版本是合适的&#xff0c;如果你的版本是17什么的肯定是不合适的。 解决方法&#xff1a;卸载重装 卸载工具站内下载&#xff0c;免安装&#xff1a;&#xf…

极速解析,精准合规 — Ada,现代C++的URL解析器

Ada&#xff1a;用Ada&#xff0c;让URL解析变得轻而易举。- 精选真开源&#xff0c;释放新价值。 概览 Ada是一个用现代C编写的快速且符合WHATWG标准的URL解析库。它通过了WHATWG网站提供的全部规范测试&#xff0c;并在包括Windows、Linux、macOS在内的多个平台上表现卓越。…