[JavaScript] einfache Textformatierung für Textarea

[Tommie]

hallo,

das Forum hat hier ja auch so einen schönen Editor wo man seinen Post fett etc. schreiben kann. Ich blicke da nur nicht ganz durch
Ich bräuchte so einen Editor nur zum Text fett schreiben. Wie machen die das aber, dass man dann gleich den Text fett angezeigt bekommt?

danke

[Karsten Müller]

Guten Tag.

Zitat von Tommie

Wie machen die das aber, dass man dann gleich den Text fett angezeigt bekommt?

Ich versteh die Frage leider nicht so ganz. Meinst du mit angezeigt bekommen die Anzeige in der Vorschau?


Beste Grüße . . . Karsten

[Tommie]

Zitat von Karsten Müller

Guten Tag.
Ich versteh die Frage leider nicht so ganz. Meinst du mit angezeigt bekommen die Anzeige in der Vorschau?
Beste Grüße . . . Karsten

hi Karsten,
vielen Dank für deine Antwort!

nein, ich meine den WYSIWYG editor. Wahrscheinlich hast du den ausgeschaltet, aber schau mal dir ins Kontrollzentrum unter Einstellungen (ganz unten) und schalte den mal an (den ganz unten im Dropdown-Menu). Dann schreibe mal etwas fett. Daraufhin erscheint der fettgeschriebene Text sofort im Nachrichtenfeld, auch die Smilies werden direkt als Bilder angezeigt etc.

ciao

[Karsten Müller]

Guten Tag.

Kann es sein, dass du unter Windows mit dem IE arbeitest? Denn soweit mein bescheidenes Wissen reicht, funktioniert dieser Wysiwyg Editor nur unter dieser Voraussetzung. Und dann auch nicht mit einer Textarea, sondern eigentlich mit einem iFrame.

Bei mir funktioniert der Editor nicht wie von dir beschrieben. Ich arbeite aber auch mit Mac OS. Aber möglicherweise kannst du mir mal den erzeugten Code zukommen lassen.

BTW: wenn du zufällig mit Dreamweaver arbeiten solltest, es gibt dafür sogar eine Extension.

Mehr kann ich dir im Moment leider nicht sagen. Sorry.


Beste Grüße . . . Karsten

[webcreate]

Na wenn Du es doch schon hier im Forum siehst, schau doch mal in den Quelltext rein

Dann wirst Du schnell erkenne, das es via JS gemacht ist, da Du auf folgendes stossen würdest:

<script type="text/javascript" src="clientscript/vbulletin_editor.js"></script>
<script type="text/javascript" src="clientscript/vbulletin_wysiwyg.js"></script>
<script type="text/javascript" src="clientscript/vbulletin_moziwyg.js"></script>

Nun einfach noch im Browsercache nach den JS Dateien suchen und da sieht man dann auch wie es geht

PS: MAg es sein, das die Button für CODE, HTML und PHP im WYSIWYG-Editor ohne Funktion sind??
In meinem Moz regt sich da nix beim klick

[Tommie]

ok, Zeit für einen Screenshot!

Ja, und es ist richtig, ich nehme den IE Explorer unter Windows. Man muss aber diesen WYSIWYG Editor erst im Boardprofil anstellen. Wenn man das nicht macht, kommt entweder nur das ganz normale Textfeld oder aber nur ein Simpler Editor. Du kannst ja mal bei dir schauen.

@ webcreate

ich weiss ja, dass die das mit JavaScript machen - und ich habe auch eine vbulletin Lizenz, d.h. ich weiss wo die Dateien sind (bzw. kann man sie ja auch öffentlich runterladen, da es JS ist), aber ich blicke in JS nicht durch. Und ich will wirklich nur, dass man Text fett schreiben kann und das auch gleich angezeigt bekommt (wie dieser Screenshot verdeutlicht).

Bei den normalen Editors bekommt man immer nur so etwas zu sehen [fett]So, jetzt der fette Text[/fett].

Edit: ich habe gerade mit Mozilla geschaut - und da funktioniert der WYSISWYG Editor genauso wie beim IE...aber du hast recht, der Code button geht im Mozilla nicht. Aber selbst im IE werden nur die Klammen ringsrum erstellt - also nicht so schön wie beim fett schreiben

Edit2: beim Opera kommt nur ein vereinfachter Editor, also nicht so schön wie beim Mozilla und IE. Wenn ich da auf den Fett Knopf Drücke sehe ich nicht sofort das Resultat, sondern die Klammern, alla [fett]Text[/fett].

Trotzdem sollte es doch für jemanden der sich mit JS etwas auskennt kein Problem sein rauszubekommen wie das Teil funktioniert

[Karsten Müller]

Guten Tag.

Da ich mir die Seite mit dem "schönen" Editor nicht ansehen kann, würde ich gern eins wissen. Wird der Text auf der Seite in ein textarea oder in ein - was ich eher annehme - iframe getippt?


Beste Grüße . . . Karsten

[Tommie]

es sit wie gesagt JavaScript und KEIN Iframe. Schau dir doch mal den Screenshot an, den ich in meinem letzten post gepostet habe - da sieht du den Editor + Nachricht

[Karsten Müller]

Guten Tag.

Meine Frage war, iFrame oder Textarea und nicht iFrame oder Javascript.

Ich hab mich seit längerem nicht mehr mit dem Thema beschäftigt, aber es sollte sich nicht allzuviel geändert haben. Außer der (von mir nicht getesteten) Tatsache, dass statt iFrames auch Divs beim MSIE für die Lösung deines verwendet werden können. Mit den Herkömmlichen Textareas funktioniert das nicht.

Das Javascript verwendet wird ist mir schon klar.

Was dich sicherlich noch interessiert sind die sogenannten execCommand(), die von Microsoft ins "Leben gerufen" und teilweise von anderen Browserherstellern übernommen wurden. Wenn ich mich nicht irre.

Wenn es mich packt, schicke ich dir mal eine kleine Demo.


Beste Grüße . . . Karsten

[Tommie]

hast du dir den Screenshot angesehen? Ich habe gerade im Quellcode geschaut und da ist nichts vom iframe zu finden...also demnach doch per Textarea

[Tömsken]

Einen "echten" WYSIWYG-Editor kann man mit einer Textarea oder einem iFrame nicht erstellen. Dazu bedarf es eines Controls, das es nur unter Windows ab IE 5.5 gibt (steckt MSHTML.DLL - wenn ich mich nicht irre .
Es ist aber ein gängiges Verfahren, die Ausgaben dieses Editors (reines HTML) in eine Textarea zu schreiben, damit die Formulardaten leicht ausgelesen werden können.

Hier - für Selberbastler - ein Link zu einem solchen Editor:
http://www.solmetra.com/en/disp.php/.../en_spaw_about

[Tommie]

hmm, dieser Editor hier im Forum funzt aber genauso mit dem Mozilla..nur der Opera packt es nicht ganz so schön. Ausserdem wollte ich ja nicht den Editor nachbasteln (ich habe ja selber eine vb-Lizenz), sondern diesen nur abspecken. Ich möchte nicht, dass meine User riesige Überschriften in pink posten etc. ..daher hatte ich nach einem Editor gefragt, mit dem man nur Text fett schreiben kann, so dass aber der fette Text gleich fett in der Textarea angezeigt wird (wie bei dem Boardeditor)...das war alles

Ich kenn mich nur eben nicht so in JavaScript aus und blicke bei dem Board Editor null durch

[seb]

Einen "echten" WYSIWYG-Editor kann man mit einer Textarea oder einem iFrame nicht erstellen. Dazu bedarf es eines Controls, das es nur unter Windows ab IE 5.5 gibt (steckt MSHTML.DLL - wenn ich mich nicht irre .

Stimmt nicht ganz, nämlich:

1.
Die Gecko-Engine bietet soetwas seit Mozilla 1.4 auch, und auch im Firefox bzw. ehemals Firebird ist das Modul seit einiger Zeit verfügbar.

Das Teil nennt sich MIDAS und ist sogar um einiges besser als die WYSIWYG-Implementierung vom Internet Explorer. Es produziert valides HTML und formatiert Text mit Inline-CSS (d.h. style-Attribut). Der IE-Editor hingegen generiert einen Matsch aus veralteten Elementen (FONT etc.) und nicht in Anführungsstriche gesetzten Attributen, den heute kein anderer WYSYWYG-HTML-Editor (oder "Handprogrammierer") mehr schreiben würde.

2. Die IE-Implementierung funktioniert sowohl in einem Iframe (bzw. besser gesagt einem kompletten HTML-Dokument allgemein, dass man es in einen Iframe steckt ist nur zweckmäßig) als auch in einzelnen, ausgewählten Elementen (z.b. DIVs). D.h. für die IE-Version braucht man nicht zwingend einen Iframe.

Die Mozilla-Implementierung hingegen kann nur für das komplette Dokument aktiviert werden, d.h. dafür muss ein Frame oder Iframe verwendet werden, wenn man nicht das gesamte Browserfenster als Editierfeld verwenden möchte.

Die Javascript-APIs der beiden Implementierungen sind netterweise übrigens weitgehend identisch, d.h. man kann ohne große Umstände einen Editor schreiben, der in beiden Browsern funktioniert.

[Karsten Müller]

Guten Tag.

Und um das Ganze mal vom Prinzip her zu verdeutlichen hier mal eine schnell auf dem Mac zusammengeschobene Variante mit iFrame und auch nur mit der Option Fettschrift. Ist nicht wirklich das Nonplusultra (oder wie das heisst), sollte aber das Funktionsprinzip verdeutlichen und zumidest beim MSIE unter Win funktionieren. Konnte es leider nicht testen. Geht ja auch nur um das Prinzip.

<html>
<head>
<script language="javascript">
<!--
function textFormatieren(what) {
  document.frames[0].document.execCommand(what, arguments[1]);
}

function textSpeichern(){
  document.meinFormular.speicherFeld.value = document.frames[0].document.body.innerHTML;
}
//-->
</script>
</head>
<body>
<form name="meinFormular">
  <table width="420">
    <tr> 
      <td>
        <a href="javascript:textFormatieren('Bold')">Fett</a> &nbsp;| &nbsp;
        <a href="javascript:textSpeichern();">Speichern</a>
      </td>
    </tr>
    <tr> 
      <td> 
        <!-- Hier ist der iframe -->
        <iframe width="420" height="250" name="wysiwyg" id="wysiwyg">
        Kann iFrames nicht darstellen</iframe>
      </td>
    </tr>
  </table>
  <br>
  In diesem Feld wird der Text eingef&uuml;gt, der im iFrame geschrieben wurde.<br>
  Damit l&auml;sst sich der Text dann z.B. bequem in einer Datenbank ablegen.<br>
  <textarea name="speicherFeld" cols="50" rows="5"></textarea>
</form>
<script language="javascript">

  var WYSIWYG = document.frames[0];
  var text = 'werter herr qwertzu';


  WYSIWYG.document.designMode='On';
  WYSIWYG.document.open();
  WYSIWYG.document.write('<html><head><title>Test</title>');
  WYSIWYG.document.write('<link rel="stylesheet" href="/adds/style.css">');
  WYSIWYG.document.write('<\/head><body topmargin=4 leftmargin=2>'); 
  WYSIWYG.document.write(text);
  WYSIWYG.close()
// -->
</script>
</body>
</html>

Sollte im übrigen auch nicht schwer sein, das Ding Moz-tauglich zu machen - glaub ich.


Beste Grüße . . . Karsten

[Tommie]

danke dir Karsten. Das Problem ist jetzt natürlich, dass das Teil weder mit Mozilla noch Opera läuft. Ausserdem frage ich mich wieso ein Iframe nötig ist - das Forum hier kommt ja auch ohne aus...es muss also irgendwie gehen. Ich habe dir mal die Seite gespeichert (inklusive Editor).