SOURCE

// 初始顶部功能按钮
toolsApp.initAction([{
    title: "URL编码",
    icon: 'icon-play',
    click: () => {
        hideTutorial();
        $("#result").val(encodeURI(toolsApp.editor.getValue()));
        $("#res2").show();
        $("#result2").val(encodeURIComponent(toolsApp.editor.getValue()));
    },
}, {
    title: "URL解码",
    icon: 'icon-key',
    click: () => {
        hideTutorial();
        $("#res2").hide();
        $("#result").val(decodeURIComponent(toolsApp.editor.getValue()));
    }
}, {
    title: "内容交换",
    icon: 'icon-zhuanhuan',
    click: () => {
        hideTutorial();
        var src = toolsApp.editor.getValue();
        toolsApp.editor.setValue(jQuery("#result").val());
        $("#result").val(src);
    }
}, {
    title: "清空结果",
    icon: 'icon-trash',
    click: () => {
        hideTutorial();
        toolsApp.editor.setValue("");
        $('#result').value = '';
    }
}]);

function hideTutorial() {
  $(".tab")[1].click();
}

// 初始右边功能按钮
toolsApp.initTabs([{
    title: "解析结果", 
    panel:  "#mkResult" ,
}  ]);


//初始编辑器

monaco.editor.defineTheme("jsrunLight", LightTheme.toMonaco());
monaco.editor.setTheme("jsrunLight");

let options = {
    value: `请在这里输入内容,然后点击上方的按钮即可转换`,
    language: "text",
    lineNumbers: "on",
    roundedSelection: false,
    readOnly: false,
    minimap: {
        enabled: false
    }
}
toolsApp.editor = monaco.editor.create(document.getElementById("code"), options);

<script src="//cdns.jsrun.net/vs/editor.vs.js">

</script>
 
<div id="mkResult" class="tabPanel">
	<div style="padding-top: 10px;">
		<div class="tabTitle">
			<h3>encodeURI</h3>
			<span>不会对特殊符号编码</span>
      </div>
      <div class="textBox">
      <textarea id="result" name="RawJson" class="json_input" rows="10" style="width: 100%;"
      spellcheck="false" placeholder="解密后的字符串"></textarea>
      </div>
    </div>
    <div style="padding-top: 10px;" id="res2" style="display:none;">
      <div class="tabTitle">
        <h3 class="tabTitle">encodeURIComponent</h3>
        <span>会对特殊符号编码</span> 
      </div>
      <div class="textBox">
      <textarea id="result2" name="RawJson" class="json_input" rows="10" style="width: 100%;"
      spellcheck="false" placeholder="加密或解密后字符串"></textarea>
      </div>
    </div>
</div>

 .tabTitle h3 {
     float: left;
     background: #dce4ff;
     border-radius: 4px;
     border-top: 2px solid #827fdd;
     font-weight: bold;
     color: #827fdd;
     padding: 4px;
     font-size: 12px;
 }
 
 .tabTitle span {
     color: #827fdd;
     display: block;
     margin-left: 10px;
     float: left;
     font-size: 12px;
     height: 20px;
     line-height: 33px;
 }
 
 .textBox {
     margin-top: 5px;
     display: block;
     background: #dce4ff;
     padding: 5px;
     padding-bottom: 0px;
     border-radius: 4px;
 }
 
 .textBox textarea {
     width: calc(100% - 0px);
     border: none;
     background: #e7edff;
     border-radius: 4px;
 }
 
 #mkResult {
     padding: 10px;
     display: none;
 }