普通web中使用编辑器 Monaco Editor

最新推荐文章于 2024-06-26 10:17:01 发布
最新推荐文章于 2024-06-26 10:17:01 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： 工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30849965/article/details/109029986
版权
本文介绍了如何在web项目中集成和使用Monaco Editor，包括下载、引入文件到项目及具体的引用步骤，并提供了Vue环境下Monaco Editor的使用参考。
摘要由CSDN通过智能技术生成

web 代码编辑器 Monaco Editor

下载地址：

https://microsoft.github.io/monaco-editor/

下载完成后解压，只需要如下文件夹中内容

package/min/vs/

将所需文件夹拖入项目，在项目中引用

<script type="text/javascript" src="../static/monaco/loader.js">
最低0.47元/天 解锁文章
极致而简
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-monaco-editor：摩纳哥的React编辑器
02-05
React摩纳哥编辑 React的。 例子 要在本地构建示例，请运行： yarn cd example yarn yarn start 然后在浏览器中打开http://localhost:8886 。 安装 yarn add react-monaco-editor 与Webpack一起使用 import React from 'react' ; import { render } from 'react-dom' ; import MonacoEditor from 'react-monaco-editor' ; class App extends React . Component {
采用MonacoEditor和React打造自己的Web IDE
11-03
在我们的案例中，我们将使用MonacoEditor作为编辑器的核心，它提供了丰富的代码编辑功能，如语法高亮、自动完成和错误检查。MonacoEditor支持多种编程语言，但在这里我们将为一个虚构的简单语言“TodoLang”定制编辑...
react-monaco-editor使用
chenxiaoyi0207的博客
11-23 5213
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
Monaco Editor 的基本使用及 Vue 组件封装
最新发布
paper_umbrella的博客
06-26 623
monaco-editor代码编辑器
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更加健全，并且性能比较强大。 .
# Monaco Editor 使用
不积跬步，无以至千里；不积小流，无以成江海
12-05 4006
- `Monaco Editor`是 `VS Code`底层的代码编辑器，开源协议是`MIT`，支持`Edge`、 `Chrome`、`Firefox`、`Safari`和`Opera`浏览器，但是不支持移动端浏览器或移动端框架。 - `VSCode`中的代码编辑器和`Monaco Editor`使用的很多相同的核心模块，你可以将`Monaco Editor`用到自己的项目中，作为云端编辑器的支持。
Monaco Editor编辑器
EmotionComputer
10-23 1016
它提供了一个易于使用的 React 组件，使得在 React 应用程序中使用 Monaco 编辑器变得更加容易。这只是一个简单的演示示例，你可以根据自己的需求进行更多的配置和定制。Monaco Editor 是一个基于浏览器的代码编辑器，由微软开发。是 Monaco 编辑器的核心代码库，它提供了基于浏览器的代码编辑器的所有功能。库，并提供了一些额外的功能和组件，例如 Monaco 编辑器的主题和语言配置、编辑器状态管理等。运行你的 React 应用程序，你将看到一个带有初始代码的 Monaco 编辑器。
Monaco Editor 代码编辑器 v0.14.2
10-10
Monaco Editor是一款由微软开发并开源的代码编辑器，它基于知名的Visual Studio Code（VS Code）构建，专门设计用于在Web浏览器环境中运行。这个编辑器的出现，为开发者提供了在云端编写和编辑代码的强大工具，使得...
vue中实现Monaco Editor自定义提示功能
10-16
Monaco Editor是一款强大的Web代码编辑器，源自微软的VSCode项目，为浏览器环境提供了类似于VSCode的代码编辑体验。它支持多种编程语言，并允许开发者自定义各种功能，包括提示功能。 首先，安装Monaco Editor库： ...
monaco-editor实现的sql编辑器
02-22
Monaco-Editor是一款由Microsoft开发的强大代码编辑器，它被广泛应用在各种在线代码编辑场景中，比如VS Code的Web版本。在本项目中，我们利用Monaco-Editor构建了一个专门针对SQL语言的编辑器，旨在提供高效且便捷的...
wc-monaco-editor：香草Monaco编辑器Web组件
02-06
轻松嵌入摩纳哥编辑器 安装 安装 npm i @vanillawc/wc-monaco-editor 从NPM导入 < script type =" module " src =" node_modules/@vanillawc/wc-monaco-editor/index.js " > </ script > 从CDN导入 &...
monacoeditor一个基于浏览器的代码编辑器
08-10
一个基于浏览器的代码编辑器，采用VS Code开发
WEB界面编辑任意SQL条件组合
04-19
WEB界面编辑任意SQL条件组合
在线代码编辑器：Monaco Editor
qq_30436011的博客
09-28 1万+
Monaco Editor不得的不说是一个非常强大的在线代码编辑器，可以为自己的项目提供云端代码编辑器的基础技术支持，可以在其基础上扩展很多强大的功能，当然上手不一定简单，需要根据自己的需求确定开发方案，有需求的小伙伴可以去研究一下！
Vue2的SQL编辑器 - monaco的基本使用
我码玄黄的博客
11-11 1400
本文在vue中实现了一个基本的SQL编辑器，包括语法高亮，关键字补全，表名，字段名补全等功能。
代码编辑器插件：Monaco Editor的基本使用
前端挖掘机
04-22 5899
安装 1、monaco-editor和monaco-editor-webpack-plugin安装 npm install monaco-editor --save-dev npm install monaco-editor-webpack-plugin --save-dev 2、配置vue.config.js(vue-cli3.0需在根目录中新建) const MonacoWebp...
Monaco Editor安装及使用
eagle_88的专栏
05-13 1万+
最近在玩以vue为基础开发web代码编辑器，发现Monaco Editor（仿 Visual Studio Code）插件完美的解决了业务需求。故将重要的记录如下： 安装 1、monaco-editor和monaco-editor-webpack-plugin安装 npm install monaco-editor --save-dev npm install monaco-editor-webp...
Monaco Editor --Web编辑器 自定义主题、代码提示等
weixin_42160499的博客
11-19 4283
官网： Monaco Editor JS配置信息： //相关的包配置需要下载到对应目录 require.config({ paths: { 'vs': './vs' }}); require(['vs/editor/editor.main'], function() { monaco.editor.defineTheme('BlackTheme', { base: 'vs-dark', inherit: true,
VS Code 编辑器： Monaco Editor 介绍
顺其自然~专栏
04-18 1万+
Any application that can be written inJavaScript, will eventually be written inJavaScript. --Atwood's Law 任何可以用JavaScript来写的应用，最终都将用JavaScript来写。--阿特伍德定律 Monaco Editor 是一个浏览器端的代码编辑器库，同时它也是 VS Code 所使用的编辑器。Monaco Editor 可以看作是一个编辑器控件，只提供了基础的编辑器与语言相...
用MonacoEditor和React创建个性化Web IDE：实现基础功能与语言支持
首先，我们将概述现代Web编辑器（如VS Code、Atom和CodeSandbox）的工作原理，并介绍为何自己开发一个定制编辑器可能是一个有价值的学习项目。 MonacoEditor是Microsoft提供的一个轻量级且功能强大的JavaScript代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值