Eseguire comandi in Javascript con execCommand

Mattepuffo's logo
Eseguire comandi in Javascript con execCommand

Eseguire comandi in Javascript con execCommand

Programmazione, Javascript - AJAX

Non parliamo ovviamente di comandi di sistema, ma di comandi che è possibile dare in una pagina web quando è in modalità designMode.

Per fare questo, useremo la funzione execCommand!

Cosa importante, il contenitore su cui eseguire comandi deve essere editable; e per questo c'è l'apposito attributo HTML contenteditable.

Vediamo di costruire una pagina con qualche esempio:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>EXEC COMMAND</title>
    </head>
    <body>
        <button type="button" onclick="document.execCommand('copy');">COPIA</button>
        <br><br>
        <button type="button" onclick="document.execCommand('bold');">GRASSETTO</button>
        <br><br>
        <button type="button" onclick="document.execCommand('delete');">CANCELLA</button>
        <br><br>
        <button type="button" onclick="document.execCommand('justifyCenter');">CENTRA</button>
        <br><br>
         <button type="button" onclick="document.execCommand('undo');">CANCELLA OPERAZIONE</button>
        <br><br>
        <div contenteditable="true">
            CIAO COME STAI???
        </div>
    </body>
</html>

Provate a scrivere qualcosa dentro al div (come potete notare il suo contenuto è editabile).

E poi usate i pulsanti appositi!

Ovviamente ci sono altri comandi che è possibile dare; nel link sopracitato ci stanno tuttti.

Enjoy!

Condividi

Commentami!