rdelaage
/
CodePlayground
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add code editor

This commit is contained in:
Romain de Laage 2021-04-02 19:46:13 +02:00
parent d753ba20c9
commit 271a04fcd7
Signed by: rdelaage
GPG Key ID: 534845FADDF0C329
2 changed files with 45 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
codeflask.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

64
index.html
View File

@ -6,23 +6,26 @@
<head>
<title>Javascript Playground</title>
<meta charset="utf-8" />
<script src="codeflask.min.js"></script>
<style>
html, body {
height: 100%;
}
body {
background: #0A3D62;
font-family: sans-serif;
font-size: 21px;
}
#code {
background-color: #3C6382;
font-size: 15px;
#codeContainer {
display: block;
color: white;
border: none;
resize: none;
width: 80%;
margin: auto;
height: 500px;
}
#code {
position: relative;
height: 100%;
}
#runBtn {
background-color: #079992;
color: white;
@ -51,7 +54,7 @@ footer {
</style>
</head>
<body>
<textarea spellcheck="false" id="code"></textarea>
<div id="codeContainer"><div id="code"></div></div>
<input type="button" onclick="run('code')" value="Exécuter !" id="runBtn" />
<div id="console">
</div>
@ -59,27 +62,48 @@ footer {
Romain de Laage - CC0
</footer>
<script>
const flask = new CodeFlask('#code', {
language: 'js',
lineNumbers: true,
areaId: 'thing1',
ariaLabelledby: 'header1',
handleTabs: true/*,
defaultTheme: false*/
});
let codeElmt = document.getElementById("code")
let consoleElmt = document.getElementById("console")
function run(elmtID) {
console = newConsole
console.clear()
eval(codeElmt.value)
}
window.onerror = function(msg, src, lino, colno, error) {
errorElmt.innerHTML += "<div class=\"error\">" + msg + "</div>"
try {
eval(flask.getCode())
}
catch (e) {
console.error(e)
}
console = oldConsole
}
/* Penser à réimplémenter toute la console : https://developer.mozilla.org/fr/docs/Web/API/Console */
console.log = function (...msg) {
var outMsg = ""
outMsg += msg[0]
for (var i = 1; i < msg.length; i++) outMsg += " " + msg[i]
consoleElmt.innerHTML += "\<div class=\"message\">" + outMsg + "</div>"
}
console.clear = function () {
consoleElmt.innerHTML = ""
const oldConsole = console
const newConsole = {
log: function (...msg) {
var outMsg = ""
outMsg += msg[0]
for (var i = 1; i < msg.length; i++) outMsg += " " + msg[i]
consoleElmt.innerHTML += "\<div class=\"message\">" + outMsg + "</div>"
},
clear: function () {
consoleElmt.innerHTML = ""
},
error: function (...msg) {
var outMsg = ""
outMsg = msg[0]
for (var i = 1; i < msg.length; i++) outMsg += " " + msg[i]
consoleElmt.innerHTML += "<div class=\"error\">" + outMsg + "</div>"
}
}
</script>
</body>