Ein „WYSIWYG“-Editor ist ein Bearbeitungswerkzeug für Texte. Da der sichtbare Text im Browser nicht unbedingt mit dem im Quellcode übereinstimmt, müsste der Redakteur im einfachsten Fall den Quellcode von Hand schreiben. Dies ist aber fast immer sehr umständlich und zeitaufwändig.
Deshalb haben Software-Programmierer Werkzeuge entwickelt in denen man relativ einfach seinen Text schreiben kann und über spezielle Buttons dann nach seinen Wünschen formatieren. Die Software übernimmt dann die Formatierung. Das macht das Arbeiten mit HTML-Quellcode recht simple. Trotzdem sollte man immer wissen was man tut. Schließlich herrschen im Internet ein paar andere Regeln als im alt geliebten Druck.
FCKeditor
Ich habe mich bei REDcms für den FCKeditor entschieden. Er ist sehr einfach an die speziellen Bedürfnisse anzupassen, bietet aber trotzdem einen sehr großen Funktionsumfang.
Der Editor wurde mit JavaScript umgesetzt und ersetzt ein Eingabefeld durch den im iframe befindlichen Editor. Das Einbinden kann über verschiedene Sprachen geschehen. In meinem Fall ist das PHP 5. Die Syntax zum Einbinden des Editors bzw. die Verwendung der „Editor“-Klasse sieht dann wie folgt aus:
- $teaser = new FCKeditor(‘teaser’);
- $teaser->Value = ‘<p>Anzuzeigender Text</p>’;
- $teaser->Create();
Der übergebene Parameter beim Instanziieren der „Editor“-Klasse ist die ID des „textarea“-Tags der ersetzt werden soll. Um den Editor an den Browser zu senden kann man benutzen. In meinem Fall benutze ich die „CreateHTML()“-Methode der „Editor“-Klasse, um sie individuell in mein System einzusetzen.
Konfiguration
Die Konfiguration des Editors ist recht simple, da fast alle wichtigen Einstellungen schon vorgegeben sind. Da ich aber in meinem Fall ein paar Änderungen bzw. Anpassung vornehmen wollte, habe ich die „FCKeditor“-Klasse mit meiner „Editor“-Klasse erweitert.
Der Editor geht als erstes davon aus im Stammverzeichnis der Domain abgespeichert zu sein. Da ich mein System aber flexibel halten wollte, habe ich die „BasePath“-Eigenschaft angepasst. Auch habe ich die „ToolbarSet“-Eigenschaft auf „REDcms“ geändert. So kann ich in der Konfigurationsdatei des Editors meine eigenen Menüleisten erstellen. Auch empfand ich die Höhe des Eingabebereiches als zu klein, weswegen ich die „Height“-Eigenschaft auf 400 Pixel gesetzt habe. Zum Schluss passte ich die Konfiguration selbst mit 3 Einstellungen noch ein wenig an. Als erstes habe ich den Pfad zur Konfigurationsdatei geändert. Dann die Spracheinstellung auf deutsch geändert und zum Schluss die Verwendung des „LinkBrowsers“ aktiviert.
- class Editor extends FCKeditor
- {
- function __construct( $instanceName )
- {
- parent::__construct( $instanceName );
-
- $this->BasePath = BASEURL.‘/fckeditor/’;
- $this->ToolbarSet = ‘REDcms’;
- $this->Config["CustomConfigurationsPath"] = BASEURL.“/templates/scripts/myEditorConfig.js”;
- $this->Config['DefaultLanguage'] = ‘de’;
-
- $this->Height = 400;
-
- $this->Config['LinkBrowser'] = true;
- }
-
- function __destruct(){}
- }
myEditorConfing.js
Alle weiteren Einstellungen für die Inbetriebnahme des Editors habe ich dann in die „myEditorConfig.js“-Datei ausgelagert. So kann auch später noch relativ schnell Anpassungen vorgenommen werden.
Als erstes habe ich, wie oben schon beschrieben, meine neuen Menüleisten konfiguriert.
-
FCKConfig.ToolbarSets["REDcms"] = [
- ['Source','-','Templates'],
- ['Cut','Copy','Paste','PasteText','PasteWord','-','SpellCheck'],
- ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
- ‘/’,
- ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
- ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
- ['Link','Unlink','Anchor'],
- ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
- ‘/’,
- ['Style','FontFormat'],
- ['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
- ] ;
Als nächstes habe ich die URLs des „LinkBrowser“ angepasst. Damit habe ich die Möglichkeit Links auf Dateien, wie z.B. Bilder, Flash-Dateien oder ähnliches, schnell und komfortabel zu regeln.
-
FCKConfig.LinkBrowserURL = ‘/REDcms/ckfinder/ckfinder.html’;
- FCKConfig.ImageBrowserURL = ‘/REDcms/ckfinder/ckfinder.html?type=Images’;
- FCKConfig.FlashBrowserURL = ‘/REDcms/ckfinder/ckfinder.html?type=Flash’;
- FCKConfig.LinkUploadURL = ‘/REDcms/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files’;
- FCKConfig.ImageUploadURL = ‘/REDcms/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images’;
- FCKConfig.FlashUploadURL = ‘/REDcms/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash’;
CKfinder
Um aber auch den „LinkBrowser“ benutzen zu können, habe ich die Erweiterung „CKfinder“ des FCKeditor mit in mein System installiert. Sie erweitert den Editor um die Möglichkeit komfortabel Dateien die verlinkt werden sollen, zu managen. Die Erweiterung ist so eingestellt dass sie automatisch im Unterordner „userfiles“ des REDcms-System nach Dateien sucht. Auch hier gibt es eine Konfigurationsdatei „config.php“, aber die Anpassungen sind hier mit einer kleinen Änderung schnell erledigt. Geändert werden muss nämlich nur wieder einmal die „$baseUrl“.
- $baseUrl = ‘/REDcms/userfiles/’;
Leider konnte ich hier nicht mit meiner Konstanen „BASEURL“ arbeiten, da diese Datei separat aufgerufen wird und nicht direkt ins System eingebunden ist. Vielleicht werde ich später noch eine Routine dafür schreiben.
Downloads
