|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Script</title> |
|
<style> |
|
.content { |
|
margin: 2em 4em 0 4em; |
|
height: 100%; |
|
} |
|
|
|
#editor { |
|
min-width: 50em; |
|
min-height: 40em; |
|
border: chocolate 1px solid; |
|
} |
|
|
|
.error { |
|
color: orangered; |
|
display: none; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="content"> |
|
<div id="editor"></div> |
|
<p>Result: <span id="result"></span></p> |
|
<p class="error"></p> |
|
<button id="eval">SUBMIT</button> |
|
</div> |
|
|
|
<script src="/static/jquery.3.7.1.js"></script> |
|
<script src="/static/ace/src/ace.js"></script> |
|
<script src="/static/ace/src/ext-language_tools.js"></script> |
|
<script> |
|
const editor = ace.edit('editor') |
|
|
|
function init() { |
|
editor.session.setMode('ace/mode/javascript') |
|
editor.setOptions({ |
|
enableBasicAutocompletion: true, |
|
enableSnippets: true, |
|
enableLiveAutocompletion: true, |
|
}) |
|
editor.setTheme('ace/theme/github') |
|
} |
|
|
|
function initExtLanguage() { |
|
$.get('/script/keywordList', function (data) { |
|
addExtKeyWord(data) |
|
}) |
|
} |
|
|
|
function addExtKeyWord(keyWorldList) { |
|
const languageTools = ace.require("ace/ext/language_tools"); |
|
languageTools.addCompleter({ |
|
getCompletions: function (editor, session, pos, prefix, callback) { |
|
callback(null, keyWorldList); |
|
} |
|
}); |
|
} |
|
|
|
function evalScript() { |
|
const script = editor.getValue() |
|
const error = $('.error') |
|
|
|
$.ajax('/script/eval', { |
|
type: 'POST', |
|
data: JSON.stringify({'script': script}), |
|
contentType: 'application/json;charset=utf-8', |
|
success: function (data) { |
|
$('#result').text(data) |
|
error.hide() |
|
}, |
|
error: function (data) { |
|
error.text(data.responseJSON.message) |
|
error.show() |
|
} |
|
}) |
|
} |
|
|
|
$(document).ready(function () { |
|
init() |
|
initExtLanguage() |
|
// |
|
$('#eval').click(function () { |
|
evalScript() |
|
}) |
|
}) |
|
</script> |
|
</body> |
|
</html> |