JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<script src="https://no2js.azurewebsites.net/dme_monaco/js/dmutil.js"></script>
<script src="https://no2js.azurewebsites.net/adminlte231/plugins/toastr/toastr.min.js"></script>
<link rel="stylesheet" href="https://no2js.azurewebsites.net/adminlte231/plugins/toastr/toastr.min.css">
 <iframe src="https://no2js.azurewebsites.net/dme_monaco/main.html" frameBorder="0" style="width:100%;height:400px" id="codeMain"></iframe>

 <button type="button" id="btnBen">
        Ben Test
    </button>

    <button type="button" id="btnA">
        SetSourceCode
    </button>
    
    
    <button type="button" id="btnB">
        Formatted
    </button>

    <button type="button" id="btnC">
        GetCode
    </button>

    <button type="button" id="btnD">
        GetVersion
    </button>


    <button type="button" id="btnG">
        HideToolbar
    </button>

    <button type="button" id="btnE">
        SetAbout
    </button>

    <button type="button" id="btnF">
        ShowToolbar
    </button>



    <button type="button" id="btnH">
        SetLanguage - C#
    </button>

    <button type="button" id="btnI">
        ReadOnly - true
    </button>

    <button type="button" id="btnJ">
        ReadOnly - false
    </button>

CSS

button {
        margin-top: 20px;
        margin-right: 10px;
    }

JavaScript

function htmlencode(s) {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(s));
  return div.innerHTML;
}

$('#btnBen').click(async function(e) {
  e.preventDefault();
  // Splash1();

  let rlt
  try {
    rlt = await waitGetSourceCode()
  }
  catch (err) {
    toastr.error('x');
  }

  if (!rlt) {
    toastr.error('x');
  }
});


function waitGetSourceCode() {
  return new Promise((resolve, reject) => {
    try {
      DMEditor.GetSourceCode('codeMain', function(code) {

        res = true;
        toastr.info('GetSourceCode');

        resolve(res)
      });
    } catch (err) {
      reject(err)
    }
  })
}




$('#btnA').click(function() {
  DMEditor.SetSourceCode('codeMain', "<html>\r\n<head>\r\n<title>\r\nTest 許當麻\r\n</title>\r\n</head>\r\n</html>")

});

$('#btnB').click(function() {
  DMEditor.Formatted('codeMain');

});

$('#btnC').click(function() {
  DMEditor.GetSourceCode('codeMain', function(res) {

    toastr.info(htmlencode(JSON.stringify(res)))
  });

});

$('#btnD').click(function() {
  DMEditor.GetVersion('codeMain', function(res) {
    toastr.info("Version:" + res);
  });

});

$('#btnE').click(function() {
  DMEditor.SetAbout('codeMain', "Power By Donma <a href='https://blog.no2don.com' target='_blank'>detail...</a>");
});


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

  DMEditor.ShowToolbar('codeMain');
});

$('#btnG').click(function() {
  DMEditor.HideToolbar('codeMain');
});

$('#btnH').click(function() {
  DMEditor.SetLanguage('codeMain', 'csharp');
});

$('#btnI').click(function() {
  DMEditor.SetReadonly('codeMain', true);
});

$('#btnJ').click(function() {
  DMEditor.SetReadonly('codeMain', false);
});