Suche WYSIWYG Editor

[Kalle_B]

Hallöle,

zum Verständnis eines WYSIWYG Editors in HTML suche ich ein ganz einfaches Beispiel.

Habe mir eines heruntergeladen von einer Kleinanzeigenseite, das ist aber überfrachtet mit Sonderfunktionen und funktioniert lokal (noch) nicht.

Möchte erstmal verstehen, wie ein markierter Text überhaupt erkannt wird und dann mit Klick auf den B-Button (bold) fett wird.

Mein aufgeblasenes Beispiel scheint mit Ajax zu arbeiten. Ist das notwendig? Nein, habe mal eben WLAN ausgeschaltet, und im Original geht es trotzdem.

Kennt jemand einen klitzekleinen WYSIWYG Editor?

Lieben Gruß, Kalle

[Matze]

Hallo,

zum Verständnis eines WYSIWYG Editors in HTML suche ich ein ganz einfaches Beispiel.
Möchte erstmal verstehen, wie ein markierter Text überhaupt erkannt wird und dann mit Klick auf den B-Button (bold) fett wird.

wie willst du beim zusammen klicken etwas lernen?

Zum einfügen von Text in eine Textarea hatte ich mal diese Funktion gefunden:

  
function InsertLink(aTag, eTag) {  
  var input = document.forms['form1'].elements['text'];  
  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);  
  }  
}  

Der Link dazu sähe dann z.B. so aus:
<a href="javascript:InsertLink(\'[b]\', \'[/b]\')"><b>Fett</b></a>

Dieses Beispiel fügt in der Textarea "text" in der Form "form1" Text an der Cursorposition ein.

Mit einem Editor kann ich leider nicht dienen, aber du kannst dir das Script oben ansehen und zu verstehen versuchen.

Grüße, Matze