微软开源代码编辑器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 ...

随机推荐

微信企业号获取AccessToken
目录 1. AccessToken介绍 2. 示例代码 1. AccessToken介绍 1.1 什么是AccessToken AccessToken即访问凭证,业务服务器每次主动调用企业号接口时需要 ...
代码的坏味道（20）——过度耦合的消息链(Message Chains)
坏味道--过度耦合的消息链(Message Chains) 特征消息链的形式类似于:obj.getA().getB().getC(). 问题原因如果你看到用户向一个对象请求另一个对象,然后再向后者 ...
自己写的数据交换工具——从Oracle到Elasticsearch
先说说需求的背景,由于业务数据都在Oracle数据库中,想要对它进行数据的分析会非常非常慢,用传统的数据仓库-->数据集市这种方式,集市层表会非常大,查询的时候如果再做一些group的操作,一个 ...
记一次.NET代码重构
好久没写代码了,终于好不容易接到了开发任务,一看时间还挺充足的,我就慢慢整吧,若是遇上赶进度,基本上直接是功能优先,完全不考虑设计.你可以认为我完全没有追求,当身后有鞭子使劲赶的时候,神马设计都是浮云 ...
信息安全－5：RSA算法详解(已编程实现)[原创]
转发注明出处:http://www.cnblogs.com/0zcl/p/6120389.html 背景介绍 1976年以前,所有的加密方法都是同一种模式: (1)甲方选择某一种加密规则,对信息进行加 ...
TypeScript
TypeScript: Angular 2 的秘密武器(译) 本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch? ...
WiFi QC 自动测试：ixChariot API初探
Chariot虽然给我们提供了友好的界面,但是必须使用命令行或者使用它的API才能实现自动测试.Chariot在安装的时候会让你选择命令行界面组件,在它的安装目录下面有一些工具, 暂时还不知道是干什 ...
(jms)ActiveMQ 安装配置.
前言 ActiveMQ他是Apache出品的一个JMS提供者,管理会话和队列,运行在JVM下,支持多种语言,如JAVA,C++,C#,应用协议: OpenWire,Stomp REST,WS Noti ...
一步步开发自己的博客 .NET版（5、Lucenne.Net 和必应站内搜索）
前言这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
APP开放源码第一弹《纳豆》
2016年7月2日,这是一个风轻云淡的日子,DeviceOne平台的用户Star将自己经过一段时间研发的产品通过官方的渠道开源出来,这不仅是对自己设计的高度自信.更是想体现一下自己对于DeviceOn ...

微软开源代码编辑器monaco-editor

微软开源代码编辑器monaco-editor的更多相关文章

随机推荐

热门专题