Come probabilmente saprai, tra i software più utilizzati al mondo troviamo numerosi editor di testo e programmi per la scrittura, basti pensare infatti a Microsoft Office, il pacchetto per l’ufficio numero uno da diversi decenni, con il suo programma di punta Word. Non ci sia molto da spiegare, Word è il programma per eccellenza dedicato alla scrittura di documenti di qualsiasi genere e tipologia.
La forza di MS Word sta nella sua semplicità di utilizzo, strumenti rapidi, intuitivi e sempre a portata di mano. Gli editor testuali si sono evoluti sempre in questo senso, oltre Word infatti possiamo trovarne altri molto validi, ma tutti con la stessa impronta.
Basandomi su di essi mi son chiesto: “Posso creare il mio editor di testo per il web, utilizzando solo del codice HTML, CSS e JavaScript?“. Detto fatto, in poco tempo sono riuscito a tirare fuori un valido “Text editor” online con poche righe di codice, con una struttura molto semplice ma facile da usare e integrare nelle pagine web.
Se sei interessato ad imparare a programmare un editor testuale con HTML e JavaScript sei nel posto giusto e di seguito ti mostrerò come.
Anteprima di ciò che imparerai in questo articolo:
Creare un editor testuale con HTML, CSS e JavaScript
In questa guida ti mostrerò come sviluppare un editor testuale utilizzando solo codice HTML e del puro codice JavaScript (senza l’utilizzo di Framework come JQuery), con regole di stile CSS per “abbellire” il tutto.
L’editor di testo che sto per mostrare sarà composto da due elementi:
- La toolbar in alto, ovvero la barra strumenti contenente i pulsanti per la modifica del testo;
- L’area di testo.
Entrambi i componenti sono contenuti in un div principale.
Nel complesso, questo editor permetterà di scrivere testo e modificarlo con i comuni strumenti quali grassetto, corsivo, sottolineato, allineamento, cambio del font family, dimensione del testo e stampa. Per fare un esempio più concreto: andrò a sviluppare un editor testuale simile al noto TinyMCE (con molte meno features per ovvi motivi).
Clicca qui per visualizzare il codice sorgente completo e aggiornato.
Il codice HTML
Nel codice HTML è contenuto tutto l’editor di testo con le relative funzioni e strumenti. Per semplificare l’esecuzione degli script, ho integrato funzioni “inline” con chiamata ad evento singolo, definite nei rispettivi pulsanti.
<!-- LINK A MATERIAL ICONS PER LE ICONE DEI PULSANTI -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<div id="cTextEditor">
<!-- BARRA STRUMENTI -->
<div class="cToolbar">
<div class="cSection">
<button class="material-icons" onclick="document.execCommand('bold',false,null)">
format_bold
</button>
<button class="material-icons" onclick="document.execCommand('italic',false,null);">
format_italic
</button>
<button class="material-icons" onclick="document.execCommand('underline',false,null)">
format_underline
</button>
</div>
<div class="cSection">
<button class=" material-icons" onclick="document.execCommand('justifyLeft',false,null)">
format_align_left
</button>
<button class=" material-icons" onclick="document.execCommand('justifyCenter',false,null);">
format_align_center
</button>
<button class=" material-icons" onclick="document.execCommand('justifyRight',false,null)">
format_align_right
</button>
</div>
<div class="cSection">
<button class=" material-icons" onclick="document.execCommand('indent',false,null)">
format_indent_increase
</button>
<button class=" material-icons" onclick="document.execCommand('outdent',false,null);">
format_indent_decrease
</button>
</div>
<div class="cSection">
<button class=" material-icons" onclick="document.execCommand('undo',false,null)">
undo
</button>
<button class=" material-icons" onclick="document.execCommand('redo',false,null);">
redo
</button>
</div>
<div class="cSection">
<!-- STILI DEL FONT -->
<select onchange="fontChange()" id="fontFamily" style="width:120px;">
<option>Arial</option>
<option>Arial Black</option>
<option>Arial Narrow</option>
<option>Helvetica</option>
<option>Lucida Sans</option>
<option>Century Gothic</option>
<option>Segoe UI</option>
<option>Calibri</option>
<option>Times New Roman</option>
<option>Bodoni MT</option>
<option>Bookman</option>
<option>Georgia</option>
<option>Monospace</option>
<option>Verdana</option>
<option>Forte</option>
<option>Consolas</option>
<option>Courier</option>
<option>Comic Sans</option>
<option>Impact</option>
<option>Papyrus</option>
</select>
<!-- Dimensioni testo prestabilite -->
<select onchange="fontSize()" id="fontSize" style="width:60px;">
<option>4</option>
<option>6</option>
<option>8</option>
<option>9</option>
<option>11</option>
<option selected>12</option>
<option>14</option>
<option>16</option>
<option>18</option>
<option>20</option>
<option>22</option>
<option>24</option>
<option>27</option>
<option>30</option>
<option>35</option>
<option>40</option>
</select>
</div>
<div class="cSection">
<button class=" material-icons" onclick="PrintDoc()">
print
</button>
</div>
</div>
<!-- AREA DI TESTO -->
<div id="cTextbox" contenteditable>
</div>
</div>
Ci sono alcuni che devo specificare in questo codice:
- Le modifiche al testo avvengono tramite
- Per la visualizzazione delle icone nei pulsanti della toolbar ho fatto uso del font “Material Icons” che consiglio fortemente per la qualità delle icone e la facilità di utilizzo.
- Nell’ultima sezione della barra strumenti sono presenti delle funzioni JavaScript che vedremo nei successivi paragrafi.
- Le varie sezioni della toolbar sono dichiarate tramite classe “
cSection“, ognuno contenente un gruppo di strumenti. - Per l’area di testo dedicata all’interazione da parte degli utenti, per la scrittura del contenuto, non faremo uso di una textarea comune ma di un div dedicato con attributo contenteditable, che ci permetterà di gestire di scrivere nel div stesso modificandone lo stile e i vari parametri testuali.
Come puoi notare inoltre, molte funzioni come il grassetto, il corsivo o l’allineamento del testo, vengono eseguiti tramite il metodo JavaScript execCommand(). Questo metodo consente di apportare modifiche al contenuto di un oggetto editabile, come input o, appunto, elementi con attributo “contenteditable“. Potrebbe non rivelarsi il miglior metodo in assoluto, ma sia adatta molto bene alle nostre esigenze.
Il codice JavaScript
Nel codice JavaScript integreremo le varie funzioni e codici aggiuntivi per la corretta esecuzione di alcuni strumenti come “Stampa” e la modifica delle dimensioni e stile del testo.
var content = document.getElementById("cTextbox");
var fontsFamily = document.getElementById("fontFamily");
var fontsSize = document.getElementById("fontSize");
//FUNZIONE PER LA STAMPA DEL DOCUMENTO FINALE
function PrintDoc()
{
var doc = window.open();
doc.document.write(content.innerHTML);
doc.document.close();
doc.print();
doc.close();
}
//FUNZIONI PER LA MODIFICA DEL TESTO
function fontChange(){
content.style.fontFamily = fontsFamily.value;
}
function fontSize(){
content.style.fontSize = fontsSize.value + "pt";
}
// SCRIPT PER L'ANTEPRIMA DELLO STILE DEL TESTO
for (i = 0; i < fontsFamily.length; i ++){
fontsFamily[i].style.fontFamily = fontsFamily[i].innerHTML
}
In questo specifico caso troviamo tre funzioni JavaScript:
PrintDoc()– Ottiene il contenuto dell’area testuale e crea un documento pronto per la stampa.fontChange()– Cambia lo stile del font (font-family) all’interno dell’area di testo.fontSize()– Modifica la dimensione del carattere.
Stili e layout CSS
Per abbellire il tutto e rendere pratica e funzionale la barra strumenti è fondamentale dichiarare delle regole di stile CSS. Le seguenti regole CSS possono essere integrati all’interno di fogli di stile separati o nello stesso documento HTML nel tag <style>.
#cTextEditor{
width:100%;
height:auto;
min-height:400px;
max-height:800px;
min-width:400px;
max-width:800px;
background:#E2E2E2;
border-radius:5px;
padding:5px;
position:relative;
}
.cToolbar{
position:relative;
top:0;
left:0;
width:100%;
background:#F3F3F3;
height:auto;
border-radius:5px;
margin-bottom:5px;
display:flex;
}
#cTextbox{
padding:5px;
color:#363636;
background:white;
border:none;
resize:vertical;
min-height:340px;
max-height:800px;
border-radius:5px;
width:calc(100% - 10px);
font-family:"Arial";
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
font: medium -moz-fixed;
font: -webkit-small-control;
overflow: auto;
margin-bottom:20px;
font-size:12pt;
}
#cTextBox:focus-visible{
outline:none !important;
}
.cSection{
height:calc(100% - 4px);
padding:2px;
margin-left:5px;
width:100%;
display:flex;
width: min-content;
}
.cSection button, .cSection select{
color:rgb(48,48,48);
width:100%;
height:100%;
min-width:26px;
margin-left:1px;
border-radius:5px;
border:1px solid #9F9F9F;
height:32px;
}
.cSection button{
max-width:40px;
}
#cTextEditor button:focus{
background:#878787
}Dopo aver “assemblato” le varie parti del codice, dovresti già poter utilizzare l’editor testuale. Nota bene però, questo è uno strumento molto basico e probabilmente necessità di miglioramenti, infatti aggiornerò il codice nel prossimo periodo. Questo significa che durante l’utilizzo potrebbero presentarsi problemi o irregolarità . Fai dei test prima di un’eventuale pubblicazione.
Per ottenere il codice sorgente completo e aggiornato con visualizzazione interattiva puoi visitare la pagina del progetto in codewith.it. Utilizza liberamente il codice mostrato in questo articolo per i tuoi progetti e siti web, gratuitamente, senza vincoli o limiti. Nel caso un riferimento al nostro sito è sempre gradito ma non obbligatorio 🙂 .
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
- Come Risolvere i Problemi di Connessione Bluetooth al PC
- Guida alla Cybersecurity: Come proteggerti da minacce informatiche
- Come Aggiungere un Dizionario su App Kindle
