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