tinyMCE: Advanced PunBB

Für mein CMS CyCoMaSy verwende ich den tinyMCE WYSIWYG-Editor, ähnlich wie es hier bei Wordpress der Fall ist. Allerdings habe ich mich aus verschiedenen Gründen entschieden nicht den vollen HTML-Code zu unterstützen, sondern nur bestimmte Formatierungen über BB-Code bereit zu stellen.
Das Problem ist allerdings, dass tinyMCE diese nicht alle unterstützt und es deswegen zu Problemen kommt. Zum Beispiel wird im PunBB-Style der Tag [size=YYpx] nicht verwendet, wodruch alle Formatierungen in dieser Richtung verloren gehen, wenn man den WYSIWYG-Editor benutzt. Nicht grade toll.
Außerdem gibt es im tinyMCE einen einigermaßen bekannten Bug im Firefox, der dafür sorgt, dass bei Verwendung der Einstellung entity_encoding : “raw” im Editor nacheinander immer mehr Linebreaks verschwinden. Das sieht dann so aus, dass beim Einfügen von z.B. zwei Leerzeilen diese erst abgespeichert werden, beim erneuten Aufrufen des Editors, aber eine einfach verschwunden ist. Speichert man nun wieder und ruft ihn nochmal auf, ist auch die letzte Leerzeile weg. Wie gesagt, das Problem tritt spezifisch im FF (und verwandeten Browsern) auf.
Da das alles nicht wirklich praktisch ist, ich aber den tinyMCE nicht wieder ausbauen möchte, habe ich mich nach verschiedenen Lösungen umgesehen. Für das size-Problem war nichts dokumentiert, so blieb mir nichts anderes übrig, als die Möglichkeit selbst hinzuzufügen, die LGPL des tinyMCE erlaubt das glücklicherweise.
Auch für das Entfernen der Leerzeilen durch FF-ähnliche Browser habe ich mich um eine Lösung bemüht und auch eine etwas unorthodoxe gefunden. Einerseits habe ich nun den [p]-Tag hinzugefügt und andererseits die Einstellungen des tinyMCE dahingehend angepasst, dass [p] zu <p> und umgekehrt verwandelt wird. Allerdings setzt das wiederum voraus, dass man den [p]-Tag dann auch beim Auslesen aus der Datenbank entsprechend umschreibt um validen HTML-Code zu erzeugen.
Die Leerzeilen werden vom Firefox zwar immernoch entfernt, durch die Verwendung der Paragraphen ist zwischen zwei Absätzen nun aber immer ein Abstand, der nicht verschwinden kann.
Meine tinyMCE-Einstellungen sehen also nun für CaCoMaSy so aus:

tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,fontsizeselect,forecolor,removeformat,cleanup",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "center",
theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
content_css : "css/bbcode.css",
entity_encoding : "raw",
add_unload_trigger : false,
remove_linebreaks : false,
inline_styles : false,
convert_fonts_to_spans : true,
font_size_style_values : "8,10,12,14,16,18,20",
document_base_url : './', // depends on your location of tinyMCE and usage
convert_urls : false,
relative_urls : true,
remove_script_host : true,
forced_root_block : "p"
});

Beim Auslesen aus der Datenbank werden außerdem noch folgende PHP-Funktionen angewendet:

$text=preg_replace('|\[size=(.*)\](.*)\[/size\]|Uism’,’$2‘,$text);
$text=str_replace(”[p]“,”

“,$text);
$text=str_replace(”[/p]“,”

“,$text);

Hier außerdem der Download der angepassten PunBB-Codes für tinyMCE: Download (ZIP, 3.5 kb)


Short version in english

I use the tinyMCE Editor with the PunBB Plugin, but as you may know, not all options are supported. For example, it is not possible to change the font-size. Furthermore, you have to use to option entity_encoding : “raw” in your tinyMCE properties, which causes problems with all Firefox-based browsers, because they remove linebreaks/empty lines. To solve these two issues, i changed the PunBB plugin in away that i added the [size=YYpx]-Tag to support different font-sizes. And to avoid line-removing in FF, i convert all newlines to paragraphes, using [p]-Tags.
Above, in the german version, are my properties of tinyMCE usage and the PHP-codes to covert [p] and [size]-Tags into valid HTML. With the link you can also download my changed PunBB style and use it for your application.
Maybe, it helps someone.

Der Beitrag wurde am Mittwoch, den 18. Februar 2009 um 13:09 Uhr veröffentlicht und wurde unter Allgemein abgelegt. Folgende Tags wurden dabei verwendet , , . Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Kommentare und Pings sind derzeit nicht erlaubt.

Kommentarfunktion ist deaktiviert