在 Web 應用程序中使用 Monaco 編輯器

我們有一個 MVC Web 應用程序，其中 Powershell 用作腳本引擎。目前，文本區域元素用於腳本編輯，結果非常麻煩。當 Microsoft 發布Monaco Editor時，我們想知道是否可以將編輯器作為小元件嵌入到我們的應用程序中，以利用其語法檢查和智能感知功能。查看他們的文件後，找不到太多相關資訊。這是可能的還是微軟目前不支持在第三方應用程序中使用？

這是Monarc Editor在您的網站上包含的解決方法，它仍然需要來自 Microsoft 的文件才能工作，但是，如果我們在本地下載這些文件並將其修改baseUrl為指向正確的文件夾，它應該可以工作：

基本 HTML 程式碼

<section class="try">
   <div class="container">
   <h3>Editor</h3>
       <div class="editor row">
           <div class="span3">                 
               <p>Colorizers are implemented using <a href="monarch.html"
                   target="_blank">Monarch</a>.</p>
           </div>
           <div class="span9">
               <div class="row">
                   <div class="span4">
                       <label class="control-label">Language</label>
                       <select class="language-picker"></select>
                   </div>
                   <div class="span4">
                       <label class="control-label">Theme</label>
                       <select class="theme-picker">
                           <option>Visual Studio</option>
                           <option>Visual Studio Dark</option>
                           <option>High Contrast Dark</option>
                       </select>
                   </div>
               </div>
               <div class="editor-frame">
                   <div class="loading editor" style="display: none;">
                       <div class="progress progress-striped active">
                           <div class="bar"></div>
                       </div>
                   </div>
                   <div id="editor"></div>
               </div>
           </div>
       </div>   
  </div>
</section>

JavaScript 程式碼：

'use strict';
require.config({
   baseUrl: 'https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/'
});


var editor = null,
   diffEditor = null;

$(document).ready(function() {
   require(['vs/editor/editor.main'], function() {
       var MODES = (function() {
           var modesIds = monaco.languages.getLanguages().map(function(lang) {
               return lang.id;
           });
           modesIds.sort();

           return modesIds.map(function(modeId) {
               return {
                   modeId: modeId,
                   sampleURL: 'https://microsoft.github.io/monaco-editor/index/samples/sample.' + modeId + '.txt'
               };
           });
       })();

       for (var i = 0; i < MODES.length; i++) {
           var o = document.createElement('option');
           o.textContent = MODES[i].modeId;
           $(".language-picker").append(o);
       }
       $(".language-picker").change(function() {
           loadSample(MODES[this.selectedIndex]);
       });
       $('.language-picker').selectpicker({
           size: 10
       });
       loadSample(MODES[0]);

       $(".theme-picker").change(function() {
           changeTheme(this.selectedIndex);
       });
       $('.theme-picker').selectpicker({
           size: 3
       });

       loadDiffSample();

       $('#inline-diff-checkbox').change(function() {
           diffEditor.updateOptions({
               renderSideBySide: !$(this).is(':checked')
           });
       });
   });

   window.onresize = function() {
       if (editor) {
           editor.layout();
       }
       if (diffEditor) {
           diffEditor.layout();
       }
   };
});

function loadSample(mode) {
   $.ajax({
       type: 'GET',
       url: mode.sampleURL,
       dataType: 'text',
       beforeSend: function() {
           $('.loading.editor').show();
       },
       error: function() {
           if (editor) {
               if (editor.getModel()) {
                   editor.getModel().dispose();
               }
               editor.dispose();
               editor = null;
           }
           $('.loading.editor').fadeOut({
               duration: 200
           });
           $('#editor').empty();
           $('#editor').append('<p class="alert alert-error">Failed to load ' + mode.modeId + ' sample</p>');
       }
   }).done(function(data) {
       if (!editor) {
           $('#editor').empty();
           editor = monaco.editor.create(document.getElementById('editor'), {
               model: null,
           });
       }

       var oldModel = editor.getModel();
       var newModel = monaco.editor.createModel(data, mode.modeId);
       editor.setModel(newModel);
       if (oldModel) {
           oldModel.dispose();
       }
       $('.loading.editor').fadeOut({
           duration: 300
       });
   });
}

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>');
   };

   $('.loading.diff-editor').show();

   var lhsData = null,
       rhsData = null,
       jsMode = null;

   $.ajax({
       type: 'GET',
       url: 'https://microsoft.github.io/monaco-editor/index/samples/diff.lhs.txt',
       dataType: 'text',
       error: onError
   }).done(function(data) {
       lhsData = data;
       onProgress();
   });

   $.ajax({
       type: 'GET',
       url: 'https://microsoft.github.io/monaco-editor/index/samples/diff.rhs.txt',
       dataType: 'text',
       error: onError
   }).done(function(data) {
       rhsData = data;
       onProgress();
   });

   function onProgress() {
       if (lhsData && rhsData) {
           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
       });
   }
}

工作小提琴：https ://jsfiddle.net/robertrozas/r1b9hbhk/

引用自：https://stackoverflow.com/questions/38489158