微软开源代码编辑器monaco-editor
官网上给出：”The Monaco Editor is the code editor that powers VS Code. A good page describing the code editor's features is here.
It is licensed under the MIT License and supports IE 9/10/11, Edge, Chrome, Firefox, Safari and Opera.“
Monaco Editor 展现还是非常牛的，直接上图：
https://microsoft.github.io/monaco-editor/
下面给出一个入门教程：
<!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" style="width:800px;height:600px;border:1px solid grey"></div>
<div id="container2" style="width:800px;height:600px;border:1px solid grey"></div>
<script src="min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': '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'
}); var editor2 = monaco.editor.create(document.getElementById('container2'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'csharp',
theme:'vs-dark'
}); }); function changeTheme(theme) {
var newTheme = (theme === 1 ? 'vs-dark' : ( theme === 0 ? 'vs' : 'hc-black' ));
if (editor) {
editor.updateOptions({ 'theme' : newTheme });
}
if (diffEditor) {
diffEditor.updateOptions({ 'theme': newTheme });
}
}
</script>
</body>
</html>
对Javascript语言是有智能提示的，如上图所示。
<!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="diff-editor" style="width:800px;height:600px;border:1px solid grey"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
<script src="min/vs/loader.js"></script>
<script> // $(document).ready(function() {
// require.config({ paths: { 'vs': '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: 'csharp',
// theme:'vs-dark'
// }); // }); // window.onresize = function () {
// if (editor) {
// editor.layout();
// }
// if (diffEditor) {
// diffEditor.layout();
// }
// };
// });
var preloaded = {}; function xhr(url, cb) {
if (preloaded[url]) {
return cb(null, preloaded[url]);
}
$.ajax({
type: 'GET',
url: url,
dataType: 'text',
error: function () {
cb(this, null);
}
}).done(function(data) {
cb(null, data);
});
}
function loadDiffSample() { var onError = function() {
// $('.loading.diff-editor').fadeOut({ duration: 200 });
// $('#diff-editor').append('<p class="alert alert-error">Failed to load diff editor sample</p>');
}; var lhsData = null, rhsData = null, jsMode = null; xhr('txt/diff.lhs.txt', function(err, data) {
if (err) {
return onError();
}
lhsData = data;
onProgress();
})
xhr('txt/diff.rhs.txt', function(err, data) {
if (err) {
return onError();
}
rhsData = data;
onProgress();
}) function onProgress() {
if (lhsData && rhsData) {
require.config({ paths: { 'vs': 'min/vs' }});
require(['vs/editor/editor.main'], function() {
diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
enableSplitViewResizing: false
}); var lhsModel = monaco.editor.createModel(lhsData, 'text/javascript');
var rhsModel = monaco.editor.createModel(rhsData, 'text/javascript'); diffEditor.setModel({
original: lhsModel,
modified: rhsModel
});
});
//$('.loading.diff-editor').fadeOut({ duration: 300 });
}
}
}
function changeTheme(theme) {
var newTheme = (theme === 1 ? 'vs-dark' : ( theme === 0 ? 'vs' : 'hc-black' ));
if (editor) {
editor.updateOptions({ 'theme' : newTheme });
}
if (diffEditor) {
diffEditor.updateOptions({ 'theme': newTheme });
}
} loadDiffSample();
</script>
</body>
</html>
微软开源代码编辑器monaco-editor的更多相关文章
- VSCode, 当今最流行的免费开源代码编辑器，微软出品，必属精品
什么是VSCode? Visual Studio Code是一个轻量级但功能强大的源代码编辑器,可在您的桌面上运行,并且可用于Windows,macOS和Linux.它内置了对JavaScript,T ...
- 秒杀Sublime Text的微软开源代码编辑工具Visual Studio Code
1. 下载链接: https://code.visualstudio.com/ 2. 秒开一个ASP.NET网站源码 3.编辑CSS颜色支持 4.Git支持 5.常用快捷键 Ctrl+Shift+P ...
- Asp.Net Core 使用Monaco Editor 实现代码编辑器
在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著 ...
- NanUI for Winform 使用示例【第一集】——山寨个代码编辑器
NanUI for Winform从昨天写博客发布到现在获得了和多朋友的关注,首先感谢大家的关注和支持!请看昨天本人的博文<NanUI for Winform发布,让Winform界面设计拥有无 ...
- Monaco Editor 使用入门
以前项目是用ace编辑器的,但是总有些不敬人意的地方.前端事件看见的VS Code编辑器Monaco Editor准备更换下,下面介绍一些使用中遇到的一点问题.代码提示 1.项目引用 import * ...
- 微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器
微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器 在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 预览 ...
- Vue cli2.0 项目中使用Monaco Editor编辑器
monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...
- ACE 1.1.9 发布，开源云端代码编辑器
点这里 ACE 1.1.9 发布,开源云端代码编辑器 oschina 发布于: 2015年04月06日 (1评) 分享到: 收藏 +25 4月18日 武汉 源创会开始报名,送华为开发板 ACE ...
- Github Atom开源文本代码编辑器- 由 Github 打造的下一代编程开发利器
个人理解:Github 热度超凡的一个项目Atom,electron是整个atom的核心,对于electron可以理解成 electron ＝io.js + Chromium 通过 Electr ...
随机推荐
- 在Sublime Text 3上安装代码格式化插件CodeFormatter
1.了解CodeFormatter插件 在Sublime Text 3中编写代码,为了能让我们的代码格式变得漂亮整洁,需要一个能自动格式代码的插件.这里发现CodeFormatter插件不错,它能支持 ...
- 浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
- 为IEnumerable<T>添加RemoveAll<IEnumerable<T>>扩展方法--高性能篇
最近写代码,遇到一个问题,微软基于List<T>自带的方法是public bool Remove(T item);,可是有时候我们可能会用到诸如RemoveAll<IEnumerab ...
- PHP中遍历XML之SimpleXML
简单来讲述一些XML吧,XML是可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言.XML是当今用于传输数据的两大工具之一,另外一个是json. 我们在PHP中使用XML也是用来传输数据, ...
- html5 与视频
1.视频支持格式. 有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm. Theora+Vorbis=.ogg (Theora:视频编码器,Vorbis:音频编码器) H.264+$$$ ...
- 将DataTable中的某列转换成数组或者List
string[] arrRate = dtRate.AsEnumerable().Select(d => d.Field<string>("arry")).ToA ...
- Winserver2012下mysql 5.7解压版(zip)配置安装
一.安装 下载mysqlzip版本mysql不需要运行可执行文件,解压即可,下载zip版本mysqlmsi版本mysql双击文件即可安装,相对简单,本文不介绍此版本安装 配置环境变量打开环境变量配置页 ...
- PADS Layout 颜色设置
一.板框.装配线.标注线配置: 二.个人爱好,我一般把Top pads设置成为浅绿色,Top Trace/vias/2D Line/Text/Cooper设置成为深绿色,Error设置成为黄色,而Bo ...
- 兼容Mono的下一代云环境Web开发框架ASP.NET vNext
微软在2014年5月12日的TechEd大会上宣布将会发布下一代ASP.NET框架ASP.NET vNext的预览.此次发布的ASP.NET框架与以前相比发生了根本性的变化,凸显了微软“云优先”(cl ...
- RavenDB官网文档翻译系列第一
本系列文章主要翻译自RavenDB官方文档,有些地方做了删减,有些内容整合在一起.欢迎有需要的朋友阅读.毕竟还是中文读起来更亲切吗.下面进入正题. 起航 获取RavenDB RavenDB可以通过Nu ...