微软开源代码编辑器monaco

　　官网上给出：”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/

下面给出一个入门教程：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 6 </head> 7 <body> 8  9 <div id="container" style="width:800px;height:600px;border:1px solid grey"></div>10 <div id="container2" style="width:800px;height:600px;border:1px solid grey"></div>11 <script src='/images/loading.gif' data-original="min/vs/loader.js"></script>12 <script>13   require.config({ paths: { 'vs': 'min/vs' }});14   require(['vs/editor/editor.main'], function() {15     var editor = monaco.editor.create(document.getElementById('container'), {16       value: [17         'function x() {',18         '\tconsole.log("Hello world!");',19         '}'20       ].join('\n'),21       language: 'javascript'22     });23 24     var editor2 = monaco.editor.create(document.getElementById('container2'), {25       value: [26         'function x() {',27         '\tconsole.log("Hello world!");',28         '}'29       ].join('\n'),30       language: 'csharp',31       theme:'vs-dark'32     });33 34     35   });36 37   function changeTheme(theme) {38     var newTheme = (theme === 1 ? 'vs-dark' : ( theme === 0 ? 'vs' : 'hc-black' ));39     if (editor) {40       editor.updateOptions({ 'theme' : newTheme });41     }42     if (diffEditor) {43       diffEditor.updateOptions({ 'theme': newTheme });44     }45   }46 </script>47 </body>48 </html>

对Javascript语言是有智能提示的，如上图所示。

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 6 </head> 7 <body> 8  9 <div id="diff-editor" style="width:800px;height:600px;border:1px solid grey"></div> 10   <script type="text/javascript" src='/images/loading.gif' data-original="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script> 11 <script src='/images/loading.gif' data-original="min/vs/loader.js"></script> 12 <script> 13  14 // $(document).ready(function() { 15 //   require.config({ paths: { 'vs': 'min/vs' }}); 16 //   require(['vs/editor/editor.main'], function() { 17      18  19 //     var editor = monaco.editor.create(document.getElementById('container'), { 20 //       value: [ 21 //         'function x() {', 22 //         '\tconsole.log("Hello world!");', 23 //         '}' 24 //       ].join('\n'), 25 //       language: 'csharp', 26 //       theme:'vs-dark' 27 //     }); 28  29      30 //   }); 31  32 //   window.onresize = function () { 33 //     if (editor) { 34 //       editor.layout(); 35 //     } 36 //     if (diffEditor) { 37 //       diffEditor.layout(); 38 //     } 39 //   }; 40 // }); 41 var preloaded = {}; 42  43  44 function xhr(url, cb) { 45   if (preloaded[url]) { 46     return cb(null, preloaded[url]); 47   } 48   $.ajax({ 49     type: 'GET', 50     url: url, 51     dataType: 'text', 52     error: function () { 53       cb(this, null); 54     } 55   }).done(function(data) { 56     cb(null, data); 57   }); 58 } 59 function loadDiffSample() { 60  61   var onError = function() { 62     // $('.loading.diff-editor').fadeOut({ duration: 200 }); 63     // $('#diff-editor').append('<p >Failed to load diff editor sample</p>'); 64   }; 65  66  67  68   var lhsData = null, rhsData = null, jsMode = null; 69  70   xhr('txt/diff.lhs.txt', function(err, data) { 71     if (err) { 72       return onError(); 73     } 74     lhsData = data; 75     onProgress(); 76   }) 77   xhr('txt/diff.rhs.txt', function(err, data) { 78     if (err) { 79       return onError(); 80     } 81     rhsData = data; 82     onProgress(); 83   }) 84  85   function onProgress() { 86     if (lhsData && rhsData) { 87       require.config({ paths: { 'vs': 'min/vs' }}); 88       require(['vs/editor/editor.main'], function() { 89         diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), { 90           enableSplitViewResizing: false 91         }); 92  93         var lhsModel = monaco.editor.createModel(lhsData, 'text/javascript'); 94         var rhsModel = monaco.editor.createModel(rhsData, 'text/javascript'); 95  96         diffEditor.setModel({ 97           original: lhsModel, 98           modified: rhsModel 99         });100       });101       //$('.loading.diff-editor').fadeOut({ duration: 300 });102     }103   }104 }105   function changeTheme(theme) {106     var newTheme = (theme === 1 ? 'vs-dark' : ( theme === 0 ? 'vs' : 'hc-black' ));107     if (editor) {108       editor.updateOptions({ 'theme' : newTheme });109     }110     if (diffEditor) {111       diffEditor.updateOptions({ 'theme': newTheme });112     }113   }114 115   loadDiffSample();116 </script>117 </body>118 </html>