You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

423 lines
24 KiB

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>文本编辑器</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="author" content="godo">
<meta name="description" content="文本编辑器">
<meta id="theme_color" name="theme-color" content="#1e1e1e">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Text Editor">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<base href="./" target="_blank">
<link rel="manifest">
<link rel="icon" type="image/svg+xml" href="./resources/icon.svg">
<link rel="alternate icon" type="image/png" sizes="16x16" href="./resources/icon-16.png">
<link rel="alternate icon" type="image/png" sizes="32x32" href="./resources/icon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="./resources/app-apple-touch-180.png">
<link rel="apple-touch-icon" sizes="1024x1024" href="./resources/app-apple-touch-1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="./resources/startup-iphone5-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="./resources/startup-iphone5-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="./resources/startup-iphone6-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="./resources/startup-iphone6-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="./resources/startup-iphoneplus-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="./resources/startup-iphoneplus-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="./resources/startup-iphonex-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="./resources/startup-iphonex-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="./resources/startup-iphonexr-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="./resources/startup-iphonexr-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="./resources/startup-iphonexsmax-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="./resources/startup-iphonexsmax-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="./resources/startup-ipad-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="./resources/startup-ipad-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="./resources/startup-ipadpro1-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="./resources/startup-ipadpro1-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="./resources/startup-ipadpro3-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="./resources/startup-ipadpro3-portrait.png">
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="./resources/startup-ipadpro2-landscape.png">
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="./resources/startup-ipadpro2-portrait.png">
<link rel="stylesheet" href="./css/css2.css?family=Cousine&family=Rubik&display=swap">
<link rel="stylesheet" href="./css/vanilla-layout.css">
<link rel="stylesheet" href="./css/vanilla-appearance.css">
<link rel="stylesheet" href="./css/vanilla-highlighting.css">
<!-- <script src="/res/group/config.js"></script> -->
<!-- <script src="/libs/utils.js"></script> -->
<script src="./js/script.js"></script>
<script src="./js/script2.js"></script>
<script src="./js/prism.min.js" data-manual></script>
<script src="./js/prism-json.min.js"></script>
<script src="./js/init.js"></script>
<link rel="stylesheet" href="./css/index.css">
<style id="scrollbar_styles">
::-webkit-scrollbar {
width: var(--scrollbar-width);
height: var(--scrollbar-height);
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
background: none;
}
::-webkit-scrollbar-thumb {
width: 36px;
height: 36px;
background: #808080;
background-clip: content-box;
border: var(--scrollbar-border-width) solid transparent;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a0a0a0;
}
</style>
<link rel="stylesheet" href="./css/tab.css">
<style id="theme_styles"></style>
</head>
<body class="code horizontal" data-view="code" data-orientation="horizontal" ontouchstart>
<svg id="symbol_definitions">
<symbol id="arrow_icon" viewBox="0 0 512 512">
<path d="m112.66 0 286.68 256-286.68 256z"/>
</symbol>
<symbol id="check_icon" viewBox="0 0 512 512">
<path d="m63.346 191.15 192.72 192.72-63.402 63.402-192.72-192.72z"/>
<path d="m129.5 383.87 319.15-319.15 63.402 63.402-319.15 319.15z"/>
</symbol>
<symbol id="back_icon" viewBox="0 0 512 512">
<path d="m160.8 191.81 254.36 254.36-64 64-254.36-254.36z"/>
<path d="m96.833 255.86 254.36-254.36 64 64-254.36 254.36z"/>
</symbol>
<symbol id="minimize_icon" viewBox="0 0 512 512">
<path d="m30.33 211.17h451.34v89.669h-451.34z"/>
</symbol>
<symbol id="close_icon" viewBox="0 0 512 512">
<path d="m1.5795 65.78 64.201-64.201 190.22 190.22 190.22-190.22 64.201 64.201-190.22 190.22 190.22 190.22-64.201 64.201-190.22-190.22-190.22 190.22-64.201-64.201 190.22-190.22z"/>
</symbol>
<symbol id="rename_icon" viewBox="0 0 512 512">
<path d="m-0.0618 512.07v-128.63l128.63 128.63z"/>
<path d="m383.21 0.052969 128.72 128.72-88.63 88.63-128.72-128.72z"/>
<path d="m252.59 130.63 128.72 128.72-210.68 210.68-128.72-128.72z"/>
</symbol>
<symbol id="undo_icon" viewBox="0 0 512 512">
<path d="m133.64 437.65-133.64-133.64h267.28z"/>
<path d="m512 249c-0.72363-111.33-91.271-201.16-202.61-200.98-111.33 0.17137-201.61 90.272-201.99 201.61l52.695 0.18028c0.28168-82.334 67.039-148.97 149.37-149.09 82.334-0.12673 149.3 66.299 149.83 148.63z"/>
<path d="m107.4 246.77h52.472v57.48h-52.472z"/>
<path d="m459.53 246.77h52.472v190.87h-52.472z"/>
</symbol>
<symbol id="redo_icon" viewBox="0 0 512 512">
<path d="m378.36 437.65 133.64-133.64h-267.28z"/>
<path d="m0.0044544 249c0.72363-111.33 91.271-201.16 202.61-200.98 111.33 0.17137 201.61 90.272 201.99 201.61l-52.695 0.18028c-0.28168-82.334-67.039-148.97-149.37-149.09-82.334-0.12673-149.3 66.299-149.83 148.63z"/>
<path d="m404.6 246.77h-52.472v57.48h52.472z"/>
<path d="m52.473 246.77h-52.472v190.87h52.472z"/>
</symbol>
<symbol id="install_icon" viewBox="0 0 512 512">
<path d="m198.36 18v43.917h-154.81v308.88h424.9v-75.391h43.551v66.242c-0.029 13.167-4.952 25.852-13.813 35.592-8.86 9.739-21.025 15.837-34.13 17.108l-5.123 0.366h-65.876l23.788 26.351v52.7h-321.69v-52.7l23.788-26.351h-66.241c-13.19 0.054-25.922-4.84-35.679-13.717-9.7572-8.876-15.831-21.089-17.022-34.225v-296.07c-0.053852-13.19 4.8408-25.922 13.717-35.679 8.8764-9.7572 21.089-15.831 34.226-17.022h150.42zm174.94 0v186.65l64.046-66.241 38.427 39.525-128.09 132.85-128.09-132.85 38.427-39.891 64.046 66.607v-186.65h51.236z"/>
</symbol>
<symbol id="refresh_icon" viewBox="0 0 512 512">
<path d="m510.27 285.75c-13.893 118.73-108.1 212.04-226.96 224.79-118.86 12.751-230.71-58.451-269.47-171.53-38.761-113.08 5.8941-237.93 107.58-300.78 101.68-62.846 233.32-46.955 317.13 38.282l-37.067 36.446c-66.79-67.929-171.7-80.593-252.74-30.508-81.036 50.084-116.62 149.58-85.733 239.7 30.89 90.117 120.03 146.86 214.75 136.7 94.721-10.161 169.8-84.522 180.87-179.14z"/>
<path d="m512 189.01v-189.01l-188.98 189.01z"/>
</symbol>
<symbol id="github_icon" viewBox="0 0 512 512">
<path d="m255.95 6c-141.33 0-255.95 114.62-255.95 256.05 0 113.04 73.338 209.01 175.07 242.85 12.782 2.357 17.496-5.553 17.496-12.31 0-6.077-0.262-22.211-0.367-43.531-47.459 10.319-76.218-1.153-86.223-34.312-7.7532-19.748-17.235-32.216-28.445-37.454-15.506-10.582-14.877-15.768 1.7811-15.558 17.13 1.205 30.173 10.005 39.183 26.349 22.84 39.131 59.927 27.816 74.543 21.268 2.304-16.501 8.905-27.816 16.239-34.207-56.837-6.443-116.61-28.444-116.61-126.51 0-27.973 9.9529-50.812 26.349-68.727-2.619-6.444-11.419-32.478 2.515-67.733 14.3-4.557 37.768 4.191 70.404 26.245 20.377-5.658 42.326-8.487 64.065-8.591 21.739 0.104 43.636 2.933 64.118 8.591 32.583-22.054 55.998-30.802 70.299-26.245 13.986 35.255 5.186 61.289 2.567 67.733 16.396 17.915 26.297 40.754 26.297 68.727 0 98.325-59.875 119.96-116.87 126.3 9.167 7.91 17.392 23.52 17.392 47.407 0 34.259-0.315 61.865-0.315 70.247 0 6.81 4.61 14.824 17.601 12.31 101.62-33.945 174.91-129.81 174.91-242.85 0-141.44-114.67-256.05-256.05-256.05z"/>
</symbol>
</svg>
<header id="header">
<div class="app-region"></div>
<div class="app-icon">
<img src="./resources/icon.svg" alt="">
</div>
<div class="app-menubar">
<menu-drop id="file_menu">
<button>文件</button>
<ul>
<li onclick="createEditor({ auto_replace: false });" data-shortcuts='{ "default": "Ctrl+Shift+X", "macOS": "Shift+Cmd+X" }'>新建文件</li>
<li part="create-window-option" onclick="createWindow();" data-shortcuts='{ "default": "Ctrl+Shift+C", "macOS": "Shift+Cmd+C" }'>打开新窗口</li>
<li onclick="openFiles();" data-shortcuts='{ "default": "Ctrl+O", "macOS": "Cmd+O" }'>打开文件</li>
<li onclick="window.setTimeout(renameEditor,10);" data-shortcuts='{ "default": "Ctrl+Shift+R", "macOS": "Shift+Cmd+R" }'>重命名</li>
<li onclick="saveFile();" data-shortcuts='{ "default": "Ctrl+S", "macOS": "Cmd+S" }'>保存文件</li>
<li>另存为...
<ul>
<li onclick="saveFile('txt');" data-shortcuts='{ "default": ".txt" }'>Text</li>
<li onclick="saveFile('html');" data-shortcuts='{ "default": ".html" }'>HTML</li>
<li onclick="saveFile('css');" data-shortcuts='{ "default": ".css" }'>CSS</li>
<li onclick="saveFile('js');" data-shortcuts='{ "default": ".js" }'>JavaScript</li>
<li onclick="saveFile('json');" data-shortcuts='{ "default": ".json" }'>JSON</li>
<li onclick="saveFile('svg');" data-shortcuts='{ "default": ".svg" }'>SVG</li>
<li onclick="saveFile('xml');" data-shortcuts='{ "default": ".xml" }'>XML</li>
<li onclick="saveFile('md');" data-shortcuts='{ "default": ".md" }'>Markdown</li>
<!-- <li>更多...
<ul>
<li onclick="saveFile('webmanifest');" data-shortcuts='{ "default": ".webmanifest" }'>Web Manifest</li>
<li onclick="saveFile('md');" data-shortcuts='{ "default": ".md" }'>Markdown</li>
<li onclick="saveFile('mcmeta');" data-shortcuts='{ "default": ".mcmeta" }'>MCMETA</li>
<li onclick="saveFile('xml');" data-shortcuts='{ "default": ".xml" }'>XML</li>
</ul>
</li> -->
</ul>
</li>
</ul>
</menu-drop>
<menu-drop id="view_menu" data-select="no-appearance">
<button>查看</button>
<ul>
<li data-selected onclick="setView({ type: 'code' });" data-shortcuts='{ "default": "Ctrl+Shift+1", "macOS": "Ctrl+Cmd+1" }' data-value="code">代码</li>
<li onclick="setView({ type: 'split' });" data-shortcuts='{ "default": "Ctrl+Shift+2", "macOS": "Ctrl+Cmd+2" }' data-value="split">左右分屏</li>
<li onclick="setView({ type: 'preview' });" data-shortcuts='{ "default": "Ctrl+Shift+3", "macOS": "Ctrl+Cmd+3" }' data-value="preview">全屏</li>
<li><hr></li>
<li onclick="setOrientation();" data-shortcuts='{ "default": "Ctrl+Shift+4", "macOS": "Ctrl+Cmd+4" }' data-no-select>上下分屏</li>
<li onclick="createDisplay();" data-shortcuts='{ "default": "Ctrl+Shift+5", "macOS": "Ctrl+Cmd+5" }' data-no-select>弹窗</li>
</ul>
</menu-drop>
<menu-drop id="preview_menu" data-select="no-appearance">
<button>预览</button>
<ul>
<li onclick="refreshPreview({ force: true });" data-shortcuts='{ "default": "Ctrl+Shift+Enter", "macOS": "Ctrl+Cmd+Return" }' data-no-select>刷新</li>
<li onclick="preview_base_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+B", "macOS": "Ctrl+Cmd+B" }' data-no-select>基础地址</li>
<li><hr></li>
<li data-value="active-editor" data-selected onclick="setPreviewSource({ active_editor: true });">当前编辑页</li>
</ul>
</menu-drop>
<menu-drop id="tools_menu">
<button>工具</button>
<ul>
<li onclick="replace_text_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+F", "macOS": "Shift+Cmd+F" }'>查找替换</li>
<!--li onclick="color_picker_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+K", "macOS": "Shift+Cmd+K" }'>Color Picker</li-->
<li onclick="json_formatter_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+G", "macOS": "Shift+Cmd+G" }'>JSON格式化</li>
<li onclick="uri_encoder_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+Y", "macOS": "Shift+Cmd+Y" }'>URI加密</li>
<li onclick="uuid_generator_card.open();" data-shortcuts='{ "default": "Ctrl+Shift+O", "macOS": "Shift+Cmd+O" }'>UUID生成</li>
<li>插入代码块...
<ul>
<li onclick="Tools.insertTemplate({ type: 'html' });" data-shortcuts='{ "default": "Ctrl+Shift+H", "macOS": "Shift+Cmd+H" }'>HTML</li>
<li onclick="Tools.insertTemplate({ type: 'pack-manifest-bedrock' });">打包基座</li>
</ul>
</li>
</ul>
</menu-drop>
<menu-drop id="settings_menu" data-alternate>
<button onclick="settings_card.open();">设置</button>
<ul data-show-icons>
<li part="install-option" onclick="showInstallPrompt();"><img src="./resources/install.svg" alt="">安装</li>
<li onclick="theme_card.open();"><img src="./resources/template.svg" alt="">模版设置</li>
<li part="clear-site-caches-option" onclick="clearSiteCaches();"><img src="./resources/settings.svg" alt="">清除缓冲</li>
<li onclick="Editor.settings.reset({ confirm: true });"><img src="./resources/settings.svg" alt="">重置设置</li>
</ul>
</menu-drop>
</div>
<div class="app-omnibox">
<button id="install_option" class="option" title="安装" onclick="showInstallPrompt();"><svg><use href="#install_icon"/></svg></button>
<button class="option" title="刷新" onclick="refreshPreview({ force: true });"><svg><use href="#refresh_icon"/></svg></button>
<button class="option" title="保存到服务器" id="saveData"><svg><use href="#check_icon"/></svg></button>
</div>
</header>
<main id="main">
<div id="workspace" class="workspace">
<div id="workspace_tabs" class="workspace-tabs">
<button id="create_editor_button" class="create-editor-button" title="New Editor"><svg><use href="#close_icon"/></svg></button>
</div>
<div id="workspace_editors" class="workspace-editors"></div>
</div>
<div id="scaler" class="scaler"></div>
<iframe id="preview" class="preview" src="about:blank"></iframe>
<div id="card_backdrop" class="card-backdrop"></div>
<ste-card id="settings_card" class="card dialog" data-type="dialog">
<div class="header">
<span class="heading">设置</span>
</div>
<div class="main">
<div class="content">
<div class="item list start">
<div class="select">
<label>默认方向:</label>
<menu-drop id="default_orientation_setting" data-select>
<button>水平</button>
<ul>
<li data-value="horizontal" onclick="Editor.settings.set('default-orientation','horizontal');" data-selected>水平</li>
<li data-value="vertical" onclick="Editor.settings.set('default-orientation','vertical');">垂直</li>
</ul>
</menu-drop>
</div>
<div class="checkbox">
<input id="syntax_highlighting_setting" type="checkbox" oninput="setSyntaxHighlighting(this.checked);">
<label for="syntax_highlighting_setting"><svg class="check"><use href="#check_icon"/></svg>语法突出显示</label>
</div>
<div class="checkbox">
<input id="automatic_refresh_setting" type="checkbox" oninput="Editor.settings.set('automatic-refresh',this.checked);" checked>
<label for="automatic_refresh_setting"><svg class="check"><use href="#check_icon"/></svg>自动刷新预览</label>
</div>
</div>
</div>
<!--div class="options">
<button id="install_button" onclick="showInstallPrompt();"><svg><use href="#install_icon"/></svg>安装</button>
<button id="theme_button" onclick="theme_card.open();" data-card-previous="theme_card">其他模版<svg><use href="#arrow_icon"/></svg></button>
</div-->
<div class="options">
<button id="clear_site_caches_button" class="warning" onclick="clearSiteCaches();">清除缓存</button>
<button class="warning" onclick="Editor.settings.reset({ confirm: true });">重置设置</button>
</div>
</div>
</ste-card>
<ste-card id="theme_card" class="card dialog" data-type="dialog">
<div class="header" data-card-parent="settings_card">
<span class="heading">模版</span>
</div>
<div class="main">
<div class="content">
<div class="item list">
<span style="line-height: 1.6;">暂无</span>
</div>
<!--div class="item list expand">
<num-text id="theme_setting" placeholder="CSS to modify..."></num-text>
</div-->
</div>
<!--div class="options">
<button onclick="resetTheme();">Reset Theme</button>
</div-->
</div>
</ste-card>
<ste-card id="preview_base_card" class="card dialog" data-type="dialog">
<div class="header">
<span class="heading">基础地址</span>
</div>
<div class="main">
<div class="content">
<div class="item list expand">
<input id="preview_base_input" type="url">
</div>
</div>
<div class="options">
<button onclick="preview_base_input.reset();">重置</button>
</div>
</div>
</ste-card>
<ste-card id="reset_settings_card" class="card alert" data-type="alert">
<div class="header">
<img class="icon" src="./resources/settings.svg" alt="">
<span class="heading">重置设置</span>
</div>
<div class="main">
<div class="content">
<div class="item">设置已重置!</div>
</div>
</div>
</ste-card>
<ste-card id="cleared_cache_card" class="card alert" data-type="alert">
<div class="header">
<img class="icon" src="./resources/template.svg" alt="">
<span class="heading">清除缓存</span>
</div>
<div class="main">
<div class="content">
<div class="item">缓存清除成功!</div>
</div>
</div>
</ste-card>
<ste-card id="replace_text_card" class="card widget" data-type="widget">
<div class="header">
<span class="heading">替换文字</span>
</div>
<div class="main">
<div class="content">
<div class="item list expand">
<num-text id="replacer_find" placeholder="查找文字..."></num-text>
<num-text id="replacer_replace" placeholder="替换为..."></num-text>
</div>
</div>
<div class="options">
<button onclick="Tools.replaceText.replace();">替换</button>
<button onclick="Tools.replaceText.flip();">置换</button>
<button onclick="Tools.replaceText.clear();">清除</button>
</div>
</div>
</ste-card>
<ste-card id="color_picker_card" class="card widget" data-type="widget">
<div class="header">
<span class="heading">颜色选择器</span>
</div>
<div class="main">
<div class="content">
<div class="item list">
<div id="picker_preview"></div>
<input id="picker_input" type="text" value="#ee8800" maxlength="7" placeholder="#rrggbb">
</div>
<div class="item list">
<label for="red_channel"></label>
<input id="red_channel" type="range">
<label for="green_channel">绿</label>
<input id="green_channel" type="range">
<label for="blue_channel"></label>
<input id="blue_channel" type="range">
</div>
</div>
<div class="options">
<button onclick="copyPicker();">拷贝</button>
<button onclick="insertPicker();">插入</button>
<button onclick="deletePicker();">删除</button>
</div>
</div>
</ste-card>
<ste-card id="json_formatter_card" class="card widget" data-type="widget">
<div class="header">
<span class="heading">JSON格式化</span>
</div>
<div class="main">
<div class="content">
<div class="item expand">
<num-text id="formatter_input" class="expand" syntax-language="json" placeholder="JSON data to format..."></num-text>
</div>
</div>
<div class="options">
<button onclick="Tools.jsonFormatter.format();">格式化</button>
<button onclick="Tools.jsonFormatter.collapse();">折叠</button>
<button onclick="Tools.jsonFormatter.clear();">清除</button>
</div>
</div>
</ste-card>
<ste-card id="uri_encoder_card" class="card widget" data-type="widget">
<div class="header">
<span class="heading">URI加密</span>
</div>
<div class="main">
<div class="content">
<div class="item expand">
<num-text id="encoder_input" class="expand" placeholder="Text to encode..."></num-text>
</div>
</div>
<div class="options">
<button onclick="Tools.uriEncoder.encode();">加密</button>
<button onclick="Tools.uriEncoder.decode();">解密</button>
<button onclick="Tools.uriEncoder.clear();">清空</button>
</div>
<div class="options">
<div class="checkbox">
<input id="encoder_type" type="checkbox">
<label for="encoder_type"><svg class="check"><use href="#check_icon"/></svg>启用URI组件</label>
</div>
</div>
</div>
</ste-card>
<ste-card id="uuid_generator_card" class="card widget" data-type="widget">
<div class="header">
<span class="heading">UUID生成器</span>
</div>
<div class="main">
<div class="content">
<div class="item expand">
<input id="generator_output" type="text" placeholder="结果..." readonly>
</div>
</div>
<div class="options">
<button onclick="generator_output.value = Tools.uuidGenerator.generate();">生成</button>
</div>
</div>
</ste-card>
</main>
<script src="./js/base.js"></script>
</body>
</html>