Diese Version könnte zu Problemen führen, bevor du probierst sie zu installieren solltest du dir Wissen im Themenbereich CSS und JavaScript aneignen. Die Version ist dennoch voll Funktionsfähig mit der mm_forum Version 1.9.1
Bei weiteren Fragen bitte eine Email schicken.
MMForum um einen WYSIWYG erweitern
Immer mehr Anwender nutzen TYPO3 als Content Management System. Und wie jedes ContentManagementSystem braucht man auch bei diesem ein vernünftiges Forum. Das bisher am weitesten fortgeschrittene Forum ist das mm_forum, es entwickelt sich stetig weiter, hat jedoch leider keinen modernen "What you See is what you Get" - Editor.
Dies kann jedoch relativ leicht geändert werden, wenn auch einige Fehler dabei entstehen können.
Einbringen von wichtigen Dateien
So, fangen wir an.
Was wir dafür brauchen ist erstmal der TinyMCE ( Quelle ), ladet euch am besten die Zip- Runter, entpackt sie und ladet sie in euren Ordner fileadmin auf dem Server. Die Ordnerstruktur sollte nun lauten: /fileadmin/tiny_mce/
In den Ordner legt ihr dann bitte myown.js Datei ohne Inhalt an.
So, und schon haben wir alle Dateien zusammen die wir brauchen.
Einbauen des Grundeditor
Der nächste Schritt ist das Einbauen des TinyMCE in unser TYPO3.
Templateanpassungen
Der erste Schritt ist relativ einfach. Wir erstellen für unseren Seitenbaum mit dem Forum ein neues TYPO3Template als Extension Template. Dort fügen wir folgendes TYPOScript im Setup ein, lassen die restlichen Felder wie Sie waren:
- page.21 = HTML
- page.21.value=<script type="text/javascript" src="fileadmin/tiny_mce/tiny_mce.js"></script>
- page.22 = HTML
- page.22.value=<script type="text/javascript" src="fileadmin/tiny_mce/myown.js"></script>
Folgend müssen wir noch unsere myown.js, die wir vorhin angelegt haben editieren. Der obere Block erzeugt uns unseren Editor, der untere Block sorgt dafür, dass die Smileys noch mit dem neuen Editor funktionieren, was sie sonst leider nicht mehr tun.
Neue funktionsfähige Datei:
- tinyMCE.init({
- theme : "advanced",
- mode : "exact",
- elements : "tx_mmforum_editor",
- plugins : "bbcode",
- theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
- theme_advanced_buttons2 : "",
- theme_advanced_buttons3 : "",
- theme_advanced_toolbar_location : "bottom",
- 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 : false
- });
Einbauen der BBCodes
Das mm_forum verwendet andere BBCodes als der tinymce anspricht. Das müssen wir irgendwie anpassen, damit alles läuft. Ohje, das wird eine ganze Menge arbeit, oder nicht? Naja, es war eine ganze Menge arbeit, aber im großen und ganzen sollte es so funktionieren wie es nun ist. Bei Fehlern könnt ihr mich einfach anschreiben und ich überlege mir was.
Über Mithilfe beim Erweitern würde ich mich übrigens sehr freuen!
Folgendes ist nun zu tun:
- Geht in den Ordner /fileadmin/tiny_mce/plugins/bbcode
- benennt die Datei editor_plugin.js zu editor_plugin_original.js um
- erstellt eine neue editor_plugin.js mit folgendem Inhalt und alles wird laufen:
- /**
- * $Id: editor_plugin_src.js 201 2007-02-12 15:56:56Z spocke $
- * @author Moxiecode
- * @author Bastian-Bringenberg.de Typo3 Anpassung
- * @copyright Copyright © 2004-2008, Moxiecode Systems AB, All rights reserved.
- */
- (function() {
- tinymce.create('tinymce.plugins.BBCodePlugin', {
- init : function(ed, url) {
- var t = this, dialect = ed.getParam('bbcode_dialect', 'punbb').toLowerCase();
- ed.onBeforeSetContent.add(function(ed, o) {
- o.content = t['_' + dialect + '_bbcode2html'](o.content);
- });
- ed.onPostProcess.add(function(ed, o) {
- if (o.set)
- o.content = t['_' + dialect + '_bbcode2html'](o.content);
- if (o.get)
- o.content = t['_' + dialect + '_html2bbcode'](o.content);
- });
- },
- getInfo : function() {
- return {
- longname : 'BBCode Plugin',
- author : 'Moxiecode Systems AB',
- authorurl : 'http://tinymce.moxiecode.com',
- infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/bbcode',
- version : tinymce.majorVersion + "." + tinymce.minorVersion
- };
- },
- // Private methods
- // HTML -> BBCode in PunBB dialect
- _punbb_html2bbcode : function(s) {
- s = tinymce.trim(s);
- function rep(re, str) {
- s = s.replace(re, str);
- };
- /** Bastians Erweiterungen **/
- /** Liste [list][*]abc[*]def[/list]**/
- rep(/<ul>(.*?)<\/ul>/gi,"[list]$1[/list]");
- rep(/<li>(.*?)<\/li>/gi,"[*]$1");
- rep(/\[size([^\]]*)\]/gi,"");
- rep(/\[\/size\]/gi,"");
- /** Quotes [quote="Hans"][quote="Hannes"]Was sagste?[/quote]genau das[/quote]**/
- rep(/<abbr class=\"quotes_basti\"><abbr class=\"quotes_basti_title\>(.*)<\/abbr>(.*)<\/abbr>/gi,"[quote=\"$1\"]$2[/quote] ");
- /** Bastians Erweiterungen Ende **/
- // example: <strong> to [b]
- rep(/<a.*?href=\"(.*?)\".*?>(.*?)<\/a>/gi,"[url=$1]$2[/url]");
- rep(/<font.*?color=\"(.*?)\".*?class=\"codeStyle\".*?>(.*?)<\/font>/gi,"[code][color=$1]$2[/color][/code]");
- rep(/<font.*?color=\"(.*?)\".*?class=\"quoteStyle\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]");
- rep(/<font.*?class=\"codeStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[code][color=$1]$2[/color][/code]");
- rep(/<font.*?class=\"quoteStyle\".*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[quote][color=$1]$2[/color][/quote]");
- rep(/<span style=\"color: ?(.*?);\">(.*?)<\/span>/gi,"[color=$1]$2[/color]");
- rep(/<font.*?color=\"(.*?)\".*?>(.*?)<\/font>/gi,"[color=$1]$2[/color]");
- rep(/<span style=\"font-size:(.*?);\">(.*?)<\/span>/gi,"[size=$1]$2[/size]");
- rep(/<font>(.*?)<\/font>/gi,"$1");
- rep(/<img.*?src=\"(.*?)\".*?\/>/gi,"[img]$1[/img]");
- rep(/<span class=\"codeStyle\">(.*?)<\/span>/gi,"[code]$1[/code]");
- rep(/<strong class=\"codeStyle\">(.*?)<\/strong>/gi,"[code][b]$1[/b][/code]");
- rep(/<strong class=\"quoteStyle\">(.*?)<\/strong>/gi,"[quote][b]$1[/b][/quote]");
- rep(/<em class=\"codeStyle\">(.*?)<\/em>/gi,"[code][i]$1[/i][/code]");
- rep(/<u class=\"codeStyle\">(.*?)<\/u>/gi,"[code][u]$1[/u][/code]");
- /** Bastians Erweiterungen **/
- /** Quotes [quote="Hans"][quote="Hannes"]Was sagste?[/quote]genau das[/quote]**/
- rep(/<span class=\"quotes_basti_title\">([^(\"\\"<)]*)<\/span>/gi,"[quote=\"$1\"]");
- for (var i = 0; i <= 20; i++){
- rep(/<span class=\"quotes_basti\">(.*)<\/span>/gi,"$1[/quote] ");
- }
- /** Bastians Erweiterungen Ende **/
- rep(/<\/(strong|b)>/gi,"[/b]");
- rep(/<(strong|b)>/gi,"[b]");
- rep(/<\/(em|i)>/gi,"[/i]");
- rep(/<(em|i)>/gi,"[i]");
- rep(/<\/u>/gi,"[/u]");
- rep(/<span style=\"text-decoration: ?underline;\">(.*?)<\/span>/gi,"[u]$1[/u]");
- rep(/<u>/gi,"[u]");
- rep(/<blockquote[^>]*>/gi,"[quote]");
- rep(/<\/blockquote>/gi,"[/quote]");
- rep(/<br \/>/gi,"\n");
- rep(/<br\/>/gi,"\n");
- rep(/<br>/gi,"\n");
- rep(/<p>/gi,"");
- rep(/<\/p>/gi,"\n");
- rep(/<[^>]+?>/gi, '');
- rep(/ /gi," ");
- rep(/"/gi,"\"");
- rep(/</gi,"<");
- rep(/>/gi,">");
- rep(/&/gi,"&");
- return s;
- },
- // BBCode -> HTML from PunBB dialect
- _punbb_bbcode2html : function(s) {
- s = tinymce.trim(s);
- function rep(re, str) {
- s = s.replace(re, str);
- };
- /** Bastians Erweiterungen **/
- /** Liste [list][*]abc[*]def[/list]**/
- rep(/\[\*\]/gi,"</li><li>");
- rep(/\[list\]<\/li>(.*)\[\/list\]/gi,"<ul>$1</li></ul>");
- /** Quotes [quote="Hans"][quote="Hannes"]Was sagste?[/quote]genau das[/quote]**/
- /** Bastians Erweiterungen Ende **/
- // example: [b] to <strong>
- rep(/\n/gi,"<br />");
- rep(/<([^>]+)>([^<]*)<\/([^>]+)>/gi,"$2");
- rep(/\[b\]/gi,"<strong>");
- rep(/\[\/b\]/gi,"</strong>");
- rep(/\[i\]/gi,"<em>");
- rep(/\[\/i\]/gi,"</em>");
- rep(/\[u\]/gi,"<u>");
- rep(/\[\/u\]/gi,"</u>");
- rep(/\[url=([^\]]+)\](.*?)\[\/url\]/gi,"<a href=\"$1\">$2</a>");
- rep(/\[url\](.*?)\[\/url\]/gi,"<a href=\"$1\">$1</a>");
- rep(/\[img\](.*?)\[\/img\]/gi,"<img src=\"$1\" />");
- rep(/\[color=(.*?)\](.*?)\[\/color\]/gi,"<font color=\"$1\">$2</font>");
- rep(/\[code\](.*?)\[\/code\]/gi,"<span class=\"codeStyle\">$1</span> ");
- rep(/\[size([^\]]*)\]/gi,"");
- rep(/\[\/size\]/gi,"");
- /** Bastians Erweiterungen **/
- /** Quotes [quote="Hans"][quote="Hannes"]Was sagste?[/quote]genau das[/quote]**/
- rep(/\[quote=\"([^\"]*)\"\]/gi,"<abbr class=\"quotes_basti\"><abbr class=\"quotes_basti_title\">$1</abbr>");
- rep(/\[\/quote\]/gi,"</abbr> ");
- /** Bastians Erweiterungen Ende **/
- return s;
- }
- });
- // Register plugin
- tinymce.PluginManager.add('bbcode', tinymce.plugins.BBCodePlugin);
- })();
Alternatives Einbauen der Smileys
Esben Fest schlug folgende Lösung vor:
Zu bearbeitende Datei: typo3conf/ext/mm_forum/pi1/class.tx_mmforum_pi1.php
Zu suchende Zeile:
$href= 'javascript:editor.insertSmilie(\''.$row['code'].'\')';
Ändern in:
$href= 'javascript:tinyMCE.activeEditor.selection.setContent(\''.$row['code'].'\')';
Danke für diese einfachere Lösung.
Optische Nachbearbeitung
Zur Abrundung sollten wir nun noch ein paar Schönheitsschritte befolgen:
Im Ordner tiny_mce gibt es den Ordner themes, in denen sich die Layouts des TinyMce befinden. Hier zu finden sind auch CSS Dateien denen das Margin der P-Elemente entfernt werden sollte.
An dieser Stelle sollten auch die CSS Klassen für das Zitieren und den Code bearbeitet werden
Anschließend sollte aus dem mm_forum Template die Buttonleiste des mm_forum entfernt werden.
Um die Smileys funktionsfähig zu halten muss ihre Funktions mit diesem Befehl überschrieben werden:
tinyMCE.get('message').selection.setContent(text);
Anschließend solltet ihr ein funktionsfähiges tinyMCE in eurem mm_forum haben.
Abschließende Worte
Wenn ihr das alles gemacht habt, muss ich euch zu eurem neuen WYSIWYG Editor im MM-Forum beglückwünschen. Es gibt noch einige Macken wie ihr feststellen werdet, ab und zu kommt komisches HTML in eure Beiträge, da müssen wir mal gemeinsam überlegen wie wir eine Filterfunktion schreiben.
Ich hoffe ich konnte helfen und würde mich über Kommentare per Email ( Typo3(at)Bastian-Bringenberg.de) freuen.
Bastian
ToDo
Einige Dinge muss ich noch in diesem Text machen:
- Screenshots einbauen
- Erweitern des BBCodes
