官网上给出：”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. 【探索】机器指令翻译成 JavaScript

    前言 前些时候研究脚本混淆时,打算先学一些「程序流程」相关的概念.为了不因太枯燥而放弃,决定想一个有趣的案例,可以边探索边学. 于是想了一个话题:尝试将机器指令 1:1 翻译 成 JavaScript ...

  2. "无法删除数据库，因为该数据库当前正在使用"问题解决

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 以前刚学数据库的时候比较苦恼这个问题,今天删除的时候又看见了,正好一起记录一下 ...

  3. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  4. jQuery之Deferred源码剖析

    一.前言 大约在夏季,我们谈过ES6的Promise(详见here),其实在ES6前jQuery早就有了Promise,也就是我们所知道的Deferred对象,宗旨当然也和ES6的Promise一样, ...

  5. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  6. 【开源】.Net 分布式服务中心

    分布式服务中心 开源地址: http://git.oschina.net/chejiangyi/Dyd.BaseService.ServiceCenter 当垂直应用越来越多,应用之间交互不可避免,将 ...

  7. Hawk 7. 常见问题

    本页面您可以通过关键字搜索来获取信息. 理性使用爬虫 爬虫是一种灰色的应用,虽然作为Hawk的设计者,但我依然不得不这么说. 各大网站都在收集和整理数据上花费了大量的精力,因此抓取的数据应当仅仅作为科 ...

  8. Python多线程爬虫爬取电影天堂资源

    最近花些时间学习了一下Python,并写了一个多线程的爬虫程序来获取电影天堂上资源的迅雷下载地址,代码已经上传到GitHub上了,需要的同学可以自行下载.刚开始学习python希望可以获得宝贵的意见. ...

  9. bzoj1584--DP

    题目大意:有N头奶牛,每头那牛都有一个标号Pi,1 <= Pi <= M <= N <= 40000.现在Farmer John要把这些奶牛分成若干段,定义每段的不河蟹度为:若 ...

  10. Html 制作相册

    本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...