Wie benutzt man das Clipboard unter JavaScript?

Durch Kommentar von bandit, jetzt auch noch hier:

Gestern stieß ich auf ein kleines Problem:

Ich schreibe an einem WYSIWYG-Editor. Die Eingabe funktioniert rein über JavaScript. Aber: Wie kann ich eine Paste-Funktion einbauen?
JavaScript ist auf den Browser begrenzt. Das Clipboard (Strg + C; Strg + V) geht darüber hinaus und ist wegen Sicherheitsgründen für JavaScript gesperrt.
Aber wie greife ich jetzt darauf zu?

Nach kurzem Nachdenken fiel mir ein, dass Textfelder Strg + V unterstützen. Also entschied ich mich, dieses zu "missbrauchen"

Vorbereitung

Die Funktion des WYSIWYG-Editors benutzt folgende HTML-Struktur:

<div class="WYSIWYG_Area">
    <div id="WYSIWYG_test" class="WYSIWYG_Editor" onclick="WYSIWYG_Activate_Editor()">
    </div>
    <form>
        <textarea id="WYSIWYG_Paste_Area" class="WYSIWYG_Paste_Area" />
    </form>
</div>

Genauer möchte ich nicht darauf eingehen: Die Grundfunktion ist einfach: Bei einem Klick wird der DIV "aktiviert". Und alle Eingaben werden im Hintergrund berechnet und in den DIV geschrieben.

Die Funktion benötigt 3 Dateien:

<script type="text/javascript" src="js.php"></script>
    <script type="text/javascript" src="WYSIWYG.js"></script>
    <link type="text/css" rel="stylesheet" href="WYSIWYG.css" />

Die Browserweichen

Die einfachste ist js.php:

<?php


    header('Content-type:text/javascript');


    $IEVersion = false;
    if(eregi("(msie) ([0-9]{1,2}.[0-9]{1,3})",$_SERVER['HTTP_USER_AGENT'],$regs) )
    {
        $IEVersion = "MSIE $regs[2]";
        $IEVersion = substr($IEVersion,0,6);
    }
    $user_agent = strtoupper($_SERVER['HTTP_USER_AGENT']);
    if(strpos($user_agent,'MSIE')!==false)
        $browser = 'Internet Explorer';
    else if(strpos($user_agent,'SAFARI')!==false)
        $browser = 'Safari';
    else if(strpos($user_agent,'FIREFOX')!==false)
        $browser = 'Firefox';
    else if(strpos($user_agent,'OPERA')!==false)
        $browser = 'Opera';
    else if(strpos($user_agent,'LYNX')!==false)
        $browser = 'Lynx';
    else if(strpos($user_agent,'WEBTV')!==false)
        $browser = 'WebTV';
    else if(strpos($user_agent,'KONQUEROR')!==false)
        $browser = 'Konqueror';
    else if((strpos($user_agent,'NAV')!==false) || (strpos($user_agent,'X11')!==false) || (strpos($user_agent,'GOLD')!==false) || (strpos($user_agent,'MOZILLA')!==false) || (strpos($user_agent,'NETSCAPE')!==false))
        $browser = 'Netscape Navigator';
    else
        $browser = 'Anderer';


    echo "browser = '".$browser."';";


?>

Dieses PHP-Script liest einfach den Browser aus und gibt ihn an JS weiter.

Der Style

Der Style wird in WYSIWYG.css definiert:

div.WYSIWYG_Area
{
    position:relative;
    padding:0px;
    margin:0px;
}


div.WYSIWYG_Editor
{
    .....
    width:500px;
    height:400px;
    position:absolute;
    top:0px;
    left:0px;
    z-index:999;
}


...


div.WYSIWYG_Paste_Area
{
       position:absolute;
    top:2px;
    left:2px;
    width:1px;
    height:1px;
    z-index:5;
}

Diese Script versteckt die Textarea hinter dem DIV. Der DIV ist größer und liegt im z-index über der Textarea. Sie sind über "position:absolute;" hintereinander positioniert.

Die eigentliche Funktion

Im folgenden Script wird nun die eigentliche Funktion ausgeführt. Ich behandle jedoch nur die Paste-Funktion. Die Browserweichen würden den Rahmen hier sprengen. Die Funktion so funktioniert in Firefox.

Zuerst müssen die Texteingaben verarbeitet werden:

document.onkeypress = WYSIWYG_Enter_Key;

Jeder Testendruck runft nun WYSIWYG_Enter_Key() auf. Die Funktion sieht so aus:

function WYSIWYG_Enter_Key(e)
{
    if(!e)
        e = window.event;
    if(e.charCode != 0)
        var code = e.charCode;
    else
        var code = e.keyCode;
    if(e.ctrlKey)
    {
        if(WYSIWYG_Key_Array[ code ] && (code == 86 || code == 118))
        {
            document.getElementById("WYSIWYG__Paste_Area").focus();
            window.setTimeout('WYSIWYG_Get_Paste();', 50);
        }
    }
    return true;
}

Hier wird abgefragt, ob die Steuerungstaste (e.ctrlKey) und V abgefragt. Siend diese beiden Tasten gedrückt, wird das (versteckte) textfeld aktiviert und ein Timer von 50 ms gestartet. Nach dieser Zeit wird folgende Funktion aufgerufen:

function WYSIWYG_Get_Paste()
{
    WYSIWYG_appendText(document.getElementById("WYSIWYG_Paste_Area").value);
        document.getElementById("WYSIWYG_Paste_Area").value = "";
    document.getElementById("WYSIWYG_Paste_Area").blur();
}

Nach den 50 ms wird einfach der Inhalt dieses Textfeldes abgefragt und mittels WYSIWYG_appendText() (oder einer anderen Funktion ;)) verarbeitet.
Dann wird der Inhalt gelöscht und das Textfeld deaktiviert.

So, das war meine neueste kranke Programmier-Erfahrung.
Ich hoffe, sie wird irgendjemandem, der dies liest helfen.

ich hab mich grad ein bisschen erkundet.
es gibt nen handler für textfelder "onpaste" ("onbeforepaste").
Aber der ist nur unter IE verfügbar