基于浏览器的代码编辑器 monaco-editor

MIT
跨平台
微软
2016-06-22
花仲马

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>
加载中

评论(7)

魔仙灵梦
魔仙灵梦
提醒一点,是“VSCode基于Monaco”,而不是“Monaco基于VSCode” 先有Monaco Editor,然后有Electron,然后才有VSCode
蓝月萧枫
蓝月萧枫
有没有atom的编辑器源码? #monaco-editor#
自风
自风
卧槽!要逆天!!!!帅的一脸!!!! #monaco-editor#
MGL_TECH
MGL_TECH
动不动就几百兆项目在浏览器里写? #monaco-editor#
烈冰
烈冰
微软出品?? #monaco-editor#
菜鸟吃菜
。。。 #monaco-editor#
Force武装卫队
Force武装卫队
编辑部翻译了三天 #monaco-editor#

Monaco Editor 0.15.6 发布,微软开源的代码编辑器

Monaco Editor 0.15.6 已发布,这是一个小版本, 修复了与上下文菜单相关的 issue #1199 。 可直接点击: https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.15.6.tgz 或通过 np...

11/26 07:35

Monaco Editor 0.14.2 发布,微软开源的代码编辑器

Monaco Editor 0.14.2 已发布,这是针对刚刚发布的 0.14 的修复版本。 0.14.2 更新日志: Reverts https://github.com/Microsoft/monaco-editor/pull/981 0.14.0 更新日志: New & Notewort...

08/12 07:15

Monaco Editor 0.5 发布,微软开源的代码编辑器

Monaco Editor 0.5 发布了,Monaco Editor 是微软开源的基于 VS Code 的代码编辑器。 主要更新如下: 重大更新 monaco.editor.createWebWorker now loads the AMD module and calls create ...

2016/06/25 07:51

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

Xcode iTerm2 添加Cobalt theme

最近在潜心研究Rails,对TextMate的cobalt theme非常喜欢,就想把这个主题安装到Xcode上面去,搜了一下,还真有和我一样喜欢的人,见下面链接。 http://audioplastic.org/blog/2013/01/09/co...

2014/07/15 09:49
70
0
ubuntu16.04安装monaco字体

monaco字体是苹果系统下的字体,非常的好看,是我最喜欢的字体没有之一。现在我们就来在ubuntu下安装这个漂亮的字体 第一步: 进入github下载这个字体,github地址是https://github.com/cstr...

2016/10/25 10:08
284
0
Linux上优秀编程字体:来自Macbook的大腕ttf-Monaco

首先上菜: ![Monaco效果图][1] 一个shell脚本就可以完成。[传送原文](https://gist.github.com/rogerleite/99819) 但是我还是贴出来,哪天被困局域网了。。。。 > cd /usr/share/fonts/true...

2013/06/24 18:39
3.7K
2
伍楼阁使用的WordPress代码高亮插件使用说明

插件名称:Simple Code Highlighter 推荐理由:这个代码高亮插件正如她的名字一样,使用起来十分简单,没有繁琐的设置,使用的时候只要直接将代码贴进去就可以了。 安装方法:后台安装插件中...

04/12 08:26
7
0
ubuntu安装mac,雅黑,Consolas字体

由于ubuntu上面的字体比较少,又不美观,所以想办法引入mac,window上面的字体

2016/08/16 10:34
1K
0
同时使用等宽字体(如Monaco)和微软雅黑的方法

在notepad++等里面使用等宽字体(如Monaco)和微软雅黑,使界面更加漂亮

2014/09/16 12:30
7K
1
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]: http...

2013/10/26 13:41
200
0
开源巨献:年度最佳 JavaScript 和 CSS 开源库推荐!

Tutorialzine 每个月都会公布一次当月新增的 JS 和 CSS 库。2018 新年之际,该网站整理出了 2017 年最受用户欢迎和喜爱的一些 JS 和 CSS 库,供大家学习和参考。 JavaScript 本地存储库 loca...

02/19 08:15
10.8K
17

没有更多内容

加载失败,请刷新页面

返回顶部
顶部