CMS

Zum Highlighten von Source-Code verwendete ich bis Dato das beautyofcode Plugin und war bis anhin sehr zufrieden.

Als ich jedoch angefangen habe zu Blogen, hatte ich damit mehr und mehr Aufwand, da gerade für Linux-Beitrage sehr viele einzeiler eingesetzt werden mussten.

Das ergab dann beim schreiben immer einen Baustein Text, einen Baustein beautyofcode, ein Baustein Text usw.

Das zweite Problem ist, dass die Brushes (Source-Code Type, z.B.: Php, Bash, Sql etc.) via Javascript nachgelden werden, das gibt einen unschönen Effekt, da es sehr lange dauert, bis das jQuery-Plugin den Code umwandelt.

Also suchte ich einen Weg, das anders einzubinden:

1. JS erstellen

Man ladet sich das Plugin beautyofcode herunter (installiert werden muss es nicht)

Man erstellt nun eine neue Datei im fileadmin z.B.:

fileadmin/syntaxhighlighter/jquery.beautyofcode.min.js

In diese Datei müssen nun in der richtigen Reihenfolge die Dateien Minimiert kopiert werden:

EXT:beautyofcode/res/jquery/jquery.beautyOfCode.js
EXT:beautyofcode/res/syntax_highlighter/v2/src/shCore.js
EXT:beautyofcode/res/syntax_highlighter/v2/src/shLegacy.js

Dann alle verwendeten Brushes, hier einige Beispiele:

EXT:beautyofcode/res/syntax_highlighter/v2/scripts/shBrushBash.js
EXT:beautyofcode/res/syntax_highlighter/v2/scripts/shBrushCss.js
...

Um das script zu minimieren, verwende ich jscompress.com, einfach das zu minimierende File im Editor öffnen, den Inhalt kopieren und im Textfeld von jscompress.com einfügen. Dann den Knopf "COMPRESS JAVASCRIPT" betätigen und den minimierten Code in die neue Datei einfügen.

Die Datei die daraus entsteht sieht dann etwa so aus:
jquery.beautyOfCode.js

2. Dateien in den fileadmin kopieren

Für das richtige funktionieren von beautyofcode benötigt man noch einige CSS Dateien, diese befinden sich ebenfalls im beautyofcode EXT-Ordner.

Wir kopieren also den gesamten Inhalt von

EXT:beautyofcode/res/syntax_highlighter/v2/styles

In den Ordner

filadmin/syntaxhighlighter/styles

3. Dateien einbinden

Die Dateien können nun im TS-Setup eingebunden werden

Das JS:

page.includeJS {
  beautyofcode1 = fileadmin/syntaxhighlighter/jquery.beautyOfCode.js
}

Die CSS-Dateien:

page.includeCSS {
  beautyofcode1 = fileadmin/syntaxhighlighter/styles/shCore.css
  beautyofcode1.media = all
  beautyofcode2 = fileadmin/syntaxhighlighter/styles/shThemeDefault.css
  beautyofcode2.media = all
}

4. Javascript ausgeben

Das Javascript geben wir immer aus, wenn kein Source-Code vorhanden ist, dann wird nichts umgewandelt...

page.headerData {
  502 = TEXT
  502 {
    value (
/*<![CDATA[*/
<!--
jQuery(document).ready(function(){
  jQuery.beautyOfCode.init({
    autoLoad: false,
    baseUrl: "fileadmin/syntaxhighlighter/",
    scripts: "scripts/",
    styles: "styles/",
    theme: "Default",
    defaults: {"tab-size": 4,"gutter": 1,"collapse": 0,"wrap-lines": 1,"toolbar": 1},
    brushes: ["Plain","Xml","JScript","CSharp","Plain","Php","Typoscript"]
  });
});
// -->
/*]]>*/
)
    wrap = <script type="text/javascript">|</script>
  }
}

5. RTE konfigurieren

Jetzt kommt der RTE dran um die Magie zu verwenden habe ich mich an ein Script von Michiel Roos gehalten, er hat das "RTE-Feature" bereits in Forge vorgeschlagen, leider wurde es bis Dato nicht umgesetzt.

Wir erstellen zuerst eine neue PHP-Datei:

fileadmin/class.user_rtecodehighlighter.php

Mit folgendem Inhalt:

<?php
/***************************************************************
 *  Copyright notice
 *
 *  (c) 2010 Michiel Roos <extenstions@typofree.org>
 *  All rights reserved
 *
 *  This script is part of the TYPO3 project. The TYPO3 project is
 *  free software; you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation; either version 2 of the License, or
 *  (at your option) any later version.
 *
 *  The GNU General Public License can be found at
 *  http://www.gnu.org/copyleft/gpl.html.
 *
 *  This script is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 *  GNU General Public License for more details.
 *
 *  This copyright notice MUST APPEAR in all copies of the script!
 ***************************************************************/

/**
 * RTE code highlighter
 *
 * @package TYPO3
 * @subpackage rtecodehighlighter
 * @version $Id:$
 * @license http://opensource.org/licenses/gpl-license.php GNU Public License, version 2
 */
class user_rtecodehighlighter
{
    function highlight($content, $conf) {
        // some configuration is taken from attributes of the tag
        $parameters = $this->cObj->parameters;
        $class = ($parameters['class']) ? 'class="' . $parameters['class'] . '"' : '';
        $content = preg_replace('#<br />#', '&#x000A;', $content);
        $result = '<pre ' . $class . '>' . $content . '</pre>';
        return $this->cObj->stdWrap($result, $this->conf['stdWrap.']);
    }
}
?>

Auf der root-Page muss folgendes Script in die Page-Config:

RTE.default {
  disableEnterParagraphs = 1
  userElements.10 = Syntax Highlighting tags
  userElements.10 {
    6 = Bash Code
    6.description = Code-Tag Bash
    6.mode = wrap
    6.content = <pre class="code"><code class="bash">|</code></pre>

    7 = C# Code
    7.description = Code-Tag C#
    7.mode = wrap
    7.content = <pre class="code"><code class="csharp">|</code></pre>

    8 = CSS Code
    8.description = Code-Tag CSS
    8.mode = wrap
    8.content = <pre class="code"><code class="css">|</code></pre>

    9 = JavaScript Code
    9.description = Code-Tag JavaScript
    9.mode = wrap
    9.content = <pre class="code"><code class="js">|</code></pre>

    10 = PHP Code
    10.description = Code-Tag PHP
    10.mode = wrap
    10.content = <pre class="code"><code class="php">|</code></pre>

    11 = Plain Code
    11.description = Code-Tag Plain
    11.mode = wrap
    11.content = <pre class="code"><code class="plain">|</code></pre>

    12 = SQL Code
    12.description = Code-Tag SQL
    12.mode = wrap
    12.content = <pre class="code"><code class="sql">|</code></pre>

    13 = TypoScript Code
    13.description = Code-Tag TypoScript
    13.mode = wrap
    13.content = <pre class="code"><code class="ts">|</code></pre>

    14 = XML Code
    14.description = Code-Tag XML
    14.mode = wrap
    14.content = <pre class="code"><code class="xml">|</code></pre>
  }
}
RTE.default {
  showButtons := addToList(user)
  removeTags := removeFromList(user)
  proc.HTMLparser_rte.allowTags < RTE.default.proc.allowTags
  proc.HTMLparser_db.allowTags < RTE.default.proc.allowTags
  proc.entryHTMLparser_db.allowTags < RTE.default.proc.allowTags
}

Und im Template muss folgende parseFunc_RTE eingefügt werden:

includeLibs.rtecodehighlighter = fileadmin/class.user_rtecodehighlighter.php
lib.parseFunc_RTE {
  tags {
    pre = TEXT
    pre {
      current = 1
      postUserFunc = user_rtecodehighlighter->highlight
    }
  }
}

6. Das i-Tüpfelchen

Nun kann man im RTE mit dem userfunction-Button den Selektierten Text in den benötigten Markup umwandeln:

<pre class="code"><code class="...">Selektierter Text</code></pre>

Man sieht aber im Backen nicht wirklich, welcher Text nun ein Code darstellt.

Also heben wir diesen Text etwas hervor, indem wir ein eigenes CSS im Backend für den RTE einbinden.

Wir kopieren den Inhalt des Ordners

typo3/typo3/sysext/rtehtmlarea/res/contentcss

in den Ordner

fileadmin/contentcss

Wir erweitern das neue CSS mit folgender CSS-Rule:

/* Code */
pre.code {
    margin-left: 20px;
    padding: 5px;
    border: 1px solid #ddd;
    background: #eee;
    color: blue;
}

Nun muss unser neues CSS nur noch in den RTE eingebunden werden. Also wieder die root-Page bearbeiten und im page-Setup folgendes eintragen:

RTE.default {
  contentCSS = fileadmin/contentcss/default.css
}

Ab jetzt sollte dem fröhlichen Inline-Syntax-Highlighten nichts mehr im Wege stehen...

Ergebnis

Der Link in jfimageflow wird normalerweise im gleichen Fenster geöffnet. Um den Link in einem neuen Fenster zu öffnen, muss folgendes im Feld Options eingegeben werden:

onClick: function() {
  if(this.url){
    window.open(this.url);
  }
}

Um die t3jquery-Lib im Backend einzubinden, kann man einfach in seinem Code folgendes Script verwenden:

if (t3lib_extMgm::isLoaded('t3jquery')) {
    require_once(t3lib_extMgm::extPath('t3jquery').'class.tx_t3jquery.php');
    $path_to_lib = tx_t3jquery::getJqJSBE();
    $script_to_lib = tx_t3jquery::getJqJSBE(true);
}

t3jquery-Modul fehlt (ADMIN TOOLS)

Ja, die Frage nach dem t3jquery-Modul höre ich oft, das ist aber eigentlich ganz einfach:

Da man das t3jquery-Modul nur dann benötigt, wenn man eine Lokale, individuelle Lib zusammenstellen möchte, wird das Modul einfach nicht angezeigt wenn man die Lib (jQuery, jQuery UI oder jQuery TOOLS) per CDN lädt.

Damit das Modul mit der Individuellen Konfiguration angezeigt wird, muss folgendes gemacht werden:

1. Extension Manger
2. t3jquery suchen
3. Configuration-Tab öffnen
4. Hacken bei CDN entfernen
5. UPDATE-Knopf drücken
6. Komplettes Backend neu laden (F5)

Und VALA, das Modul ist wieder da

 

Doppeltes Laden von jQuery

Der häufigste Fehler der auftritt beim verwenden von Erweiterungen die jQuery verwenden, ist das doppelte Laden der jQuery-Lib.

Das kommt daher, dass jede Erweiterung die jQuery verwendet die Lib mitliefert und diese auch lädt (könnte ja sein, dass jQuery noch nicht geladen ist)

Wenn man nun zwei Erweiterungen auf der gleichen Seite hat die jQuery verwenden, kommt es zu einem Konflikt, denn folgendes passiert:

Nehmen wir an, wir haben ein jQuery-Plugin das hans heisst, und ein jQuery-Plugin das fritz heisst, diese beiden Plugins werden von zwei verschiedenen Erweiterungen geladen, Plugin tx_hans_pi1 und tx_fritz_pi1. Beide Erweiterungen liefern eine jQuery-Lib mit und diese werden in den Header geladen, in der Reihenfolge wie die Erweiterungen auf der Seite eingefügt wurden.

Zuerst kommt das Plugin tx_hans_pi1 und lädt die jQuery-Lib und das jQuery-Plugin hans dann kommt das Plugin tx_fritz_pi1 und lädt wiederum die jQuery-Lib und das jQuery-Plugin fritz.

Somit ist die Reihenfolge der Scripts wie folgt:

1. jQuery
2. hans (das Plugin wird registriert)
3. jQuery (alle Plugins die bis jetzt registriert wurden, sind nicht mehr registriert)
4. fritz

Wenn jetzt das Plugin fritz aufgerufen wird, dann funktioniert das ohne Probleme, das Plugin hans ist durch das zweite laden der Lib wieder "entladen" worden und wirf einen Fehler "jQuery("#myid").hans is not a function"

Lösen kann man diesen Fehler folgendermassen:

1. Bei den meisten Modulen kann man das laden der jQuery-Lib unterbinden, also lädt man das jQuery mittels headerData vom fileadmin und deaktiviert jQuery in den Erweiterungen
2. Viel Erweiterungen unterstützen t3jquery, damit wird das laden der Lib automatisch unterbunden (siehe, imagecycel, imagecarousel, jf360shots etc.)

Beispiel zu der ersten Lösung

Um die erste Lösung umzusetzen, muss das Integrieren der mitgelieferten Lib unterbunden werden, da jede Erweiterung die verwendete JS-Library einbindet, muss das bei jeder Erweiterung gemacht werden, hier einige Bespiel für diverse Erweiterungen (Konstanten):

// imagecycle
plugin.tx_imagecycle_pi1.file.jQueryLibrary =
plugin.tx_imagecycle_pi2.file.jQueryLibrary =
plugin.tx_imagecycle_pi3.file.jQueryLibrary =
plugin.tx_imagecycle_pi4.file.jQueryLibrary =
plugin.tx_imagecycle_pi5.file.jQueryLibrary =

// imagecarousel
plugin.tx_imagecarousel_pi1.file.jQueryLibrary =

// jfmulticontent
plugin.tx_jfmulticontent_pi1.file.jQueryLibrary =

// jf_headerslide
plugin.jf_headerslide.file.pathToMootools =

Jetzt muss die eigene Lib von der Projektseite heruntergeladen werden, oder aus einer Erweiterung kopiert werden. Hier findet man die aktuellen Dateien von jQuery, MooTools und Prototype

Die Datei kopiert man dann in den fileadmin-Ordner und bindet diese per Typoscript in die Seite ein:

page.includeJS.file12 = fileadmin/js/jquery.js