React 中如何使用 Monaco

Monaco 是微软开源的一个编辑器,VSCode 也是基于 Monaco 进行开发的。如果在 React 中如何使用 Monaco,本文将介绍如何在 React 中引入 Monaco。

安装 React 依赖

yarn add react-app-rewired --dev
yarn add monaco-editor-webpack-plugin --dev
yarn add monaco-editor
yarn add react-monaco-editor

创建Webpack 配置文件并添加插件

在项目的根目录下创建 config-overrides.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');module.exports = function override(config, env) {config.plugins.push(new MonacoWebpackPlugin({languages: ['json']}));return config;
}

引入 Monaco 组件

核心函数 handleEditorDidMount,行选中时,在行尾添加一句话,通过事件监听函数 onDidChangeCursorSelection 和 Decoration 进行实现

import logo from './logo.svg';
import './App.css';
import MonacoEditor from 'react-monaco-editor';
import { useRef, useState,useEffect }  from 'react';function App() {const editorRef = useRef(null);const monacoRef = useRef(null);const decorationsRef = useRef([]);const handleEditorDidMount = (editor, monaco) => {editorRef.current = editor;monacoRef.current = monaco;// Add an event listener for cursor position changeseditor.onDidChangeCursorSelection(() => {const selection = editor.getSelection();// if (selection.isEmpty()) {//   // Remove decorations if selection is empty//   editor.deltaDecorations(decorationsRef.current, []);//   return;// }const lineNumber = selection.positionLineNumber;const lineContent = editor.getModel().getLineContent(lineNumber);if (lineContent !== "") {// Add decoration if the line starts with 'var'const newDecorations = editor.deltaDecorations(decorationsRef.current, [{range: new monaco.Range(lineNumber, 1, lineNumber, 1),options: {isWholeLine: true,afterContentClassName: 'myAfterContentDecoration'}}]);decorationsRef.current = newDecorations;} else {// Remove decorations if the line does not start with 'var'editor.deltaDecorations(decorationsRef.current, []);}});};useEffect(() => {// Define custom styles for the decorationsconst style = document.createElement('style');style.innerHTML = `.myAfterContentDecoration::after {content: ' // 备注';color: green;font-weight: bold;}`;document.head.appendChild(style);}, []);return (<div style={{'margin':'100px auto', 'width': '800px'}}><MonacoEditorwidth="800"height="600"language="javascript"theme="vs-dark"value={""}options={""}editorDidMount={handleEditorDidMount}/></div>);
}export default App;

在这里插入图片描述

总结

Monaco 功能非常强大,API 也比较复杂,后面后陆续看看它的 API 如何使用。

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

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

相关文章

学习和发展人工智能:新兴趋势和成功秘诀

人工智能(AI)继续吸引组织&#xff0c;因为它似乎无穷无尽地提高生产力和业务成果。在本博客中&#xff0c;了解学习和发展(L&D)部门如何利用人工智能改进流程&#xff0c;简化工作流程&#xff1f; 学习与发展(L&D)部门领导开始探索如何提高和支持人工智能能力的劳动…

1-认识网络爬虫

1.什么是网络爬虫 ​ 网络爬虫&#xff08;Web Crawler&#xff09;又称网络蜘蛛、网络机器人&#xff0c;它是一种按照一定规则&#xff0c;自动浏览万维网的程序或脚本。通俗地讲&#xff0c;网络爬虫就是一个模拟真人浏览万维网行为的程序&#xff0c;这个程序可以代替真人…

工业智能网关在现代工业生产中的重要性-天拓四方

工业智能网关是一款具备挖掘工业设备数据并接入到自主开发的云平台的智能嵌入式网络设备。它具备数据采集、协议解析、边缘计算&#xff0c;以及4G/5G/WiFi数据传输等功能&#xff0c;并能接入工业云平台。这种网关不仅支持采集PLC、传感器、仪器仪表和各种控制器&#xff0c;还…

iss文件本机可以访问,其他电脑无法访问解决

1.搜索的时候有很多答案&#xff0c;总结就是2种 引用来自这位大佬的博客跳转 2.我实际解决了的方法 将这里的ip地址修改为你局域网wifi的ip 如何看自己wifi的ip&#xff0c;大家自行百度&#xff01;

linux中与网络有关的命令

本文的命令总览 ifconfig命令 在 Linux 系统中&#xff0c;ifconfig 命令用于配置和显示网络接口的信息&#xff0c;包括 IP 地址、MAC 地址、网络状态等。同时我们也可以利用ifconfig 命令设置网络接口对应的ip地址&#xff0c;子网掩码等 当你使用 ifconfig 命令时&#xf…

06-6.3.3 图的深度优先遍历

&#x1f44b; Hi, I’m Beast Cheng &#x1f440; I’m interested in photography, hiking, landscape… &#x1f331; I’m currently learning python, javascript, kotlin… &#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…

UE5.4新功能 - Texture Graph上手简介

TextureGraph是UE5.4还在实验(Experimental)阶段的新功能&#xff0c;该功能旨在材质生成方面达到类似Subtance Designer的效果&#xff0c;从而程序化的生成一些纹理。 本文就来简要学习一下。 1.使用UE5.4或以上版本&#xff0c;激活TextureGraph插件 2.内容视图中右键找到…

万字 | 菊花厂C语言编程10大规范

本文是大厂C代码规范&#xff0c;有点长&#xff0c;有时间可以学习下。 1 代码总体原则 1、清晰第一 清晰性是易于维护、易于重构的程序必需具备的特征。代码首先是给人读的&#xff0c;好的代码应当可以像文章一样发声朗诵出来。 目前软件维护期成本占整个生命周期成本的…

【INTEL(ALTERA)】为什么Nios® II构建流程报告无法在 Windows WSL 上确定程序大小?

目录 说明 解决方法 说明 由于英特尔 Quartus Prime 专业版软件 19.3 版中的 nios2-elf-stackreport 实用程序出现问题&#xff0c;nios2-elf-stackreport 实用程序确实如此 不报告程序大小或堆栈堆栈大小。 解决方法 要解决此问题&#xff0c;编辑 nios2-stackreport.pl …

1)并发事务的问题

1) 并发事务的问题&#xff1f; &#xff08;1&#xff09;读“脏”数据 事务T1修改数据后T2读取了该数据&#xff0c;但是T1撤消了修改&#xff0c; 事务T1进行了回滚&#xff0c;导致事务T2读取的数据与数据库中的数据不一致。&#xff08;2&#xff09;丢失修改 两个事务…

面向对象(Java)

构造方法只能在对象实例化的时候调用 this可以作为方法参数&#xff0c;表示调用方法的当前对象 this可以作为方法返回值&#xff0c;表示返回当前对象 封装 通过方法访问数据&#xff0c;隐藏类的实现细节 static&#xff1a;类对象共享&#xff0c;类加载时产生&#xff0c;…

Qt 实战(7)元对象系统 | 7.2、MOC(Meta-Object Compiler 元对象编译器)

文章目录 一、MOC1、MOC的作用2、MOC的工作原理3、MOC的使用方式4、MOC生成的文件结构 前言&#xff1a; 在Qt框架中&#xff0c;MOC&#xff08;Meta-Object Compiler&#xff09;是一个至关重要的工具&#xff0c;它负责处理Qt特有的元对象系统&#xff08;Meta-Object Syste…

苹果电脑虚拟机运行Windows Mac环境安装Win PD19虚拟机 parallels desktop19虚拟机安装教程免费密钥激活

在如今多元的数字时代&#xff0c;我们经常需要在不同的操作系统环境下进行工作和学习。而对于 Mac 用户来说&#xff0c;有时候需要在自己的电脑上安装 Windows 操作系统&#xff0c;以体验更多软件及功能&#xff0c;而在 Mac 安装 Windows 虚拟机是常用的一种操作。下面就来…

自定义控件动画篇(七)layoutAnimation与gridLayoutAnimation的使用

在Android中&#xff0c;LayoutAnimation 和 GridLayoutAnimation 是用来给布局内的子视图添加动画效果的。它们允许你对整个布局的显示过程进行动画处理&#xff0c;而不是单个视图。 LayoutAnimation LayoutAnimation 可以应用于任何的布局管理器&#xff0c;如LinearLayou…

docker的安装与基本使用

一.docker的安装卸载 1.先安装所需软件包 yum install -y yum-utils2.设置stable镜像仓库 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 3.安装DOCKER CE yum -y install docker-ce docker-ce-cli containerd.io 4.验…

深度Q网络(DQN)算法技术博客

深度Q网络&#xff08;DQN&#xff09;是一种将深度学习与强化学习相结合的算法&#xff0c;用于解决高维状态空间的强化学习问题。本文将详细介绍DQN算法的基本原理&#xff0c;关键公式以及具体的代码实现。 一、DQN算法的基本原理 DQN算法是Q学习的一种扩展&#xff0c;利…

Prompt的万能公式和优化技巧

文章目录 前言一、万能公式二、优化技巧1.设定角色2.设定目标和动机3.引导主观回答4.预设条件5.做强调6.思维链&#xff08;COT&#xff09;7.巧用定界符 前言 随着LLM的发展&#xff0c;能给我们带来很多方便&#xff0c;但是又引出了一个新的问题就是我们该如何使用他们&…

通过9大步骤,帮助企业在数字化转型中搭建数据分析的报表体系!

引言&#xff1a;在数字化转型中&#xff0c;企业搭建数据分析的报表体系是一个系统性的过程&#xff0c;需要综合考虑业务需求、数据来源、技术平台等多个方面。此外从报表生命周期的角度来说&#xff0c;从产生、使用以及最后消亡退出体系&#xff0c;都需要通盘考虑&#xf…

Linux上快速定位Java代码问题行

生产环境中&#xff0c;经常会遇到CPU持续飙高或内存、IO飙高&#xff0c;如何快速定位问题点是很多新手头疼的问题&#xff0c;只能通过经验和代码推理&#xff0c;其实这里针对Java程序可以通过top和jstack命令&#xff0c;快速定位到问题代码。 Top命令的输出 具体定位之前…

k8s-第八节-Helm

Helm & 命名空间 介绍 Helm类似 npm,pip,docker hub, 可以理解为是一个软件库,可以方便快速的为我们的集群安装一些第三方软件。使用 Helm 我们可以非常方便的就搭建出来 MongoDB / MySQL 副本集群,YAML 文件别人都给我们写好了,直接使用。官网 https://helm.sh/zh/ …