Rich-Text-Editor TinyMCE für Jot-Kommentare nutzen
Bestandteil jeder MODx-Installation ist TinyMCE. Dies ist ein hervorragender Rich-Text-Editor, der dazu auch noch BBCode erstellen kann. Gleichzeitig bringt MODx das Snippet Jot mit, um Kommentare oder Gästebucheinträge zu erfassen. Wir zeigen, wie man seinen Besuchern zur Eingabe seines Kommentars mit Jot den Rich-Text-Editor TinyMCE an die Hand geben kann.
Um den Rich-Text-Editor TinyMCE zu nutzen, sind zwei Probleme zu lösen. Zunächst ist TinyMCE in Jot zu aktivieren. Dann muss man den BBCode bei der Ausgabe des Dokuments in HTML umwandeln.
TinyMCE im Jot aktivieren
Die Standardinstallation nutzt das Chunk "Comments". Hier kann TinyMCE ganz einfach aktiviert werden.
Chunk "Comments:"
<div id="commentsAnchor">
<script type="text/javascript" src="/assets/plugins/tinymce3241/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "none",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,removeformat,cleanup",
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
});
</script>
[[Jot? &customfields ...
<script type="text/javascript">
tinyMCE.execCommand('mceToggleEditor',false,'content{+jot.id+}');
</script>
Eingefügt wurden zwei Skript-Blöcke. Der Erste definiert das Aussehen des Editors. Hier muss man ggf. den Pfad zum Rich-Text-Editor TinyMCE an die eigene Installation anpassen. Unsere Implementation orientiert sich am Beispiel "BBCode example" des Rich-Text-Editors TinyMCE. Wer Lust hat, der kann an dieser Stelle seinem Editor natürlich leicht auch ein anderes Aussehen verpassen. Bei den Nahverkehrshelden haben wir zum Beispiel in der Zeile "theme_advanced_buttons1 :" auf den Schalter zur Anzeige des html-Codes verzichtet und die anderen Schalter anders angeordnet.
Mit dem zweiten Skriptblock wird der Rich-Text-Editor TinyMCE dann tatsächlich eingeschaltet. Dabei stellt der Platzhalter "{+jot.id+}" im Chunk sicher, dass das richtige Feld mit dem Rich-Text-Editor TinyMCE pflegbar wird. Wobei natürlich in Eurem MODx } und { durch ] und [ zu ersetzen sind. Und wer Jot mit einem eigenen Formular (&tplForm gesetzt) nutzt, der muss an dieser Stelle darauf achten, dass der Name des Feldes richtig gesetzt wird. Die Standardinstallation nutzt den Begriff "content" als Anfang des Feldnamens.
BBCode bei der Ausgabe in HTML umwandeln
In der Datenbank finden sich jetzt Einträge wie "... [url=http://www.modxcms.com]MODx[/url] ...". Es ist also notwendig den BBCode in HTML umzuwandeln. Der geeignete Ansatzpunkt dazu ist der Plugin-Mechanismus von MODx. Denn einem Plugin kann man ein Systemereigniss als Ausführungszeitpunkt zuweisen. So kann man zum Beispiel ein von MODx erstelltes Dokument vor der Ausgabe an den Browser nochmal modifizieren.
Das dazu benötigte Plugin kann im Backend angelegt werden. Als Plugin-Code eignet sich folgender PHP-Code:
global $modx;
$e = &$modx->Event;
switch ($e->name)
{
case "OnWebPagePrerender":
// Leider sind an dieser Stelle die Sonderzeichen schon als HTML-Codes maskiert.
$raus = array('[', ']');
$rein = array('[', ']');
$modx->documentOutput = str_replace($raus, $rein, $modx->documentOutput);
// Dann bearbeiten wir den BBCode ...
$bbco = array(
'/\[b\](.*?)\[\/b\]/is' => '<strong>$1</strong>',
'/\[u\](.*?)\[\/u\]/is' => '<u>$1</u>',
'/\[i\](.*?)\[\/i\]/is' => '<i>$1</i>',
'/\[url\=(.*?)\](.*?)\[\/url\]/is' => '<a href="$1" rel="nofollow">$2</a>'
);
$modx->documentOutput = preg_replace(array_keys($bbco), array_values($bbco), $modx->documentOutput);
// ... und nun drehen wir die [ ] wieder sauber rein.
$modx->documentOutput = str_replace($rein, $raus, $modx->documentOutput);
default:
return;
break;
}
Damit das Plugin dann auch tatsächlich genutzt wird, muss auf dem Reiter "Systemereignisse" der "OnWebPagePrerender" aktiviert werden. Und nun sollte ein Kommentar, der BBCode beinhaltet, mit korrektem HTML-Code ausgegeben werden.