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

随机推荐

iframe用法
<iframe src="http://caiyanli.top/" height="500" width="500" frameb ...
Hyper-V3：虚拟机的配置
在Hyper-V成功新建一台虚拟机,在正式使用之前,必须配置VM使用的硬件资源,并授予用户访问VM的权限等,本文罗列出一些常见的配置,供读者参阅. 一,为虚拟机分配使用的内存在Hyper-V Man ...
Mysql事务探索及其在Django中的实践（一）
前言很早就有想开始写博客的想法,一方面是对自己近期所学知识的一些总结.沉淀,方便以后对过去的知识进行梳理.追溯,一方面也希望能通过博客来认识更多相同技术圈的朋友.所幸近期通过了博客园的申请,那么今天 ...
python黑魔法 -- 内置方法使用
很多pythonic的代码都会用到内置方法,根据自己的经验,罗列一下自己知道的内置方法. __getitem__ __setitem__ __delitem__ 这三个方法是字典类的内置方法,分别对应 ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（55）-Web打印
系列目录前言 1.本次主要弥补工作流,用户表单数据的打印 2.使用JQprint做为web打印插件 3.兼容:FireFox,Chrome,IE. 4.没有依赖也没有配置,使用简单代码下载:htt ...
pt-pmp
pt-pmp有两方面的作用:一是获取进程的堆栈信息,二是对这些堆栈信息进行汇总. 进程的堆栈信息是利用gdb获取的,所以在获取的过程中,会对mysql服务端的性能有一定的影响. 用官方的话说: Thi ...
编写自己的PHP MVC框架笔记
1.MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller). ...
JavaWeb——Listener
一.基本概念 JavaWeb里面的listener是通过观察者设计模式进行实现的.对于观察者模式,这里不做过多介绍,大概讲一下什么意思. 观察者模式又叫发布订阅模式或者监听器模式.在该模式中有两个角色 ...
[译]处理文本数据(scikit-learn 教程3)
原文网址:http://scikit-learn.org/stable/tutorial/text_analytics/working_with_text_data.html 翻译:Tacey Won ...
VS2015墙内创建ionic2 【利用nrm更换源，完美！】
STEP 1 设置cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 一句话建立cnpm STEP 2 安装nr ...

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

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

随机推荐

热门专题