官网上给出：”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. 使用Python保存屏幕截图（不使用PIL）

    起因 在极客学院讲授<使用Python编写远程控制程序>的课程中,涉及到查看被控制电脑屏幕截图的功能. 如果使用PIL,这个需求只需要三行代码: from PIL import Image ...

  2. 谈一下关于CQRS架构如何实现高性能

    CQRS架构简介 前不久,看到博客园一位园友写了一篇文章,其中的观点是,要想高性能,需要尽量:避开网络开销(IO),避开海量数据,避开资源争夺.对于这3点,我觉得很有道理.所以也想谈一下,CQRS架构 ...

  3. Dapper扩展之~~~Dapper.Contrib

    平台之大势何人能挡? 带着你的Net飞奔吧!http://www.cnblogs.com/dunitian/p/4822808.html#skill 上一篇文章:Dapper逆天入门~强类型,动态类型 ...

  4. Python标准模块--Iterators和Generators

    1 模块简介 当你开始使用Python编程时,你或许已经使用了iterators(迭代器)和generators(生成器),你当时可能并没有意识到.在本篇博文中,我们将会学习迭代器和生成器是什么.当然 ...

  5. C#中如何创建PDF网格并插入图片

    这篇文章我将向大家演示如何以编程的方式在PDF文档中创建一个网格,并将图片插入特定的网格中. 网上有一些类似的解决方法,在这里我选择了一个免费版的PDF组件.安装控件后,创建新项目,添加安装目录下的d ...

  6. Entity Framework的启动速度优化

    最近开发的服务放到IIS上寄宿之后,遇到一些现象,比如刚部署之后,第一次启动很慢:程序放置一会儿,再次请求也会比较慢.比如第一个问题,可以解释为初次请求某一个服务的时候,需要把程序集加载到内存中可能比 ...

  7. iOS网络4——Reachability检测网络状态

    一.整体介绍 前面已经介绍了网络访问的NSURLSession.NSURLConnection,还有网页加载有关的webview,基本满足通常的网络相关的开发. 其实在网络开发中还有比较常用的就是网络 ...

  8. java 字节流与字符流的区别

    字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢?实际上字节流在操作时本身不会用到缓冲区(内存),是文件本身直接操作的,而字符流在操作时使用了缓冲区,通过缓冲区再操作 ...

  9. spring mvc 数据校验

    1.需要导入的jar包: slf4j-api-1.7.21.jar validation-api-1.0.0.GA.jar hibernate-validator-4.0.1.GA.jar 2.访问页 ...

  10. 如何让spring mvc web应用启动时就执行特定处理

    Asp.Net的应用中通过根目录下的Global.asax,在Application_Start方法中做一些初始化操作,比如:预先加载缓存项对网站热点数据进行预热,获取一些远程的配置信息等等. Spr ...