Copia e incolla HTML in AIR

Adobe AIR 1.0 e versioni successive

L'ambiente HTML in Adobe AIR fornisce una serie personalizzata di eventi e comportamenti predefiniti per le operazioni di copia e incolla. Solo il codice in esecuzione nella sandbox dell'applicazione può accedere agli Appunti di sistema direttamente, mediante l'oggetto Clipboard.generalClipboard di AIR. Il codice JavaScript nella sandbox non dell'applicazione può accedere agli Appunti attraverso l'oggetto evento inviato in risposta a uno degli eventi di copia e incolla inviati da un elemento in un documento HTML.

Gli eventi di copia e incolla includono: copy (copia), cut (taglia) e paste (incolla). L'oggetto inviato per questi eventi fornisce accesso agli Appunti mediante la proprietà clipboardData .

Comportamento predefinito

Per impostazione predefinita, AIR copia gli elementi selezionati in risposta al comando copy, che è possibile generare mediante un tasto di scelta rapida o un menu contestuale. Nelle aree modificabili, AIR taglia il testo in risposta al comando cut o lo incolla al cursore o alla selezione in risposta al comando paste.

Per impedire il comportamento predefinito, il gestore di eventi può chiamare il metodo preventDefault() dell'oggetto evento inviato.

Utilizzo della proprietà clipboardData dell'oggetto evento

La proprietà clipboardData dell'oggetto evento inviato come risultato di uno degli eventi di copia e incolla consente di leggere e scrivere i dati degli Appunti.

Per scrivere negli Appunti quando si gestisce un evento di copia (copy) o taglio (cut), utilizzare il metodo setData() dell'oggetto clipboardData , trasmettendo i dati da copiare e il tipo MIME: 

function customCopy(event){ 
    event.clipboardData.setData("text/plain", "A copied string."); 
}

Per accedere ai dati incollati, è possibile utilizzare il metodo getData() dell'oggetto clipboardData , trasmettendo il tipo MIME del formato di dati. I formati disponibili sono segnalati dalla proprietà types . 

function customPaste(event){ 
    var pastedData = event.clipboardData("text/plain"); 
}

È possibile accedere al metodo getData() e alla proprietà types solo nell'oggetto evento inviato dall'evento paste .

Nell'esempio seguente viene illustrato come ignorare il comportamento predefinito di copia e incolla in una pagina HTML. Il gestore dell'evento copy mette in corsivo il testo copiato e lo copia negli Appunti come testo HTML. Il gestore dell'evento cut copia i dati selezionati negli Appunti e li rimuove dal documento. Il gestore dell'evento paste inserisce il contenuto degli Appunti come HTML e applica al testo inserito uno stile in grassetto. 

<html> 
<head> 
    <title>Copy and Paste</title>             
    <script language="javascript" type="text/javascript"> 
        function onCopy(event){ 
            var selection = window.getSelection(); 
            event.clipboardData.setData("text/html","<i>" + selection + "</i>"); 
            event.preventDefault(); 
        } 
 
        function onCut(event){ 
             var selection = window.getSelection(); 
             event.clipboardData.setData("text/html","<i>" + selection + "</i>"); 
             var range = selection.getRangeAt(0); 
             range.extractContents(); 
             
            event.preventDefault(); 
        } 
 
        function onPaste(event){ 
            var insertion = document.createElement("b"); 
            insertion.innerHTML = event.clipboardData.getData("text/html"); 
             var selection = window.getSelection(); 
             var range = selection.getRangeAt(0); 
             range.insertNode(insertion); 
            event.preventDefault(); 
        } 
    </script> 
</head> 
<body onCopy="onCopy(event)" 
     onPaste="onPaste(event)" 
     onCut="onCut(event)"> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium  
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore  
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur  
magni dolores eos qui ratione voluptatem sequi nesciunt.</p> 
</body> 
</html>