React基于monaco editor的在线代码编辑器开发

最新推荐文章于 2025-03-19 11:18:20 发布
最新推荐文章于 2025-03-19 11:18:20 发布
阅读量1.9k 收藏 7
点赞数 2
文章标签： 编辑器 react.js 前端 monaco editor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20567691/article/details/126557577
版权

完整项目在这里：monaco-editor-app

Monaco Editor App

本仓库用于演示Monoca Editor的用法

运行

  • node 版本：14.18.1，npm 版本：6.14.15。如果发现安装的依赖不对，可以对齐下 node 和 npm 版本
  • 运行项目：
    • npm install
    • npm run start

简介

monaco editor 是 vscode 官方提供的一款在线代码编辑器插件，功能强大，但是 API 文档真心难看。因此我特开一个项目专门用于演示 monaco editor 的用法。虽然本项目基于 React 开发，但不影响在其他框架中使用，因为这里我也没有做二次封装，都是直接调用 monaco editor 的 API。

monaco editor只是提供了一个壳给我们，代码提示，自动补全，语法检测等这些业务功能需要我们自己根据语言实现

欢迎有兴趣的朋友给本项目提交 demo

目前实现的部分功能如下所示

初始化实例以及切换语言

在这里插入图片描述

代码格式化

通过 ctrl + s 快捷键组合可以格式化代码

在这里插入图片描述

重新布局

在这里插入图片描述

监听代码编辑

在这里插入图片描述

右键定制面板

在这里插入图片描述

主题颜色定制

在这里插入图片描述

HTML 标签回车自动闭合

在这里插入图片描述

HTML 标签未闭合检测

如果忘记闭合 html 标签，则会一直波浪号提示

在这里插入图片描述

hover 波浪号有提示

在这里插入图片描述

issues 集锦

_葱
关注
react项目实现代码编辑器
m0_73195731的博客
10-07 1222
react项目实现代码编辑器
react-monaco-editor：摩纳哥的React编辑器
02-05
React摩纳哥编辑 React的。 例子 要在本地构建示例，请运行： yarn cd example yarn yarn start ...yarn add react-monaco-...import MonacoEditor from 'react-monaco-editor' ; class App extends React . Component {
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）
最新发布
weixin_45821809的博客
03-19 175
结尾有源码。
推荐一款创新的React在线编辑器：Vinceredream/react-online-editor
gitblog_00004的博客
04-24 1279
推荐一款创新的React在线编辑器：Vinceredream/react-online-editor 项目地址:https://gitcode.com/Vincedream/react-online-editor 项目简介 Vinceredream/react-online-editor 是一个基于React框架构建的在线代码编辑器组件。它允许开发者在Web应用中嵌入一个实时预览、可编辑的代码环...
react-exercise-playground：实时运行React代码的在线编辑器
gitblog_00352的博客
09-26 611
react-exercise-playground：实时运行React代码的在线编辑器 项目地址:https://gitcode.com/gh_mirrors/re/react-playground 项目介绍 react-exercise-playground 是一款功能强大的React在线代码编辑器，能够实时运行React代码。它不仅支持动态引入自定义文件和第三方依赖包，还全面支持TypeScr...
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在线编辑器
DreamFJ的博客
04-22 1792
https://codesandbox.io/s/proud-meadow-8i3nz?file=/src/index.js
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
03-27
React-Monaco-Editor是一款基于Microsoft的Monaco Editor构建的React组件，它允许开发者在React应用中集成一个功能强大的代码编辑器，尤其适用于Web开发中的代码编辑、预览和调试场景。Monaco Editor是VS Code的核心...
用于 React 的 Monaco Editor - 在任何 React 应用程序中使用 monaco-editor
06-08
@monaco-editor/react · Monaco Editor for React · 在任何 React 应用程序中使用 monaco-editor，无需使用 webpack（或 rollup/parcel/etc）配置文件/插件:high_voltage: 多模型编辑器已经支持； 享受它 :party_...
采用MonacoEditor和React打造自己的Web IDE
11-03
MonacoEditor是Microsoft开发的一个强大的代码编辑器组件，常用于在线代码编辑环境，如Visual Studio Online和CodeSandbox。React则是一个流行的JavaScript库，用于构建用户界面，它可以帮助我们构建交互式的Web应用...
react-online-editor::pencil:简单的在线React编辑器
05-06
前言 近几年前端发展Swift，很多概念性的想法渐渐地变成了现实，比如前端微服务、Serverless 在前端的应用、在线IDE编码等，越来越多“工程”级别的项目选择使用 Web 浏览器作为宿主平台，前端发展可谓如日中天，本篇文章选择在线IDE作为切入点，介绍其实现原理，并且动手写一个简易版本的 React 在线IDE。 CodeSandBox 是目前为止最为强大的在线 IDE 工具之一，他实现了 90% 的本地前端 IDE 工具的功能，以下是比较令人惊叹的几个特性： 完全浏览器在线打包，实现了可在浏览器运行的 webpack 工具。 可使用 npm 包 支持文件系统 可离线使用 可在线发布应用 是的，你没有看错，这一切都是发生在浏览器上，更为惊叹的是，CodeSanBox 是个人项目，并不是由专业的公司团队开发完成。其强大功能证明了，浏览器能够做的事情是无穷无尽的，下面我将简单讲解其结
react-antdesign组件库实时可视化编辑器实时生成react代码
08-14
ant-design 组件库实时可视化编辑器，实时生成 react 代码
Codetab:使用reactjs的实时在线代码编辑器
05-23
一个使用ReactJs进行前端开发的实时代码编辑器，您可以在其中使用HTML，CSS和Javascript进行编码，并获得代码的实时视图。 链接到托管的应用程序： Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject
react-simple-code-editor:简单的简洁代码编辑器，语法高亮
05-01
React简单代码编辑器 简单的简洁代码编辑器，带有语法突出显示功能。 为什么 几种基于浏览器的代码编辑器（例如Ace，CodeMirror，Monaco等）提供了将功能全面的代码编辑器嵌入到您的网页中的功能。 但是，如果您只需要带有语法高亮显示的简单编辑器而没有任何其他功能，则它们可能会过大，因为它们通常没有很小的捆绑包占用空间。 该库旨在为简单的代码编辑器提供语法高亮显示支持，而无需任何额外功能，非常适合用户可以提交代码的简单嵌入和表单。 特征 第三方库突出显示模块化语法 通过按Tab键缩进行或所选文本，并带有可自定义的缩进 自动缩进新行 将所选文本括在括号，方括号或引号中 撤消整个单词，而不是逐个字母地 可访问，使用Ctrl+Shift+M （Mac）/ Ctrl+M切换捕获选项卡键 安装 npm install react-simple-code-editor 或者 yarn
【React+TS+UmiJS】react-monaco-editor代码编辑器使用
05-14
react-monaco-editor代码编辑器使用，使用UmiJS构建项目，使用Typescript和React实现。 本项目实现功能：1、使用monaco-editor-webpack-plugin，支持代码高亮显示；2、支持背景颜色（黑/白）切换；3、支持代码语言...
在 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代码编辑器：react-simple-code-editor
gitblog_00581的博客
08-15 828
探索简洁高效的React代码编辑器：react-simple-code-editor 项目地址:https://gitcode.com/gh_mirrors/re/react-simple-code-editor 在开发Web应用时，集成一个功能强大的代码编辑器往往能提高用户体验。然而，当你的需求仅仅是一个轻量级的，带有基本语法高亮的编辑器时，像Ace、CodeMirror或Monaco这样的重量...
在线代码编辑器 Codemirror 的轻量级 React 组件
weixin_34121304的博客
07-13 1626
代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/ 特性:
React-Monaco-Editor：简化配置的React代码编辑器
资源摘要信息:"react-monaco-editor是一个针对React框架的代码编辑器组件，它集成了微软开发的Monaco编辑器，为开发者提供了一个强大的编程环境。Monaco编辑器是VSCode编辑器的核心组件，因此它具备了代码高亮、智能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值