JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/editor/editor.main.css" />


<script>
  var require = {
    paths: {
      vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs'
    }
  };

  window.MonacoEnvironment = {
    getWorkerUrl: () => proxy
  };


  let proxy = URL.createObjectURL(new Blob([`self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/' };
importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/base/worker/workerMain.js');`], {
    type: 'javscript'
  }));

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/editor/editor.main.nls.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/editor/editor.main.js"></script>


<div>

  <button type="button" id="btnCtrlS">加入 Ctrl+s 處理</button>
  <button type="button" id="btnSetFolding">設定摺疊程式碼 line 1-5</button>
  <button type="button" id="btnFolding">收和所有 Region</button>
  <button type="button" id="btnUnFolding">展開所有 Region</button>
   <button type="button" id="btnGetSelection">取得選取文字</button>
</div>
<div class="code" id="container" style="width:100%;height:700px">

</div>

CSS

#container {
	position: absolute;
	left: 0;
	top: 40px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

JavaScript 1.7

var editor = monaco.editor.create(document.getElementById('container'), {
   language: 'html',
   theme: 'vs-dark',
   tabCompletion: 'on',
   cursorSmoothCaretAnimation: true,
   formatOnPaste: true,
   mouseWheelZoom: true,
   autoClosingBrackets: "always",
   autoClosingOvertype: "always",
   autoClosingQuotes: "always",
   automaticLayout: "always"
 });


 editor.setValue('<!--我是註解1-->\r\n<!--我是註解1-->\r\n<!--我是註解2-->\r\n<!--我是註解3-->\r\n<!--我是註解4-->\r\n<html><body><div>Hello 當麻</div>\r\n<div>Hello 當麻2</div></body></html>');

 //取得程式碼
 $('#btnGetCode').click(function() {

   alert(editor.getValue());

 });
 


  
 //Ctrl+s event
 //
 
 $('#btnCtrlS').click(function(){

    var myBinding = editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function () {
        alert('您在 MonacoEditor 按下了 Ctrl+s');
    });
 });
 

//設定 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;
            }
        });

 });
 
 
// 收和所有設定的 Region
// Folding All REgion
$('#btnFolding').click(function(){
  editor.trigger('fold', 'editor.foldAll');
});


// 展開所有 Region
// UnFolding All REgion
$('#btnUnFolding').click(function(){
  editor.trigger('unfold', 'editor.unfoldAll');
});

// 取得選取文字
$('#btnGetSelection').click(function(){
 alert(editor.getModel().getValueInRange(window.editor.getSelection()));
});