官网上给出：”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的更多相关文章

  1. VSCode, 当今最流行的免费开源代码编辑器，微软出品，必属精品

    什么是VSCode? Visual Studio Code是一个轻量级但功能强大的源代码编辑器,可在您的桌面上运行,并且可用于Windows,macOS和Linux.它内置了对JavaScript,T ...

  2. 秒杀Sublime Text的微软开源代码编辑工具Visual Studio Code

    1. 下载链接: https://code.visualstudio.com/ 2. 秒开一个ASP.NET网站源码 3.编辑CSS颜色支持 4.Git支持 5.常用快捷键 Ctrl+Shift+P ...

  3. Asp.Net Core 使用Monaco Editor 实现代码编辑器

    在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著 ...

  4. NanUI for Winform 使用示例【第一集】——山寨个代码编辑器

    NanUI for Winform从昨天写博客发布到现在获得了和多朋友的关注,首先感谢大家的关注和支持!请看昨天本人的博文<NanUI for Winform发布,让Winform界面设计拥有无 ...

  5. Monaco Editor 使用入门

    以前项目是用ace编辑器的,但是总有些不敬人意的地方.前端事件看见的VS Code编辑器Monaco Editor准备更换下,下面介绍一些使用中遇到的一点问题.代码提示 1.项目引用 import * ...

  6. 微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器

    微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器 在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 预览 ...

  7. Vue cli2.0 项目中使用Monaco Editor编辑器

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  8. ACE 1.1.9 发布，开源云端代码编辑器

    点这里 ACE 1.1.9 发布,开源云端代码编辑器 oschina 发布于: 2015年04月06日 (1评) 分享到:    收藏 +25 4月18日 武汉 源创会开始报名,送华为开发板 ACE ...

  9. Github Atom开源文本代码编辑器- 由 Github 打造的下一代编程开发利器

    个人理解:Github 热度超凡的一个项目Atom,electron是整个atom的核心,对于electron可以理解成 electron ＝io.js + Chromium    通过 Electr ...

随机推荐

  1. ASP.NET Core MVC/WebAPi 模型绑定探索

    前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...

  2. Spring框架概述

    Spring是最流行的Java企业级应用开发框架,全球数以百万的开发者在使用Spring框架创建高性能.易测试.可重用的代码. Spring框架的核心特性可以应用于任何Java应用,但扩展的JavaE ...

  3. ubuntu如何安装nodejs最新版 本

    如何正确的安装nodejs? 我们可以先安装nvm, git clone https://github.com/creationix/nvm.git ~/.nvm 然后打开 ~/.bashrc ,   ...

  4. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  5. 登录（ajax提交数据和后台校验）

    1.前台ajax数据提交 <form id="login_form" action="" method="POST"> < ...

  6. Java列表

    Java列表踩过的坑 其中subList是RandomAccessSubList,不是序列化的列表,不可以加入tair. 加入tair测试代码 @Autowired private CacheMana ...

  7. js刷新页面方法大全

    如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, ...

  8. 浏览器的兼容模式下的button中文字垂直方向不居中显示

    <button style="cursor:pointer;vertical-align: middle;" >删除</button> 这时候垂直不居中. ...

  9. SAP CRM 树视图（TREE VIEW）

    树视图可以用于表示数据的层次. 例如:SAP CRM中的组织结构数据可以表示为树视图. 在SAP CRM Web UI的术语当中,没有像表视图(table view)或者表单视图(form view) ...

  10. Maven安装

    开发分布式的商场系统,用到了一些新的技术,做一个记录和分享 这里讲一下maven安装 首先什么是Maven Maven作为一个构建工具,不仅帮我们自动化构建,还能抽象构建过程,提供构建任务实现.他跨平 ...