monaco-edit使用记录

最新推荐文章于 2024-11-20 11:53:30 发布
最新推荐文章于 2024-11-20 11:53:30 发布
阅读量196 收藏
点赞数
分类专栏： js vue 文章标签： js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhjm92/article/details/127356870
版权
博客分享了Monaco Edit的代码地址，为前端开发人员提供了相关代码资源，地址为https://gitee.com/zhjm/monaco-edit.git 。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Python Web开发记录 Day12：Django part6 用户登录
Code_流苏：在代码中寻诗意
03-16 1229
Python Web开发记录 Day12：Django part6 用户登录
create-react-app react中使用monaco-editor v0.44
qq_43519131的博客
01-05 625
在通过create-react-app创建的react应用中使用monaco-editor v0.44
react 中 使用 Monaco Editor 编辑器
Web前端日志---hellcoldby
04-15 1万+
Monaco Editor 微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode。 而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。 .
在 react 中使用 monaco-editor/ react-monaco-editor
寬真
04-11 1万+
http://www.ptbird.cn/react-monaco-editor.html 另外代码不高亮的问题参考：解决0.25.1 版本的 react-monaco-editor 代码高亮和代码提示问题及我的另一篇文章。 注意： 本文章是基于 react-monaco-editor@0.18.0 版本写的，如果使用新版本，比如 0.25.1 代码无法高亮和提示，请参考这篇文章：解决 React...
React基于monaco editor的在线代码编辑器开发
lzc的博客
08-27 1992
在React项目中集成monaco editor，快来看看如何实现html标签回车自动闭合、html标签未闭合检测、主题定制、右键面板定制等功能
react-monaco-editor使用
chenxiaoyi0207的博客
11-23 5647
1.版本 "react": "^17.0.2", "@craco/craco": "^6.2.0", "monaco-editor": "0.27.0", "monaco-editor-webpack-plugin": "4.1.2", 2.使用react-monaco-editor代码 import React, { useState, useRef } from 'react'; import MonacoEditor from 'react-monaco-editor'; function ME
Vue3.0使用TSX模板创建代码编辑器页面
SearchCXKCCTV的博客
12-23 1498
使用MonacoEditor MonacoEditor是微软开源的一个在线页面代码编辑器，由于API众多却缺乏实例代码，特此记录一下如何在Vue3.0最新版本中使用Monaco 为什么使用TSX Vue3.0由于加入了Composition-API支持，使得JSX模板语法得以更好地进行编写，而由于TypeSript不支持.vue后缀文件的代码检查，在使用TSX语法一切都可以迎刃而解，这里不再赘述Composition-API的使用方法以及深层运行原理，我们只需要知道.vue文件实际上是在编译执行rener函
Monaco Speech Editor - 适用于视障人群代码编辑器
sinat_39448512的博客
09-20 578
Monaco Speech Editor 是一款在线代码编辑器，它旨在为视障人群编程提供支持。内置丰富的语音模块和为视障人群定制的UI界面，方便视障人群甚至盲人操作。 GitHub项目链接：monaco-speech-editor 项目背景 根据世界卫生组织2010年的数据，全盲者在全年龄段人口中所占比例为0.58%。在全盲人口中，大部分是中老年人口。从下图可以看出，致盲风险随着年龄快速...
idea--Preferences
weixin_34357887的博客
04-28 1万+
Font Font：Monaco Size：16 Line spacing: 1.3 Appearance Theme：Darcula 勾选Use dark window headers 第三方主题 www.color-themes.com/ 下载主题 点击选择该主题 点击下载主题 下载文件是一个jar包，然后在File -> import setting...，导入jar包 点击OK 点...
【常用组件整理】
Lcc的博客
11-20 1025
常用组件整理
react-app框架——使用monaco editor实现online编辑html代码编辑器
热门推荐
编程知识分享，主打前端
01-18 2万+
大家好，我是yma16，本文分享关于 react-app框架——使用monaco editor实现online编辑html代码编辑器。monaco editor 编辑器Monaco Editor是一款功能强大的Web编辑器，由微软开发并使用在多个项目中。它是基于VS Code编辑器的核心组件，具有类似的功能和用户体验。轻量级：Monaco Editor具有出色的性能，可以快速加载和渲染大型文件。可定制性：用户可以通过添加自定义插件和主题来扩展和个性化编辑器。
react & monaco editor & vs code
weixin_30300225的博客
03-06 191
react & monaco editor & vs code monaco-editor https://microsoft.github.io/monaco-editor/index.html https://github.com/Microsoft/monaco-editor https://www.npmjs.com/package/monaco-editor...
monaco-editor 编辑器 react版本简单理解
m0_56503111的博客
03-16 2982
获取在线编辑的信息 ： 在处理数据时候，拿传入的value。在onchange里面也能获取到。我直接用的基于react的继承依赖，也可以用官网的。在其他组件使用直接引入组件就好。
react-monaco-editor格式化
qq_37233023的博客
01-04 7188
react-monaco-editor引入 import Monaca from 'react-monaco-editor'; 2、配置 const editorDidMountHandle = (editor: any, monaco: any) => { editor.getAction('editor.action.formatDocument').run() //格式化 } <Monaca height={monacaHeight} .
摩纳卡在线编辑的引入umi-react
miin_ying的博客
02-28 341
monaco-editor在umi3构建的react项目中的使用
React 中如何使用 Monaco
hawk2014bj的博客
07-04 951
Monaco 功能非常强大，API 也比较复杂，后面后陆续看看它的 API 如何使用。
React 使用富文本编辑器
qq_36249659的博客
03-09 992
https://blog.youkuaiyun.com/weixin_38514634/article/details/89964746
Monaco Editor编辑器
EmotionComputer
10-23 1211
它提供了一个易于使用的 React 组件，使得在 React 应用程序中使用 Monaco 编辑器变得更加容易。这只是一个简单的演示示例，你可以根据自己的需求进行更多的配置和定制。Monaco Editor 是一个基于浏览器的代码编辑器，由微软开发。是 Monaco 编辑器的核心代码库，它提供了基于浏览器的代码编辑器的所有功能。库，并提供了一些额外的功能和组件，例如 Monaco 编辑器的主题和语言配置、编辑器状态管理等。运行你的 React 应用程序，你将看到一个带有初始代码的 Monaco 编辑器。
代码编辑器之monaco editor
qq_41383241的博客
12-05 2万+
介绍vue2、vue3中使用monaco编辑器，但是vue2存在未解决的问题。博主建议使用vue3搭配monaco编辑器，vue2建议搭配ace编辑器。如果大家vue2成功使用monaco也可告诉我，感谢撒花~~ 其中部分参考其他博主
monaco-editor使用
最新发布
12-28
### 如何使用 Monaco Editor 为了在项目中集成并使用 Monaco Editor，需先安装必要的依赖项。通过 npm 安装 `monaco-editor` 及其相关插件可以实现这一点[^4]。 ```bash npm install monaco-editor@0.30.0 --save npm install monaco-editor-webpack-plugin@6.0.0 --save-dev npm install monaco-languageclient --save npm install @codingame/monaco-jsonrpc --save ``` 对于 Electron 应用程序开发环境，则还需要额外配置： ```bash vue add electron-builder electron-builder install-app-deps ``` 引入 Monaco 编辑器到组件文件顶部是启动使用的首要步骤之一。这可以通过如下方式完成: ```javascript import * as monaco from "monaco-editor"; import { loader } from "@monaco-editor/react"; loader.config({ monaco, }); ``` 除了基本导入外，该库还提供了多个实用工具函数和 React 组件来简化编辑器的嵌入过程。例如，可以直接利用 `<Editor>` 和 `<DiffEditor>` 这两个预定义好的 React 组件快速构建页面上的代码编辑区域[^2]: ```jsx import Editor, { DiffEditor, useMonaco, loader } from '@monaco-editor/react'; function App() { return ( <div> {/* 单一版本编辑器 */} <Editor height="90vh" defaultLanguage="typescript" defaultValue="// some comment..." /> {/* 差异对比编辑器 */} <DiffEditor original={originalCode} modified={modifiedCode} height="90vh" /> </div> ); } ``` 值得注意的是，尽管 Monaco Editor 默认支持多种编程语言语法高亮显示功能，但对于某些特定需求如 TextMate 语法的支持则可能需要借助第三方解决方案，比如 bolinfest 提供的一个开源项目 monaco-tm 就能很好地解决这个问题[^3]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值