Erstmal schöne Dank Heinrich (Heirnich ist wohl eher nicht zutreffend
), aber das hilft mir erst bei der Auswertung der Textarea.
Mit einem Script von Selfhtml habe ich jetzt schon mal ein bißchen was erreicht. Die Schaltflächen rechts funktionieren schon wie gewünscht, aber die Schriftgröße, das Auswahlfeld oben drüber, funktioniert nicht wie erwartet. Ich habe es auch schon mit <select name="size" onchange="insert('[font-size=\'size\']', '[/font]')"> versucht, aber irgentwie bekomme ich das nicht hin.
Hier mal der Code bisher
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Einfügen von Inhalten in eine Textarea</title>
<style type="text/css">
<!--
input {
border-style: outset;
border-width: 1px;
border-color: blue;
background-color: navy;
color: white;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 11pt;
width: 100px;
}
input.b {font-weight: bold;}
input.i {font-style: italic;}
input.u {text-decoration: underline;}
-->
</style>
<script type="text/javascript">
<!--
function insert(aTag, eTag) {
var input = document.forms['formular'].elements['eingabe'];
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* für die übrigen Browser */
else
{
/* Abfrage der Einfügeposition */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Einfügen des Formatierungscodes */
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}
//-->
</script>
</head>
<body>
<h1>Demo: Einfügen von Inhalten in eine Textarea</h1>
Positionieren Sie einfach den Cursor innerhalb der textarea oder markieren Sie Text darin.
Wählen Sie dann "Einfügen", um <code>[link]...[/link]</code> an dieser Stelle
einfügen zu lassen, sofern es der Browser ermöglicht.</p>
<form name="formular" action="">
<table width="80%" align="center" border="1">
<tr>
<td>
<select name="size">
<option onfocus="insert('[font-size=8]', '[/font]')">8</option>
<option onfocus="insert('[font-size=10]', '[/font]')">10</option>
<option selected="selected">12</option>
<option onfocus="insert('[font-size=14]', '[/font]')">14</option>
<option onfocus="insert('[font-size=16]', '[/font]')">16</option>
<option onfocus="insert('[font-size=18]', '[/font]')">18</option>
<option onfocus="insert('[font-size=20]', '[/font]')">20</option>
<option onfocus="insert('[font-size=22]', '[/font]')">22</option>
<option onfocus="insert('[font-size=24]', '[/font]')">24</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td width="50%">
<textarea name="eingabe" cols="30" rows="10">Ihre Nachricht</textarea>
</td>
<td width="50%">
<input type="button" value="Link" onClick="insert('[link]', '[/link]')">
<input type="button" value="Fett" class="b" onClick="insert('[b]', '[/b]')">
<input type="button" value="Kursiv" class="i" onClick="insert('[i]', '[/i]')">
<input type="button" value="Unterstrichen" class="u" onClick="insert('[u]', '[/u]')">
<input type="button" value="Zeilenende" onClick="insert('[br]', '')">
</td>
</tr>
</table>
</form>
</body>
</html>
Alles anzeigen