首页 > > 网页制作 > css >

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

2018-06-24 00:52:30来源：未知阅读 ()

　　官网上给出：”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="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="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
 11 <script src="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 class="alert alert-error">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>