Creare un editor di codice HTML con JavaScript

In questa guida imparerai a programmare un editor di codice HTML utilizzando una semplice funzione JavaScript, attraverso il quale il browser web elaborerà le righe di codice contenute in un area di testo, in vero linguaggio HTML con live preview.

Nel seguente articolo della nostra nota serie “Funzioni HTML&JS“, ti spiegheremo in che modo poter creare e programmare un editor di codice HTML base da integrare nelle tue pagine web.

La struttura dell’editor è molto semplice e consentirà di generare testo da stringhe HTML. Potrebbe presentare problemi con codici avanzati e script.

editor html e javascript - esempio
Esempio dell’editor HTML. Questi elementi sono privi di regole di stile CSS, da definire separatamente.

L’editor sarà realizzato in HTML e programmato con JavaScript, perciò non necessità l’ausilio di framework esterni. Inoltre potrà essere facilmente stilizzato con le regole di stile CSS, ma che non vedremo qui, lasciando questo aspetto alla tua libera fantasia.

Per creare questo editor non è importante avere conoscenze di JavaScript, in quanto, se non ti interessa imparare questo linguaggio di programmazione web, potrai semplicemente copiare e incollare i codici nella tua pagina web. Consiglio però di avere delle basi di HTML per poter integrare e comprendere al meglio il tutto.

Programmare un editor di HTML con JavaScript

Per creare un editor di codice base all’interno di una pagina web, avrai bisogno di definire l’area di testo (o textarea) nel quale andranno digitati i caratteri; questi poi verranno elaborati da uno script JS, che a sua volta restituirà i valori convertiti in formato testuale in una seconda area (o div).

I valori saranno convertiti in HTML istantaneamente, in live preview.

Per capire meglio, guarda su Codewith.it l’esempio interattivo dell’editor HTML.

Vediamo ora tutti i passaggi per realizzarlo.

HTML

Il codice HTML che compone l’editor è diviso in due elementi.

  • L’area di testo in cui andranno scritti i codici;
  • L’area di output, che restituirà i valori convertiti da HTML a testo.

Il codice è il seguente:

<textarea  id="text" onkeyup="html()"></textarea>
<div id="output" style="background-color:white;"></div> 

Esaminiamo il codice:

  • Il primo elemento è la textarea, con l’idtext“;
  • La textarea esegue una funzione JavaScript chiamata “html()“; questa verrà eseguita ogni volta in cui verrò digitato un tasto dalla tastiera (onkeyup);
  • Il secondo elemento è il div con id “output“, ad indicare i valori di output HTML;
  • Il div ha una sola regola di stile CSS, necessaria ai fini della corretta visualizzazione (sfondo bianco). Senza questa lo sfondo risulterebbe trasparente.

JavaScript

Passiamo ora allo script per far funzionare l’editor.

Fondamentalmente la riga utile per l’elaborazione del codice è una sola, ma faremo uso delle variabili per rendere più comprensibile lo script.

function html(){
  var text = document.getElementById('text');
  var output = document.getElementById('output');
  output.innerHTML = text.value;
}

Esaminando il codice:

  • La nostra funzione è chiamata “html()“;
  • Le variabili servono a prelevare i dati dalle rispettive aree ed elementi HTML precedentemente visti;
  • output preleva i dati da text e li converte in HTML.

Incolla il codice JavaScript nella parte bassa del documento HTML, o in un file esterno .js.

Codice completo

<textarea  id="text" onkeyup="html()"></textarea>
<div id="output" style="background-color:white;"></div> 
<script>
function html(){
  var text = document.getElementById('text');
  var output = document.getElementById('output');
  output.innerHTML = text.value;
}
</script>

Qui in basso il risultato da Codewith.it

Ti è piaciuto l’articolo? Lasciaci un commento e vedi altre guide simili.

Leggi anche: Creare un tasto mostra/nascondi password

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

CAPTCHA