软件简介

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
回复
举报
我就是特意来找一个回复的,现在的技术文章真误人。。。
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/11/26 07:35

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

Monaco Editor 0.15.6 已发布,这是一个小版本, 修复了与上下文菜单相关的 issue #1199 。 可直接点击: https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.15.6.tgz 或通过 npm 下载最新版本: npm install monaco-editor@0.15.6 Monaco Editor 是一个基于浏览器的代码编辑器,也是 VSCode 所使用的代码编...

3
28
发表于大前端专区
2018/08/12 07:15

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 & Noteworthy Using tree-shaking to reduce the amount of shipped code. TypeScript and JavaScript coloring is now done with Monarch....

1
11
发表了资讯
2016/06/25 00:00

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

Monaco Editor 0.5 发布了,Monaco Editor 是微软开源的基于 VS Code 的代码编辑器。 主要更新如下: 重大更新 monaco.editor.createWebWorker now loads the AMD module and calls create and passes in as first argument a context of type monaco.worker.IWorkerContext and as second argument the initData. This...

8
29
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
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({...

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 --s...

0
0
发表了博客
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插件...

0
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的压缩包就可以。 第二步: 进入本地下载目录,解压刚刚下载的压缩包,进入解压后的文件夹...

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

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

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

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

thinkjs+swagger Editor

一直很好奇专门写接口同事的工作,于是趁着手边工作中的闲暇时间,特地看看神奇的接口文档怎么摆弄。 总览: 这是基于thinkjs(3.0),使用swagger editor编写,实现功能性测试的接口文档。 先了解一些必要的知识吧: 1.)什么是Swagger? Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件;是一个规范和完整...

0
0
发表了博客
04/19 14:59

vue(element)中使用monaco实现代码高亮

vue(element)中使用monaco实现代码高亮 使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各不同语言,而且支持关键字补全,还要有一个各不同版本间的代...

0
0
发表了博客
2018/04/08 14:16

9.Hierarchy Editor

Hierarchy Editor(层次编辑器) 用于定义3D图层的结构,向Ventuz渲染引擎发出“命令”,并指定命令的发生顺序。通常,每个层次节点都会导致对GPU的一个或多个调用,例如设置材质或渲染几何图形。 1、渲染顺序: 层次节点是水平树结构的一部分,从层根开始,在层次编辑器的左上角,符号为: Ventuz渲染引擎从层根开始,并...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
9 评论
178 收藏
分享
返回顶部
顶部