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.
- tinyMCE.init({
- theme : "advanced",
- relative_urls : false,
- mode : "textareas",
- plugins : "bbcode,emotions,selectall",
- theme_advanced_buttons1 : "bold,italic,underline,bullist,image,link,unlink,forecolor,cleanup,code",
- theme_advanced_buttons2 : "",
- theme_advanced_buttons3 : "",
- theme_advanced_buttons3_add : "emotions",
- theme_advanced_toolbar_location : "bottom",
- theme_advanced_toolbar_align : "center",
- theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
- relative_urls : false,
- convert_urls : false,
- entity_encoding : "raw",
- add_unload_trigger : false,
- remove_linebreaks : false,
- auto_resize : true,
- auto_focus : "message",
- cleanup : true
- });
- function emoticon(text){
- tinyMCE.get('message').selection.setContent(text);
- }
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);
- })();
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