Come creare il tuo editor HTML come quello di w3schools.com

Come appassionato, o semplicemente come curioso del linguaggio HTML, probabilmente ti sarai imbattuto nel famoso w3schools.com, il primo portale al mondo per la divulgazione di guide e informazioni sul web development.

Le numerose guide del sito hanno permesso a molti sviluppatori, me compreso, ad approfondire e migliorare le proprie conoscenze, grazie ad un approccio semplice e diretto, seppur in lingua inglese.

Se hai avuto modo di visitare w3schools.com, allora di certo avrai testato il loro editor HTML interno, che aiuta i visitatori a studiare e a capire il codice proposto nelle varie sezioni del sito.

Il famoso Tryit editor fornisce un anteprima esatta del codice immesso nell’area di testo, con il quale l’utente può interagire e modificare.

In questo articolo potrai scoprire come realizzare un editor HTML identico a quello descritto, completamente personalizzabile e in breve tempo.

Vuoi scoprire il miglior editor di codice online? Prova Codewith.it.

Creare un editor HTML come Tryit di w3schools.com

L’editor HTML descritto, è un semplice strumento di conversione di stringe HTML presenti all’interno di un area di testo (textarea) in un iframe HTML. Molto simile a quello che abbiamo visto in un precedente articolo (come creare un editor HTML con JavaScript), ma con delle differenze non trascurabili.

L’editor Tryit è composto da 2 elementi, l’area di testo, realizzata con Codemirror, che fornisce un interfaccia avanzata simile ai più comuni software per la programmazione; e un iframe auto generato dal codice, ovvero una vera e propria pagina web generata al momento della richiesta.

Codemirror è un meraviglioso strumento realizzato proprio a questo scopo, creare editor in-browser che consenta di visualizzare codice per vari tipi di linguaggi (non solo HTML). Usato in moltissime piattaforme e siti web, anche in WordPress, probabilmente ogni volta in cui hai visualizzato del codice sorgente in una pagina web del browser, questo era scritto all’interno di un editor Codemirror.

Dunque, quello che serve per creare il nostro editor HTML in stile w3schools è Codemirror (visita il sito ufficiale per maggiori informazioni).

Vediamo subito il codice:

<link rel=stylesheet href=https://codemirror.net/lib/codemirror.css>
<script src=https://codemirror.net/lib/codemirror.js>
</script>
<script src=https://codemirror.net/mode/xml/xml.js>
</script>
<script src=https://codemirror.net/mode/javascript/javascript.js>
</script>
<script src=https://codemirror.net/mode/css/css.js>
</script>
<h2>HTML5 preview
</h2>
<textarea id=code name=code>
  <!doctype html>
  <html>
    <head>
      <meta charset=utf-8>
      <title>HTML5 canvas demo
      </title>
      <style>p {
        font-family: monospace;
        }
      </style>
    </head>
    <body>
      <p>Lorem ipsum orci nulla maecenas ridiculus, trevai laoreet mon euismod casua aenean post els convallis id erat mi sapien filo leo vel commodo sit
      </p>
    </body>
  </html>
      </textarea>
    <iframe id=preview>
    </iframe>
    <style>
      .CodeMirror {
        float: left;
        width: 50%;
        border: 1px solid black;
      }
      iframe {
        width: 49%;
        float: left;
        height: 300px;
        border: 1px solid black;
        border-left: 0px;
      }
    </style>
    <script type="text/javascript">
      var delay;
      // Initialize CodeMirror editor with a nice html5 canvas demo.
      var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
        mode: 'text/html'
      }
                                          );
      editor.on("change", function() {
        clearTimeout(delay);
        delay = setTimeout(updatePreview, 300);
      }
               );
      function updatePreview() {
        var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
      }
      setTimeout(updatePreview, 300);
    </script>
 

Questo codice è fornito direttamente dal sito ufficiale di Codemirror. Il risultato il seguente:

Scrivendo nell’area di testo a sinistra, il contenuto dell’iframe (destra) verrà aggiornato automaticamente.

Con Codemirror puoi facilmente integrare funzioni differenti, per rendere il tuo editor ancora più bello e funzionale. Dunque, per realizzane uno personale, ti basterà copiare il codice e incollarlo nella tua pagina.

Potrebbe interessarti anche: Come clonare elementi con JavaScript

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


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA