monaco-editor 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
monaco-editor 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
monaco-editor 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
monaco-editor 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
monaco-editor 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

Monaco Editor 是微软开源的基于 VS Code 的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。描述代码编辑器功能的页面在这里

image

安装:

npm install monaco-editor

你将会得到

  • inside dev: bundled, not minified

  • inside min: bundled, and minified

  • inside min-maps: source maps for min

  • monaco.d.ts: this specifies the API of the editor

集成

这里是嵌入编辑器最基本的HTML页面,更多的示例可在monaco-editor-samples找到

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container"  ="width:800px;height:600px;border:1px solid grey"></div>

<script src="monaco-editor/min/vs/loader.js"></script><script>    require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});    require(['vs/editor/editor.main'], function() {        var editor = monaco.editor.create(document.getElementById('container'), {            value: [                'function x() {',                '\tconsole.log("Hello world!");',                '}'            ].join('\n'),            language: 'javascript'        });    });</script></body>
</html>
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (9)

加载中
万恶的,没有中文文档。。。。。。翻译只能连蒙待猜。
2019/10/21 17:13
回复
举报
提醒一点,是“VSCode基于Monaco”,而不是“Monaco基于VSCode” 先有Monaco Editor,然后有Electron,然后才有VSCode
2018/10/09 16:42
回复
举报
我就是特意来找一个回复的,现在的技术文章真误人。。。
2020/04/10 10:14
回复
举报
编辑部翻译了三天 #monaco-editor#
2016/06/24 08:55
回复
举报
。。。 #monaco-editor#
2016/06/24 08:58
回复
举报
微软出品?? #monaco-editor#
2016/06/24 09:43
回复
举报
动不动就几百兆项目在浏览器里写? #monaco-editor#
2016/06/24 13:24
回复
举报
卧槽!要逆天!!!!帅的一脸!!!! #monaco-editor#
2016/06/24 18:09
回复
举报
有没有atom的编辑器源码? #monaco-editor#
2016/06/25 00:54
回复
举报
更多评论
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2018/08/08 17:38

monaco editor 实现自定义提示(sql为例)

monaco editor :https://www.cnblogs.com/XHappyness/p/9414177.html 这里实现自己定义的提示: .vue <template> <div> <div id="container" ></div> </div> </template> .ts import { Vue, Component, Watch } from "vue-property-decorator" import * as monaco from 'monaco-editor'; @Component({ }) export default class Parent extends Vue { ... value = '初始sql语句'; monac...

0
0
2020/03/10 09:38

monaco-editor做自己的代码测试工具

概述 本文说的是如何通过monaco-editor实现一个类似于codepen一样的在线代码测试工具。 微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monaco)就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的是,两者的平台不一样,monaco基于浏览器,而VSCode基于e...

0
0
发表了博客
2018/08/03 15:00

在vue项目中使用monaco-editor

monaco-editor: https://github.com/Microsoft/monaco-editor 在ESM中的使用官方也有对应文档:https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md 现基于vue-cli2的项目做具体步骤说明: 1. 安装: cnpm install monaco-editor --save cnpm install monaco-editor-webpack-plugin --save-dev 2. 修改webpack.base.conf.js配置文件 const MonacoWebpackPlugin = require('monaco-editor-webpa...

0
0
发表了博客
2020/05/28 10:31

【软工】[技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE

[技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE 官方文档与重要参考资料 官方demo 官方API调用样例 Playground 官方API Doc,但其搜索框不支持模糊匹配 官方GitHub Issues,可搜索相关问题 CSDN优秀博客 带主题颜色选择的demo 依赖与配置 在浏览器中搭建Monaco Editor,推荐使用ESModule版本+WebPack+npm插件的形式,比较简单。链接中即为官方给出的部署样例。 需要注意的是,经过笔者踩坑,推荐的node.js包版本为:...

2
0
发表了博客
2013/10/26 13:41

Install Monaco font on Ubuntu 12.04

### Download [download address][1] ### Move sudo mkdir /usr/share/fonts/truetype/monaco sudo mv Monaco_Linux.ttf /usr/share/fonts/truetype/monaco # sudo fc-cache -f -v [1]: https://github.com/cstrap/monaco-font/blob/master/Monaco_Linux.ttf...

0
0
发表了博客
2016/10/25 10:08

ubuntu16.04安装monaco字体

monaco字体是苹果系统下的字体,非常的好看,是我最喜欢的字体没有之一。现在我们就来在ubuntu下安装这个漂亮的字体 第一步: 进入github下载这个字体,github地址是https://github.com/cstrap/monaco-font。我们选择download zip的压缩包就可以。 第二步: 进入本地下载目录,解压刚刚下载的压缩包,进入解压后的文件夹,我们会看到这几个文件 install-font-archlinux.sh install-font-centos.sh install-font-gentoo.sh inst...

0
0
发表了博客
2014/09/16 12:30

同时使用等宽字体(如Monaco)和微软雅黑的方法

常用的等宽字体基本都不支持中文,唯二支持中文的,是老土的宋体和新宋。 太坑了。 网上有用微软雅黑和monaco等拼出新的字体的方法,但是,很不好。新拼出的字体,英文字符变得,很扁,非常扁,因此很难看。 这里就记录一种方法,让notepad、notepad++等同时使用等宽字体(如Monaco)和微软雅黑 首先,打开注册表,到该项目下: HKEY_LOCAL_MACHINE/Software/Microsoft/Windows NT/CurrentVersion/FontLink/SystemLink 在该项目...

0
12
发表了博客
2018/01/03 15:58

thinkjs+swagger Editor

一直很好奇专门写接口同事的工作,于是趁着手边工作中的闲暇时间,特地看看神奇的接口文档怎么摆弄。 总览: 这是基于thinkjs(3.0),使用swagger editor编写,实现功能性测试的接口文档。 先了解一些必要的知识吧: 1.)什么是Swagger? Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件;是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器...

0
0
发表了博客
2016/03/24 15:46

Editorial Board 、co-editor、ediitor、editor-in-chief的区别

昨天更新掘金APP-IOS之后发现一个比较严重的Bug,联系管理者报告了Bug,中途发现掘金的发布功能需要申请成为co-editor才行。 那么这里科普一下这几个名词: Editorial Board (编辑委员会委员编): 类似是稿审人的角色,但地位比稿审人高,一般具有一定的学术地位。有的期刊编辑会询问编委成员有关期刊发展的建议。 co-editor(合著作者): 一般解释为,除了第一作者和通信作者以外其它作者的统称。但有时会针对第二作者和第三作者而...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
9 评论
180 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部