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="btnGetCode">讀取程式碼</button>
  <button type="button" id="btnSetCode">放入程式碼</button>
 <button type="button" id="btnFormattedCode">整理程式碼</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

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('<html><body>Hello 當麻</body></html>');

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

   alert(editor.getValue());

 });
 


  
 //重新整理程式碼
 $('#btnFormattedCode').click(function(){
 
 editor.getAction('editor.action.formatDocument').run()

 
 });


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

	var code='<p>\r\n<code>當麻 Blog Test Set Code.</code></p>';
   editor.setValue(code);

 });