Zum Inhalt

CKEditor Einbindung für WBB verbessern

Beim Woltlab Burning Board ist zwar standardmäßig der CKEditor integriert (jedenfalls noch), jedoch ist die Einbindung eher schlecht umgesetzt. Probleme werden bei der Semantik des HTML-Code sichtbar. So werden weder Überschriften noch Absätze im Textfluss eingesetzt. SEO-Technisch eine Katastrophe. Daher diese Anleitung um das Problem zu umgehen.

Verwendete Systeme

  • WBB 4.0.7
  • WCF 2.0.7 pl 1
  • CKEditor 4.4.3 Standard

Das Problem der Einbindung

Bei der Einbindung des CKE in das WBB (Woltlab Burning Board) wurde kaum auf Anpassbarkeit geachtet, die Konfiguration des CKE wurde komplett zerrissen so das eine nachträgliche Konfiguration nahezu unmöglich wurde. Da sogar der Kern des Editors verändert wurde, hab ich mich dazu entschieden den Editor komplett neu einzubinden.

Versteht mich bitte nicht falsch, ich will hier keineswegs das WBB schlecht machen. Ich mag die Forensoftware und das dahinter stehende WCF (Woltlab Community Framwork). Lediglich mit der Einbindung des Editors bin ich unzufrieden. Ich kann auch nicht verstehen warum man noch immer an diesen BBCodes festhält. Mit dem Einsatz eines ausgereiften Editors werden BBCodes komplett überflüssig.

Einbindung ins Template

Da ich mich mit dem WCF noch zu wenig gut auskenne um da kurz mal ein Plugin zu schreiben, hab ich die Einbinung lediglich über das Template-System gelöst. Das Gute dabei ist, wenn bei der WBB-Version 4.2 der CKE durch den Editor “Redactor” ersetzt wird, behält man so den bewährten CKE.Als erstes sollte man im ACP (Admin Control Panel) den aktuellen Stil kopieren, um bei Bedarf schnell auf den ursprünglichen Zustand zurück kehren zu können. Danach müssen wir noch ein paar Templates kopieren. Im ACP unter “Dahrstellung->Templates” folgende Templates in den neuen Stil kopieren: wysiwyg.tpl und messageFormSettings.tpl – das sind die zwei Dateien welche wir nachher anpassen müssen.Zuerst holen wir uns aber den aktuellen CKEditor. Ich habe mich für die Standard-Version entschieden. Die Dateistruktur habe ich in einen neuen Ordner im Root-Verzeichnis gepackt um vor Updates sicher zu sein. Sieht wie folgt aus: /specialFiles/ckeditorNun die Datei wysiwyg.tpl öffnen und den gesamten Inhalt löschen bzw. durch folgenden ersetzen:
<script type="text/javascript" src="/specialFiles/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/specialFiles/ckeditor/adapters/jquery.js"></script>
<script data-relocate="true">
//<![CDATA[
    jQuery(document).ready(function() {

        var editorName = '{if $wysiwygSelector|isset}{$wysiwygSelector|encodeJS}{else}text{/if}';
        var callbackIdentifier = 'CKEditor';
        if (editorName != 'text') {
            // editieren

            callbackIdentifier += '_' + editorName;
            CKEDITOR.disableAutoInline = true;

        } else {
            // erweitert editieren und verfassen

            CKEDITOR.replace(editorName, {
                //customConfig: '/_data/cke/myConfig.js',
                //toolbar: 'min',
                //height: 280,
                //format_tags: 'p',
                //removeButtons: 'Styles,Anchor'
            });
        }
    });
//]]>
</script>

Zuerst binden wir die ckeditor.js ein, danach folgt die eigentliche Einbindung. In der IF-Anweisung unterscheiden wir zwischen dem schnellen Editieren und dem Verfassen eines Beitragen bzw. dem erweitertem Editieren. Im zweiten Teil lassen sich auch noch Konfigurationen vornehmen. Die Hauptkonfiguration erfolgt aber wie üblich in der config.js im Stammverzeichnis vom CKE.

Da im WBB standardmäßig kein HTML erlaubt ist habe ich hier etwas getrickst. Dazu die Datei messageFormSettings.tpl öffnen und den Inhalt durch folgenden ersetzen:

<fieldset id="settings" class="settingsContent tabMenuContent container containerPadding">
    <dl class="wide">
        {if $__wcf->getSession()->getPermission($permissionCanUseBBCodes)}
            <dt></dt>
            <dd>
                <label><input id="preParse" name="preParse" type="checkbox" value="1"{if $preParse} checked="checked"{/if} /> {lang}wcf.message.settings.preParse{/lang}</label>
                <small>{lang}wcf.message.settings.preParse.description{/lang}</small>
            </dd>
        {/if}
        {if MODULE_SMILEY && $__wcf->getSession()->getPermission($permissionCanUseSmilies)}
            <dt></dt>
            <dd>
                <label><input id="enableSmilies" name="enableSmilies" type="checkbox" value="1"{if $enableSmilies} checked="checked"{/if} /> {lang}wcf.message.settings.enableSmilies{/lang}</label>
                <small>{lang}wcf.message.settings.enableSmilies.description{/lang}</small>
            </dd>
        {/if}
        {if $__wcf->getSession()->getPermission($permissionCanUseBBCodes)}
            <dt></dt>
            <dd>
                <label><input id="enableBBCodes" name="enableBBCodes" type="checkbox" value="1"{if $enableBBCodes} checked="checked"{/if} /> {lang}wcf.message.settings.enableBBCodes{/lang}</label>
                <small>{lang}wcf.message.settings.enableBBCodes.description{/lang}</small>
            </dd>
        {/if}
        
            <dt style="display: none"></dt>
            <dd style="display: none">
                <label><input id="enableHtml" name="enableHtml" type="checkbox" value="1" checked="checked" /> {lang}wcf.message.settings.enableHtml{/lang}</label>
                <small>{lang}wcf.message.settings.enableHtml.description{/lang}</small>
            </dd>
        
        {if MODULE_USER_SIGNATURE && $showSignatureSetting && $__wcf->user->userID}
            <dt></dt>
            <dd>
                <label><input id="showSignature" name="showSignature" type="checkbox" value="1"{if $showSignature} checked="checked"{/if} /> {lang}wcf.message.settings.showSignature{/lang}</label>
                <small>{lang}wcf.message.settings.showSignature.description{/lang}</small>
            </dd>
        {/if}
        
        {event name='settings'}
    </dl>
</fieldset>

Nach der Abfrage {if $__wcf->getSession()->getPermission($permissionCanUseHtml)} setzen wir die enthaltenen Elemente auf display:none und das enthaltene Input-Feld auf checked=”checked”. Damit erreichen wir dass HTML immer erlaubt ist.

Nun muss nur noch die Konfiguration des CKE angepasst werden.

Problem

Bei dieser Vorgehensweise gibt es ein kleines Problem. Im WBB erfolgt die Serverseitige Eingabeüberprüfung über die BBCodes. Nun umgehen wir diese aber komplett. Wir können zwar in der CKE-Konfiguration alles angeben was erlaubt oder nicht erlaubt ist, jedoch sollte auch eine Serverseitige Überprüfung erfolgen. Dazu wäre jedoch ein Plugin notwendig. Da es sich in meinem Fall um ein überschaubares Forum handelt verzichte ich darauf.

Weiterführende Links:

Veröffentlicht inLösungenTipp's

Neueste Beiträge

Themen: