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="btnAutoHint1">插入自動提示 1</button>
  <button type="button" id="btnAutoHint2">插入自動提示 2</button>
</div>
<div class="code" id="container" style="width:100%;height:700px;margin-top:50px">

</div>

CSS

body{
  
  background-color:#262626;
  
}
#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: 'javascript',
   theme: 'vs-dark',
   tabCompletion: 'on',
   cursorSmoothCaretAnimation: true,
   formatOnPaste: true,
   mouseWheelZoom: true,
   autoClosingBrackets: "always",
   autoClosingOvertype: "always",
   autoClosingQuotes: "always",
   automaticLayout: "always"
 });

//所有自動提示的pool
 var suggestPool = [];


//填寫進入編輯器
 function fillRange(range) {
   for (var i = 0; i < suggestPool.length; i++) {
     suggestPool[i].range = range
   }
   return suggestPool;
 }

//載入提示庫，想要無腦改，改這function 就好了
 function fillDefaultPool() {


   suggestPool.push({
     label: 'DonmaUtil.GetUserInfo',
     kind: monaco.languages.CompletionItemKind.Function,
     insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
     insertText: 'DonmaUtil.GetUserInfo("userId");',
     detail: '取得用戶資訊'
   }, {
     label: 'DonmaUtil.GetBankInfo',
     kind: monaco.languages.CompletionItemKind.Function,
     insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
     insertText: 'DonmaUtil.GetBankInfo("bankId","bankKeyword");',
     detail: '取得銀行資訊'
   });

 }


 $('#btnAutoHint1').click(function() {

   //載入預設的提示建議
   fillDefaultPool();

   //註冊至編輯器,javscript  這語言
   monaco.languages.registerCompletionItemProvider('javascript', {
     provideCompletionItems: function(model, position) {
       var textUntilPosition = model.getValueInRange({
         startLineNumber: position.lineNumber,
         startColumn: 1,
         endLineNumber: position.lineNumber,
         endColumn: position.column
       });
       console.log(textUntilPosition);
       var match = textUntilPosition.replace(/[\*\[\]@@\$\(\)]/g, "").replace(/(\s+|\.)/g, " ");
       if (!match) {
         return {
           suggestions: []
         };
       }

       console.warn(textUntilPosition);
       var word = model.getWordUntilPosition(position);
       var range = {
        ...