Den Funktionsumfang des FCKeditor einschränken

Die Attraktivität von Content Management Systemen wie WebsiteBaker hat eine Menge damit zu tun, dass Inhalte auf der Website sehr rasch und einfach geändert werden können - der Kunde aktualisiert seine Website selbst in wenigen Minuten und benötigt hierfür keine speziellen Kenntnisse.

Der FCKeditor bzw. sein Nachfolger, der CKeditor, ist der Standardeditor von WebsiteBaker und kommt somit bei den meisten Installationen zum Einsatz. Dieser WYSIWYG Editor verfügt über alle Grundfunktionen einer modernen Textverarbeitung und zusätzlich über eine ganze Reihe von Funktionen, die spezifisch für Webseiten sowie für WebsiteBaker sind, z.B. zum Einfügen von internen und externen Links oder für den Zugriff auf Droplets.

Die Toolbar des Editors streckt dem Anwender stolz über 60 Funktionsschalter und Auswahllisten entgegen und wartet nur darauf, angewendet zu werden. Selbst gewiefte Webworker benötigen diese Vielfalt jedoch nur in den seltensten Fällen. Anwender, die keine Formulare oder verschachtelte Tabellen mit dem Editor erstellen und eher einfache Ziele verfolgen, nämlich Texte und Bilder einzupflegen sowie zu strukturieren, werden von dem Überangebot eher irritiert und abgelenkt.

Die Standard Toolbar des FCKeditor:

Die Toolbar bietet einen netten Fallstrick an, es gibt nämlich gleich zwei Buttons für das Einfügen von Bildern:

Der linke Button dient allerdings dem Erstellen von sogenannten Bildbuttons in Formularen also Schaltern, die aus einer Grafik bestehen. Es läßt sich ohne Probleme mit dem Bildbutton ein "normales" Bild einfügen, dieses wird im Browser auch angezeigt, dem aufmerksamen Betrachter fällt lediglich auf, dass sich der Mauszeiger beim Überfahren des Bildes in einen Linkcursor verwandelt. Problematisch wird es, sobald man das Bild verlinkt - dieser Link wird zumindestens im Internet Explorer nicht funktionieren, diesen Fehler aufzuspüren ist eine nette Beschäftigung...

Ein weiteres Problem ist, dass häufig gar nicht gewünscht ist, dass der Anwender Schriftgößen, -Stile sowie Farben und Hintergründe ändert - er soll sich auf die vorgegebenen Formate beschränken, damit das Aussehen der Website einheitlich bleibt.

Es darf für den Alltagsgebrauch also ruhig etwas weniger Toolbar her. Will man sich auf das tatsächlich Notwendige beschränken werden die folgenden Funktionen bzw. Schalter benötigt:[[show_section?id=248]]

• Anzeige des Quellcodes (wobei man auch hier über die Notwendigkeit nachdenken darf)
• Ausschneiden
• Kopieren
• Einfügen
• Als Text einfügen
• Aus Microsoft Word einfügen
• Rückgängig
• Wiederherstellen
• Alles auswählen
• Formatierungen entfernen
• Format auswählen
• Fett
• Kursiv
• Unterstrichen
• Tiefgestellt
• Hochgestellt
• Numerierte Liste
• Liste
• Block einrücken
• Block ausrücken
• Linksbündig
• Zentriert
• Rechtsbündig
• Blocksatz
• Droplet einfügen
• WebsiteBaker Link einfügen/bearbeiten
• Link einfügen/bearbeiten
• Link entfernen
• Bild einfügen/bearbeiten
• Flash einfügen/bearbeiten
• Tabelle einfügen
• Sonderzeichen

Das ist immer noch eine Menge, trotzdem ist der Funktionsumfang auf die Hälfte geschrumpft und die Toolbar wirkt sofort sehr viel übersichtlicher (Abbildung: CKEditor):

Wie läßt sich die Toolbar bzw. Symbolleiste anpassen?

Die Vorgehensweise ist bei den beiden Editoren unterschiedlich, zunächst der FCKeditor.

Toolbar des FCKeditor anpassen:

Beim FCKeditor müssen zwei Dateien verändert werden. Zum Bearbeiten der Dateien verwenden Sie entweder den Addon File Editor (AFE) oder Sie laden sich die Dateien per FTP herunter, bearbeiten sie mit einem Editor und laden Sie anschließend wieder hoch.

Öffnen Sie die Datei /modules/fckeditor/wb_config/wb_fckconfig.js.

Kopieren Sie die Zeilen 99 bis 119 und fügen sie diese unterhalb, in der Zeile 121 wieder ein:

// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//  original FCKEditor toolbar
// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   FCKConfig.ToolbarSets["WBToolbar"] = [
	['Source','DocProps','-','NewPage','Preview','-','Templates'],
	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
    ['FitWindow','ShowBlocks', '-', /* 'SyntaxHighLight2', */ /* 'flvPlayer', */ '-','About'],
	'/',
	['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton',
         'HiddenField'],['TextColor','BGColor'],
	['WBDroplets','WBModules','Link','Unlink','Anchor'],
	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	'/',
	['Style','FontFormat','FontName','FontSize']  // No comma for the last row.
] ;
 

Benennen Sie den ToolbarSet um, z.B. von "WBToolbar" in "KundenToolbar":

   

   FCKConfig.ToolbarSets["KundenToolbar"] = [

Nun können Sie alle Funktionen entfernen, die sich nicht mehr in der Toolbar befinden sollen. Thematisch zusammengefasste Funktionen sind jeweils von eckigen Klammer umschlossen, mit /* und */ umschlossene Einträge sind auskommentiert und werden nicht angezeigt, mit '/' erzwingen Sie einen Zeilenumbruch.

Der fertige Eintrag für die KundenToolbar könnte so aussehen (entspricht der obigen Abbildung):

// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//  FCKEditor Einfache Toolbar fuer Kunden
// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   FCKConfig.ToolbarSets["KundenToolbar"] = [
	['Source'],
	['Cut','Copy','Paste','PasteText','PasteWord'],
        ['FitWindow','ShowBlocks', '-','About'],
	['WBDroplets','WBModules','Link','Unlink','Anchor'],
	['Image','SpecialChar'],
	'/',
	['FontFormat'],
        ['Bold','Italic','Underline','Subscript','Superscript'],
	['OrderedList','UnorderedList'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Undo','Redo','RemoveFormat']
] ;
 

Jetzt müssen Sie dem FCKeditor noch mitteilen, dass er künftig die KundenToolbar verwenden soll. Hierzu öffnen Sie die Datei /modules/fckeditor/include.php und suchen nach dem Eintrag:

   $oFCKeditor->ToolbarSet = 'WBToolbar';        // toolbar defined in my_fckconfig.js

(in Zeile 68) und ändern Sie 'WBToolbar' in 'KundenToolbar':

   oFCKeditor->ToolbarSet = 'KundenToolbar';    // toolbar defined in my_fckconfig.js

Speichern Sie die Dateien, fertig!

Toolbar des CKEditor anpassen:

Beim CKEditor ist die Vorgehensweise etwas anders als beim FCKeditor.

Öffnen Sie die Datei /modules/ckeditor/wb_config/custom/custom.wb_ckconfig.js.

Kopieren Sie die Zeile 34 und fügen Sie diese unterhalb der Zeile 35 wieder ein:

    config.toolbar_WB_Full     = [['Source','-','Preview','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Maximize','ShowBlocks','-','About'],'/',['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['wbdroplets','wblink','Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],'/',['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['YouTube', 'Flowplayer']];

Benennen Sie die Toolbar um, z.B. von config.toolbar_WB_Full in config.toolbar_Kunden:

    config.toolbar_Kunden     = [['Source','-','Preview','Templates'],['Cut','Copy','Paste',

Nun entfernen Sie - genau wie beim FCKeditor beschrieben - alle Funktionen, die nicht mehr in der Toolbar angezeigt werden sollen.

Um die toolbar_Kunden zu aktivieren, ändern Sie in Zeile 38 den Eintrag für die Toolbar:

    // The default toolbar. Default: WB_Full
    config.toolbar          = 'toolbar_Kunden';

und speichern die Datei unter dem neuen Namen /modules/ckeditor/wb_config/custom/wb_ckconfig.js ab, d.h. ohne das führende custom. - durch das Entfernen von custom. vor wb_ckconfig.js wird der CKEditor angewiesen, künftig die von Ihnen angepasste Konfiguration zu laden und nicht die Standardkonfiguration.

Fertig!

Bitte helfen Sie mit, diese Anleitung zu verbessern!

Ralf Hertsch, 03.09.2010