Ben's Hobbyhoekje -- Eenvoudige code-editor

Eenvoudige code-editor

Op deze pagina onderzoek ik de mogelijkheid om een editor te bouwen voor HTML, CSS en JavaScript, die helemaal in de PC van de gebruiker draait. De bedoeling hiervan is dat je kleine stukjes code kunt schrijven en testen.
Inspiratie is ontstaan door de "Tryit"-editor van w3schools.com. Voor deze site heb ik het gedeeltelijk nagebouwd, waarbij alles in de PC (lees: de browser) van de gebruiker wordt geregeld. Er komt geen aparte server aan te pas.

Je ziet hier twee vensters: het eerste bevat de code die je invoert, in het tweede wordt het resultaat getoond, dat verschijnt door op "Run" te klikken of te tikken.

Er worden drie items besproken:
1. De (beperkte) mogelijkhen van de editor.
2. De werking van het script.
3. Toepassen in je eigen site.
De (beperkte) mogelijkhen van de editor
Je kunt alle HTML gebruiken die in de <html> kan voorkomen, met uitzondering van:
• <script>. De standaarden verbieden dat JavaScripts worden geïnjecteerd in geladen (dus gerede) webpagina's. Een script kan dus niet worden gemaakt of veranderd door de code waar het script in staat. Dat heeft te maken met veiligheid. Als je op deze manier JavaScripts wilt wijzigen heb je een server nodig: De aan te passen code moet naar de server worden gestuurd, die maakt er een nieuwe pagina van die vervolgens naar de gebuikers-PC wordt teruggestuurd.
• <head>. Tags die specifiek zijn voor de <head> werken niet (<meta>) of kunnen zijeffecten geven (<link>), waardoor de browser zelfs vast kan lopen.
Het gebruik van style-blokken (in een stylesheet of een <style>-tag kan ook zijeffecten hebben. Als je bijvoorbeeld de tekstkleur verandert, kan dat gevolgen hebben voor alle tekst in het document. Gebruik daarom alléén style="..."-attributen als je met de CSS bezig bent. In een later stadium van de ontwikkeling kun je die attributen dan verplaatsen naar <style>-tags, maar bedenk dat style="..."-attributen bij het renderen een hogere prioriteit hebben dan klassen in een style-blok.
De werking van het script
De code bestaat uit HTML en CSS voor de opmaak van het formulier en JavaScript om de ingevoerde code zichtbaar te maken als "webpagina".
HTML
De HTML van de editor bestaat uit een <form>-tag met de klasse formulier. Daarbinnen bevinden zich een <textarea> met id="sourceCode" en klasse invoer, een button met type="submit" en klasse DoeHetWerk en een div-tag met id="resultCode" en klasse resultaat.
De twee id's dienen voor de communicatie met JavaScript.
De klassen zijn er alleen voor de opmaak.
CSS
De CSS bevat alleen de noodzakelijke klassen voor de opmaak.
Bij alle klassen is de position:relative, dat is de defaultwaarde.
JavaScript
Het JavaScript bevat één enkele functie, runCode(). Deze function heeft geen parameters.
runCode() wordt gestart als:
• de pagina is geladen. Dit gaat via window.onload.
• er op de knop "Run" is geklikt.
In beide gevallen wordt de innerHTML van de div-tag met id="resultCode" verbangen door de inhoud van de <textarea> met id="sourceCode".
Als de <textarea> leeg is verschijnt de melding: (geen code!).
Toepassen in je eigen site
Download de .zip-file en pak hem uit. Zet de code in je document zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
Pas de lay-out van het voorbeeld aan naar je eigen smaak. Dit gaat via de HTML en de CSS. Denk hierbij aan de afmetingen van het invoer- en resultaatveld, kleuren, lettertype(s), enz.
Het JavaScript heeft geen aanpassing nodig.

Gebruik:

De code van het voorbeeld staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY> van het document dat de editor bevat.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<style>
.formulier {
text-align:center;
margin:0px auto;
width:90%;
border:2px solid navy;
}
.invoer {
margin-top:5px;
width:95%;
}
.DoeHetWerk {
width:150px;
color:navy;
font-size:120%;
font-weight:bold;
margin:5px 40px;
}
.tekst {
width:150px;
color:navy;
font-size:120%;
font-weight:bold;
.resultaat {
margin:0 auto 5px auto;
width:95%;
height:245px;
background-color:#fff;
border:1px solid navy;
}
</style>

<script>
let editCode;
function runCode() {
editCode = document.getElementById('sourceCode').value;
if (editCode.length == 0 ) editCode = "(geen code!)";
document.getElementById('resultCode').innerHTML = editCode;
}
window.onload = runCode;
</script>

(Zet dit in de <BODY> op de plaats waar de editor moet verschijnen).
De HTML die wordt verwerkt tot nieuwe "webpagina" (de inhoud van de <textarea>) staat vet gedrukt. Merk op dat dit verwarrend kan zijn.

<form class="formulier" action="javascript:runCode()">

<textarea id="sourceCode" class="invoer" rows="15" cols="120">
<!doctype html>
<html>
<body>

<h1 style="color:navy">Hallo wereld!</h1>
<p>Voorbeeld, met dank aan <a href="https://www.w3schools.com">w3schools.com</a>.</p>

</body>
</html>
</textarea><br> 
<span class="tekst">Broncode &uArr;</span>
<input type="submit"
value="<&lt   Run   >>" class="DoeHetWerk">
<span class="tekst">&dArr; Resultaat</span>

<div id="resultCode" class="resultaat">
 
</div> 
</form>

Downloaden:

Druk op de knop: File: voorb671.zip, 907 bytes.

Opmerking:

Het voorbeeld is beschikbaar als "losse" applicatie. Zie daar voor de listbox JavaScript Applicaties op het voorblad van deze site, kies Codegeneratoren, daarna Code editor voor HTML en CSS.