WYSIWYG-Editor für Forum

[Item]

Vor kurzem habe ich einen einfachen WYSIWIG-Editor für mein Forum geschrieben. Naja - eher nur der Editor. Denn beim Speichern weiss ich nicht weiter. Wie kann ich beim folgenden Code das so machen, dass es beim Knopf "senden" es in die MySQL-Datenbank schreibt, aber als HTML-Code?

Mein Code:
<html>

<head>
<title>Online-Editor/title>
</head>

<script>
function format(command, parameter)
{
divEditable.focus();
document.execCommand(command, false, parameter);
}
</script>

<body>

<button onClick="format('JustifyLeft', '');" style="border: 1px solid #aaaaaa;">Text beginnen<br></button><br />

<button onClick="format('Bold', '');" style="border: 1px solid #aaaaaa;" ><b>B</b></button>
<button onClick="format('Italic', '');" style="border: 1px solid #aaaaaa;"><i>K</i></button>
<button onClick="format('Underline', '');" style="border: 1px solid #aaaaaa;"><u>U</u></button><br />

<button onClick="format('FontName', 'Times New Roman');" style="border: 1px solid #aaaaaa;"><font face="Times New Roman">Times</font></button>
<button onClick="format('FontName', 'Arial');" style="border: 1px solid #aaaaaa;"><font face="Arial">Arial</font></button>
<button onClick="format('FontName', 'Courier New');" style="border: 1px solid #aaaaaa;"><font face="Courier New">Courier New</font></button><br>

<button onClick="format('ForeColor', 'black');" style="border: 1px solid #aaaaaa;"><font color="black">schwarz</font></button>
<button onClick="format('ForeColor', 'red');" style="border: 1px solid #aaaaaa;"><font color="red">rot</font></button>
<button onClick="format('ForeColor', 'blue');" style="border: 1px solid #aaaaaa;"><font color="blue">blau</font></button><br>

<button onClick="format('FontSize', 1);" style="border: 1px solid #aaaaaa;">1</button>
<button onClick="format('FontSize', 3);" style="border: 1px solid #aaaaaa;">2</button>
<button onClick="format('FontSize', 5);" style="border: 1px solid #aaaaaa;">5</button>
<button onClick="format('FontSize', 7);" style="border: 1px solid #aaaaaa;">7</button><br>

<br><br>

<div style="height:300; width=95%; background-color:white; padding:3; border:inset 2px; overflow:auto;" id="divEditable" contenteditable></div>

</body>

</html>
Gruss, Item

 

[Skeeve]

In HTML? Gar nicht.

 

[Item]

Ähem - lol. :-D
Natürlich schon in PHP. Nur wie kann ich das aus diesem Editor raus machen. Bis jetzt wars eben nur ein Textfeld, wo man die BBCodes selbst eingeben musste. Nun fand ich dieses eine schöne Erweiterung. Nur wie kann ich das zusammenfügen?

 

[zeno]

Ich versteht das Problem nicht? Genauso wie vorher, Formular absenden, BBCode durch HTML ersetzen (magst du das wirklich? Was ist beim bearbeiten der Beiträge? Wieder zurück umwandeln? HTML anzeigen?), in die DB werfen.

 

[Item]

Ich weiss nicht wie - wie kann ich das umwandeln, wenn es ja nicht so dasteht.

 

[zeno]

Es sollte doch über JS der Wert des ge-wysiwygten Feldes abgefragt werden können?!

 

[Item]

Hm - und wie :-D

 

[drok]

Also ich würde davon abraten einen Forumsbeitrag in HTML abzuspeichern.
Ich würde einfach den BBCODE abspeichern.
Natürlich muss Du auch dort vorher die Daten überprüfen, damit kein Schadcode eingeschleußt wird.

Also nachdem das Formular abgeschickt wurde, musst Du den HTML-Code mit dem BBCODE-Äquivalent ersetzen.

Dafür gibts in PHP schon einige fertige Scripte.
Ansonsten kann man so ein Teil auch ganz einfach selbst schreiben.

Wenn der Beitrag wieder aus der DB geladen wird, musst Du den Code natürlich erneut parsen.

 

[duderino]

Und wenn du nen HTML-Editor brauchst, kannst den hier nehmen:
http://www.fckeditor.net/

duderino

PS: Es gibt übrigens auch BB-Code-Editoren die den Code direkt als BB-Code ausgeben und auch Klassen anbieten um diesen wieder umzuwandeln. Ich werd mal suchen...

 

[duderino]

So, hab ein paar Sachen gefunden. Allerdings nicht 100%ig das was ich gesucht habe. Aber vielleicht hilft es dir schon weiter:

http://www.powie.de/temp/edit/phrc2.html

Und hier mal eine Diskussion die sich auch um das Thema dreht:
http://www.developers-guide.net/forums/6162,suche-wysiwyg-bbcode-editor


duderino