Stellaris: Markierten Text in einem Formular abfangen

Beitrag lesen

Hallo,

folgende Situation:
Ich möchte eine Toolbar für den Firefox bauen, mit der man auf Knopfdruck markierten Text durch Textile-Markup ergänzt (aus "blahfasel" soll dann z.B. "h2. blahfasel" werden); die Toolbar an sich steht schon, jetzt geht es an die Funzionalität. Auf Knopfdruck soll der markierte Text innerhalb eines <textarea>-Elements abgefangen werden, damit ich den Wert weiter bearbeiten kann.

Was ich bisher gemacht habe:
Bei http://de.selfhtml.org nachgeschaut, ob ich auf markierten Text zugreifen kann, was per getSelection() für das Dokument an sich auch geht, allerdings bekomme ich das nicht innerhalb eines Formulars (das <textarea>-Element wieder) hin.

Mein Testquellcode:
Um grundlegend zu testen, ob ich den markierten Text zufassen bekomme, will ich es mir per alert() ausgeben lassen. Den Inhalt der <textarea> bekomme ich mit document.getElementById("CommentBox").value; zufassen, wenn ich aber getSelection() auf die Variable x anwenden will (document.getElementById("CommentBox").getSelection(); oder document.getElementById("CommentBox").value.getSelection();), bekomme ich von der Javascriptkonsole was a la "getSelection() is not a function" ins Gesicht .

Code:
<html>

<head>
<title>Textile Toolbar</title>

<script type="text/javascript">
<!-- Define function that catches the user-selected text -->
function getSelectedText() {

if (window.getSelection) {
      var x = document.getElementById("CommentBox").value;
      alert("h3. " + x);
      }
}
</script>

</head>

<body>

<h2 id="blah">Im Formular selektierten Text aufnehmen und dann ausgeben</h2>

<form id="eingabeformular">
   <fieldset>

<legend>Bitte Text in das Eingabefeld eingeben und dann den Button drücken.</legend>

<textarea id="CommentBox" cols="100" rows="10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</textarea><br /><br />

<input type="button" id="Text 1" value="Markierten Text ausgeben"
      onmousedown="getSelectedText()">
   </fieldset>

</form>

</body>

</html>

Gibt mir jemand bitte einen Hinweis, wo ich den (vermutlich grundlegenden) Fehler mache? Oder was eine bessere Hewrangehensweise ist? Ich sitze nun schon ein paar Stunden dran und bin vermutlich schon betriebsblind geworden.