Inserire tags in una textarea nel punto in cui si trova il cursore

Tutti i pannelli di controllo che utilizzano un RTE (Rich Text Editor) per l'inserimento di un testo, dispongono di un sistema di inserimento di TAGS (grassetto, corsivo, etc...) e/o di Emoticons (faccine tristi, sorridenti, etc...) all'interno del testo che viene digitato.

La soluzione per l'inserimento via Javascript è semplice, è sufficiente richiamare (ad esempio mediante il click su un bottone) una funzioncina che accodi al contenuto della textarea il codice che si desidera inserire. Ad esempio:

function accoda() { document.nomeform.nometextarea.value += ":-)"; }

in questo modo il codice viene inserito sempre e comunque alla fine del testo.

Ma se volessimo inserire il tag nel punto in cui si trova il cursore? Meno semplice, ma fattibile: dobbiamo scrivere una funzione ad hoc!

Il codice HTML

Creiamo un form di esempio che contenga la textarea in cui ci interessa lavorare:

<form name="modulo">
<textarea name="messaggio" id="messaggio" rows="10" cols="100"></textarea>
</form>

Notiamo che abbiamo associato un nome sia al form che alla textarea, ma ai fini del nostro articolo, l'unico elemento che ci interessa davvero è l'ID della textarea che, come vedremo nel codice seguente, viene usato come parametro nel richiamo alla funzione Javascript che analizzeremo dopo.

Come appena anticipato, vediamo dunque il codice del menu di TAGS e/o Emoticons che andremo ad usare nel nostro RTE:

<a href="javascript:AddToTextarea('messaggio', ':-)')">:-)</a>
<a href="javascript:AddToTextarea('messaggio', ';-)')">;-)</a>
<a href="javascript:AddToTextarea('messaggio', ':-(')">:-(</a>

I due parametri che passiamo alla funzione, sono dunque l'ID della textarea ed il codice da inserire nel punto in cui lampeggia il cursore.

Il codice Javascript

Utilizziamo un po' di DOM (Document Object Model) per lavorare sulla maxi-stringa rappresentata dal contenuto della nostra textarea. Lo scopo del nostro script è dunque individuare la posizione cursore ed agire in quel punto, inserendo il codice che ci interessa (TAGS e/o Emoticons che sia).

Vediamo il codice Javascript completo:

function AddToTextarea(TextareaID, TextToAdd)
{
    var MyTextarea = document.getElementById(TextareaID);
    if (document.all)
    {
        MyTextarea.focus();
        var MyRange = document.selection.createRange();
        MyRange.colapse;
        MyRange.text = TextToAdd;
    }
    else if (MyTextarea.selectionEnd)
    {
        var MyLength = MyTextarea.textLength;
        var StartSelection = MyTextarea.selectionStart;
        var EndSelection = MyTextarea.selectionEnd;
        MyTextarea.value = MyTextarea.value.substring(0, StartSelection) + TextToAdd + MyTextarea.value.substring(EndSelection, MyLength);
    }
    else
    {
        MyTextarea.value += TextToAdd;
    }
}

Il suo funzionamento è più semplice di quel che può sembrare.

Innanzitutto recuperiamo e memorizziamo in una variabile la nostra textarea, sfruttando il suo ID. In secondo luogo, valutiamo se il browser corrente è Explorer (che ha un "DOM tutto suo") o altri browser e, a seconda del caso, lavoriamo in un modo o nell'altro per catturare il range corrente in cui fare quanto in oggetto a questo articolo.

Lo script è già pronto per un copia/incolla ed è adattabile a qualsiasi form, semplicemente richiamando la funzione passando l'ID della textarea (o volendo, anche casella di testo) in cui lavorare.