• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text in TextArea formatieren?

Extremefall

Mitglied
Hallo,
ich habe ein JavaScript, welches HTML Codes durch den Klick auf Buttons in ein TextArea einfügt. Leider wird der HTML Code nicht interpretiert, sondern nur ausgegeben. Somit gibt es auch keine Formatierung. Wisst ihr, wie es möglich ist, dass der HTML Code in einem TextArea interpretiert wird? Oder benutzt man eine andere Eingabeform?

MFG
 
HTML:
<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>
<form name="formular" action="">
<input type="button" style="background-color: #f5f5dc; background-image: url(../images/right.png);" 
onClick="insert('[right]', '[/right]')">
<textarea name="eingabe"></textarea>
</form>
 
Wenn Du wirklich einen WYSIWYG-Editor selbst entwerden willst, solltest Du dich erstmal mit dem dafür nötigen beschäftigen. Schau dir mal andere solche Editoren an, denn es gibt davon mehr als genug. An deren Quellcode kannst Du nachvollziehen wie so etwas aufgebaut wird.

Beispiel:
htmlArea.com WYSIWYG editor directory
 
Zurück
Oben