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. 