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