98 lines
3.3 KiB
HTML
98 lines
3.3 KiB
HTML
{extend name="common/plugin_layout" /}
|
|
{block name="title"}{$plugin.title} - {:config_get('title')}{/block}
|
|
{block name="head"}
|
|
<link rel="stylesheet" href="{$cdn_npm}[email protected]/lib/codemirror.css">
|
|
<link rel="stylesheet" href="{$cdn_npm}[email protected]/theme/mdn-like.css">
|
|
<script src="{$cdn_npm}[email protected]/lib/codemirror.js"></script>
|
|
<script src="{$cdn_npm}[email protected]/js/lib/beautifier.min.js"></script>
|
|
<script src="{$cdn_npm}[email protected]/dist/bundle.min.js"></script>
|
|
<script src="{$cdn_npm}[email protected]/mode/javascript/javascript.js"></script>
|
|
{/block}
|
|
{block name="main"}
|
|
<div class="container-xl">
|
|
<div class="card card-preview">
|
|
<div class="card-inner mt-3">
|
|
<div class="nya-title nk-ibx-action-item progress-rating">
|
|
<span class="nk-menu-text font-weight-bold">JavaScript 格式化/混淆/压缩</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">代码：</label>
|
|
<div class="form-control-wrap">
|
|
<textarea id="code" class="textarea textarea-bordered "></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-dim btn-outline-secondary card-link" onclick="format()">
|
|
格式化
|
|
</button>
|
|
<button class="btn btn-dim btn-outline-secondary card-link" onclick="compress()">
|
|
压缩
|
|
</button>
|
|
<button class="btn btn-dim btn-outline-secondary card-link" onclick="mix_up()">
|
|
混淆
|
|
</button>
|
|
<button class="btn btn-dim btn-outline-secondary card-link" onclick="reset()">
|
|
<em class="icon ni ni-reload"></em>
|
|
清空
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
{block name="script"}
|
|
<script>
|
|
var defaultvalue = `new Vue({
|
|
el: '#app',
|
|
data: {
|
|
set: {
|
|
input: window.location.href,
|
|
output: '',
|
|
},
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
},
|
|
})
|
|
`;
|
|
$("#code").html(defaultvalue);
|
|
var initcodemirror = CodeMirror.fromTextArea(document.getElementById("code"), { // 标识到textarea
|
|
value: defaultvalue, // 文本域默认显示的文本
|
|
mode: {name: "javascript", json: true}, // 模式
|
|
theme: "mdn-like", // CSS样式选择
|
|
indentUnit: 2, // 缩进单位，默认2
|
|
smartIndent: true, // 是否智能缩进
|
|
tabSize: 4, // Tab缩进，默认4
|
|
readOnly: false, // 是否只读，默认false
|
|
showCursorWhenSelecting: true,
|
|
lineNumbers: true, // 是否显示行号
|
|
lineWrapping: true,
|
|
matchBrackets: true,
|
|
});
|
|
function format() {
|
|
initcodemirror.setValue(beautifier.js(initcodemirror.getValue()));
|
|
}
|
|
function compress() {
|
|
Terser.minify(initcodemirror.getValue(), {
|
|
compress: true,
|
|
mangle: false,
|
|
}).then(res => {
|
|
initcodemirror.setValue(res.code);
|
|
})
|
|
}
|
|
function mix_up(){
|
|
Terser.minify(initcodemirror.getValue(), {
|
|
mangle: true,
|
|
compress: true,
|
|
}).then(res => {
|
|
initcodemirror.setValue(res.code);
|
|
})
|
|
}
|
|
function reset() {
|
|
$("#code").val('');
|
|
initcodemirror.setValue('');
|
|
}
|
|
</script>
|
|
{/block} |