[Javascript] Monaco Editor 設定摺疊程式碼，註冊鍵盤事件，取得選取文字
2021-10-22
上一篇文章 (Monaco Editor 一套很好用的編輯器套件快速入門上手)，我們介紹了關於 Monaco Editor ，今天介紹一些我比較常用到的操作
筆記一下，方便之後我直接複製貼上，主要有 註冊鍵盤事件，加上 region/comment 行號，摺疊/展開 region 的程式碼
1. 註冊鍵盤事件，最常使用的不外乎就是 Ctrl+s ，在一般瀏覽器下，直接出現 儲存檔案
但是在編輯器下，你們可會希望讓用戶直接坐一些存檔的動作，這對使用者體驗絕對是大大提升。
//Ctrl+s event // $('#btnCtrlS').click(function(){ var myBinding = editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function () { alert('您在 MonacoEditor 按下了 Ctrl+s'); }); }); //
2. 強制設定折疊程式碼，這我這 sample 中 Line 1-5 都是註解，我希望強制把他們設定為一個 region ，除了可以折合，這樣用程式自動把他們可以摺起來也很方便
//設定 1~5 行可以收合 //Set Foldign Code Line 1-5 $('#btnSetFolding').click(function(){ folds = []; folds.push({ start: 1, end: 5, kind: monaco.languages.FoldingRangeKind.Region }); monaco.languages.registerFoldingRangeProvider("html", { provideFoldingRanges: function (model, context, token) { return folds; } }); }); //
3. 展開/折合 設定得程式碼
// 收和所有設定的 Region // Folding All REgion $('#btnFolding').click(function(){ editor.trigger('fold', 'editor.foldAll'); }); // 展開所有 Region // UnFolding All REgion $('#btnUnFolding').click(function(){ editor.trigger('unfold', 'editor.unfoldAll'); }); //
4. 取得滑鼠選取的文字
// 取得選取文字 $('#btnGetSelection').click(function(){ alert(editor.getModel().getValueInRange(window.editor.getSelection())); }); //
所有程式碼+結果:
reference:
https://stackoverflow.com/questions/50148938/fold-unfold-on-click-of-button-in-monaco-editor
https://microsoft.github.io/monaco-editor/api/enums/monaco.keycode.html