在线代码编辑器：Monaco Editor

最新推荐文章于 2024-06-18 16:46:51 发布
最新推荐文章于 2024-06-18 16:46:51 发布
阅读量9.8k 收藏 13
点赞数
分类专栏： 前端 文章标签： 编辑器 firefox safari
原文链接：http://www.fairysoftware.com/monaco_editor.html
版权

monaco editor是微软开源的一款web版代码编辑器。它支持智能提示，代码高亮，代码格式化。

Monaco Editor是为VS Code提供支持的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。简单的理解就是VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块，你可以将Monaco Editor用到自己的项目中，作为云端编辑器的支持，支持IE 11，Edge，Chrome，Firefox，Safari和Opera！

相关地址

Github：

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

文档和示例等：

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

 

安装

安装没什么好说的，你可以到上面地址中下载，也可以直接使用npm安装

npm install monaco-editor@0.17.0

特性

  • 以下语言丰富的智能感知以及验证功能

TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML

  • 多数语言支持的语法着色（高亮）支持

XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C……

  • 代码差异比较

内联代码差异比较

非内联代码差异比较

  • 内置三种主题（用过VSCode都知道）

上面都是原生Visual Studio亮色主题

Visual Studio Dark主题：

高对比度暗色主题：

快速开始

想要直接开发可能不是一件非常简单的事情，所以给出官网提供的所有示例，建议感兴趣的同学可以直接下载下来查看相关示例代码

https://github.com/Microsoft/monaco-editor-samples/

1、在终端执行以下四条命令，前提是你已存在git和node的环境，如果不存在则先安装git或者node

git clone https://github.com/Microsoft/monaco-editor-samples.git
cd monaco-editor-samples
npm install .
npm run simpleserver

2、然后访问http://localhost:8888即可体验

选择你想体验的示例，有一些可能还需要其他的操作，按照提示来即可

 

3、项目示例Demo介绍

  • browser-amd-editor:

使用AMD延迟加载在浏览器中运行

  • browser-script-editor

通过<script>标签使用AMD同步加载在浏览器中运行

  • browser-esm-webpack

使用webpack在浏览器中运行

  • browser-esm-webpack-small

使用webpack在浏览器中运行（仅限编辑器的一个子集）

  • electron-amd

在electron运行

  • nwjs-amd

在nwjs中运行。v2初始版本没有

其他示例和用法

  • browser-amd-diff-editor

在浏览器中运行代码差异比较编辑器

  • browser-amd-iframe

在<iframe>中运行

  • browser-amd-localized

本土化运行

  • browser-amd-monarch

使用Monarch编写的自定义语言语法运行

  • browser-amd-shared-model

在两个编辑器中使用相同的文本模型

想要深入学习的小伙伴可以直接到官网上手学习，左边是配置，右边即可看到效果，这样的话学习起来会比较的快

相关链接

以下版本可能无法跟进最新的版本

React版本：

https://github.com/react-monaco-editor/react-monaco-editor

Vue版本：

https://github.com/matt-oconnell/vue-monaco-editor

Angular版本：

https://github.com/materiahq/ngx-monaco-editor

总结

Monaco Editor不得的不说是一个非常强大的在线代码编辑器，可以为自己的项目提供云端代码编辑器的基础技术支持，可以在其基础上扩展很多强大的功能，当然上手不一定简单，需要根据自己的需求确定开发方案，有需求的小伙伴可以去研究一下！

老谭TYH
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Monaco Editor 代码编辑器 v0.14.2
10-10
Monaco Editor 是微软开源的基于 VS Code 的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。
monaco-editor：基于浏览器的代码编辑器
02-06
请注意，该存储库不包含代码编辑器的源代码，仅包含将所有内容打包在一起并运送monaco-editor npm模块的脚本。 试试看 尝试编辑器。 正在安装 $ npm install monaco-editor 你会得到： 内部esm ：编辑器的ESM版本...
Monaco Editor系列（三）修改内容、多文件编辑、自定义主题
weixin_45855469的博客
04-16 1979
前言：上一篇文章讲了如何在我们下载的源码项目中，增加一个自己的路由页面供我们自由发挥，下面的若干篇文章，我会和大家一起探索 Monaco Editor 的 API，探索 Monaco Editor 的功能。Monaco Editor 的官方文档特别的简便，这也是学习来困难的原因之一。但是学习它一定是非常有价值的。接下来继续本篇文章的探索吧！一起加油吧！
monaco,monaco-editor,monaco-editor-webpack-plugin,
叮当的猫猫的博客
08-04 1556
总之，Monaco是一个包含了Monaco Editor和Monaco Language Server两个项目的总称，Monaco Editor是Monaco项目中的一个部分，Monaco Language Server是支持多种语言的语言服务器，它们可以相互配合使用，提供更加智能的代码提示和语法检查等功能。它类似于VS Code编辑器中的编辑器部分，提供了丰富的编辑器功能和各种语言的语法高亮、智能提示、代码折叠、代码补全等功能，并具有高度的可扩展性和灵活性。
Monaco Editor系列（五）Position 类型详解、设置Marker、指定位置插入或替换文本
weixin_45855469的博客
04-20 1026
前情回顾：上一篇文章主要探索了三个功能点，分别是版本对比功能、新建命令和菜单项和滚动条滚动的功能，涉及到的方法在这里稍稍的回顾一下。这样把所有的方法列出来，等到真正使用 Monaco 的时候，就比较方便了🪡 创建版本对比的编辑器 `monaco.editor.createDiffEditor(容器, 配置)`🪡 给 `diffEditor` 设置内容 `editor.setModel({original:旧版本model, modified:新版本model})`
代码编辑器之monaco editor
热门推荐
qq_41383241的博客
12-05 1万+
介绍vue2、vue3中使用monaco编辑器，但是vue2存在未解决的问题。博主建议使用vue3搭配monaco编辑器，vue2建议搭配ace编辑器。如果大家vue2成功使用monaco也可告诉我，感谢撒花~~ 其中部分参考其他博主
微软开源在线代码编辑器,编辑器天花板之Monaco Editor
qq_37440870的博客
08-27 2540
微软开源在线代码编辑器,微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器
monaco-editor新一代前端UI编辑器
qq_40650378的博客
08-21 2908
业务场景：编辑自动化脚本，开放自动编辑，需要采用一款编辑器，之前有在其他项目看到，发现这款适用于前端的编辑器真心不错，良心推荐！ 这是官方地址https://microsoft.github.io/monaco-editor/ 可以体验下强大之处（基本包涵了大部分的idea和vscode的功能） 废话不多说，直接上手vue项目对接，步骤如下： 1安装 npm install monaco-editor-vue npm install monaco-editor-webpac...
封装monaco-editor （sql）编辑器（Vue简略）
伐木小屋
06-14 1290
Monaco Editor 是一款开源的在线代码编辑器，它是 VSCode 的浏览器版本。
采用MonacoEditor和React打造自己的Web IDE
11-03
MonacoEditor是Microsoft开发的一个强大的代码编辑器组件，常用于在线代码编辑环境，如Visual Studio Online和CodeSandbox。React则是一个流行的JavaScript库，用于构建用户界面，它可以帮助我们构建交互式的Web应用...
VSCode代码框(Monaco Editor) -易语言
06-12
程序思路来源： VSCode代码框(Monaco Editor) 基本使用例程 https://bbs.125.la/forum.php?mod=viewthreadtid=14463397 重写原因：由于原作者 @hxznhf 使用的是易语言 高版本，我的易语言渣版本无法打开，于是我使用了易语言5.5和MiniBlink重写了一下改代码框，简化了部分代码（vs文件夹是我在官网上下载的“monaco-editor-0.18.1”中的 ）
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 {
vue中实现Monaco Editor自定义提示功能
10-16
Monaco Editor是一款强大的Web代码编辑器，源自微软的VSCode项目，为浏览器环境提供了类似于VSCode的代码编辑体验。它支持多种编程语言，并允许开发者自定义各种功能，包括提示功能。 首先，安装Monaco Editor库： ...
教大家怎么看monaco-editor的官方文档
04-17 2498
点进去，略过Enumerations（枚举）、Classes（类）、Interfaces（接口）、Type aliases（类型别名）、Events（事件）、Variables（变量）拉到下面，找到Function（功能）部分，主要是看create()，这个方法会在创建编辑器的时候初始化部分功能，这些功能在options里配置。点开具体参数，会有它的枚举值。如果不知道这个参数具体是干什么的，可以点开源代码Defined定义链接去看，里面注释的参数用途还是比较清楚的。
【Monaco】Monaco-Editor在Vue中使用(实现代码编辑与diff代码比较)
weixin_39085822的博客
03-19 9898
Monaco编辑器使用说明 1.什么是Monaco Monaco编辑器是为VS代码提供支持的代码编辑器 官方API文档 2.Monaco Editor安装及使用 2.1安装 npm install monaco-editor --save-dev npm install monaco-editor-webpack-plugin --save-dev 2.2配置vue.config.js const MonacoWebpackPlugin = require('monaco-editor-webpack
vue2项目 monaco-editor 使用心得
valsedefleurs的博客
04-26 1806
现总结一下在vue2项目安装使用monaco-editor走过的一些弯路。
Monaco Editor --Web编辑器 自定义主题、代码提示等
weixin_42160499的博客
11-19 4220
官网： Monaco Editor JS配置信息： //相关的包配置需要下载到对应目录 require.config({ paths: { 'vs': './vs' }}); require(['vs/editor/editor.main'], function() { monaco.editor.defineTheme('BlackTheme', { base: 'vs-dark', inherit: true,
C# 利用XejeN框架源码，编写一个在 Winform 界面上的语法高亮的编辑器，使用 Monaco 编辑器
最新发布
C#开发
06-18 422
类似 VS Code 的体验，可以考虑使用 Monaco Editor（VS Code 使用的编辑器）。当然，适用于Winform的这种语法高亮的编辑器，除了Monaco外，还有AvalonEdit、ScintillaNET等，都可以用于复杂需求的高亮显示。使用GetDataAsync方法，去调用html页面的js方法getEditorContent，便可以取到编辑器的内容。好的，下面我们开始介绍如何将 Monaco 编辑器引入到 Winform 中。五、在 Winform 窗体界面中，加载编辑器并执行。
Ubuntu 22.04 解决 firefox 中文界面乱码
csdn_life18的博客
06-16 395
如果之前安装了标准版的Firefox，ESR版本将作为一个单独的应用安装，不会替换掉原有的版本。为了避免在Ubuntu 22.04中文模式下的乱码问题，可以从Snap商店安装Firefox的ESR（Extended Support Release）版本。在为Ubuntu 22.04 Server安装完整的GNOME 42.01桌面后，将桌面语言设置为中文时，打开Firefox可能会出现中文乱码的问题。通过这些步骤，就可以解决Ubuntu 22.04中Firefox中文模式下的乱码问题。
pyqt5 Monaco Editor 从0做一个代码编辑器
06-08
Monaco Editor是一个由微软开发的Web代码编辑器，支持语法高亮、自动补全、代码折叠等功能，可以用于开发各种类型的代码编辑器。在PyQt5中，我们可以使用QWebEngineView控件来嵌入Monaco Editor，实现一个代码编辑器。 以下是一个简单的示例，演示如何使用PyQt5和Monaco Editor创建一个代码编辑器： ```python import sys from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout from PyQt5.QtWebEngineWidgets import QWebEngineView class CodeEditor(QWidget): def __init__(self): super().__init__() # 创建布局 layout = QVBoxLayout() # 创建Web视图 web_view = QWebEngineView(self) # 加载Monaco Editor网页 web_view.setHtml(''' <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Monaco Editor</title> <script src="https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js"></script> <script> require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' }}); require(['vs/editor/editor.main'], function() { var editor = monaco.editor.create(document.getElementById('editor'), { theme: 'vs-dark', language: 'python' }); }); </script> </head> <body> <div id="editor" style="height: 600px;"></div> </body> </html> ''') # 添加Web视图到布局 layout.addWidget(web_view) # 设置窗口布局 self.setLayout(layout) if __name__ == '__main__': app = QApplication(sys.argv) editor = CodeEditor() editor.show() sys.exit(app.exec_()) ``` 这个示例创建了一个PyQt5窗口，嵌入了Monaco Editor。在加载Monaco Editor网页时，我们指定了主题为“vs-dark”，语言为“python”。你可以根据自己的需求，修改主题和语言设置，来实现一个符合自己需求的代码编辑器。 需要注意的是，Monaco Editor是一个基于Web的编辑器，需要从远程服务器加载相关资源，因此在使用PyQt5嵌入Monaco Editor时，需要保证网络连接正常。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值