WYSIWYG mit FCK und DotNetNuke

Ein etwas soliderer Titel wäre sicherlich:

FCK Editor – Individuelle Editoreinstellungen in DotNetNuke – Teil 1

Zur Systemumgebung die ich verwendet habe um diesen Beitrag zu erstellen, sei folgendes gesagt:

Die Einstellungen sind in einem System mit installiertem DotNetNuke 4.5.3 durchgeführt. Es sollte aber keine Änderung zu neueren Versionen geben. Den letzten Test habe ich mit der Version 4.7.0 durchgeführt. Ebenso sollten die Einstellungen bereits bei älteren Versionen funktionieren die als Standard Editor den FCK enthalten haben.

Vorab eine kurze Beschreibung des in diesem Beitrag behandelten Themas:

Nachdem man DotNetNuke mit seinem Standard Text Editor FCK installiert hat, stellt man ziemlich schnell und ebenfalls ernüchternd fest, dass bei der Eingabe und Formatierung von Texten im Editor Fenster des FCK leider während der Eingabe nicht die im Portal oder den Skins verwendeten CSS Formatierungen angewendet werden. Der Text sieht also nicht so aus, wie er später auf der Web Seite dargestellt wird.

Was wäre also wünschenswerter, als dass man bei der Eingabe des Textes auch die endgültige Formatierung (WYSIWYG) angezeigt bekommt.

WYSIWYG steht für What You See Is What You Get (oder mehr darüber auf Wikipedia)

Der FCK Editor Provider (Version 1.00.09) für DotNetNuke selbst stellt schon alles notwendige an Funktionen zur Verfügung was man benötigt um die entsprechende Anforderung umzusetzen (wenigstens so gut wie).

Anschließend nun die Beschreibung der Schritte die notwendig sind, um das Ziel WYSIWYG zu erreichen.

Schritt 1 (Die Vorbereitung):

Zuerst bereiten wir eine CSS Datei vor, welche alle von uns verwendeten CSS Definitionen enthält. Oder anders ausgedrückt, wir erstellen eine leere Datei (zum Beispiel mit dem Namen FCK.CSS) und kopieren von dem Skin.css und dem Portal.css oder wo auch immer wir CSS Definitionen vorgenommen haben, die Definitionen in diese CSS Datei. Diese Datei speichert man am besten im Portal Root ab. Wenn das geschehen ist, sind bereits alle Vorbereitungen abgeschlossen und wir können uns nun den Einstellungen widmen, die dann dazu führen, dass unsere in der Datei FCK.CSS Definierten CSS Formate im Editor Bereich des FCK Editor verwendet wird.

Schritt 2 (Einstellungen durchführen):

Schauen wir uns dazu mal einen Bildschirmausschnitt an (In diesem Ausschnitt sehen wir ein geöffnetes Editorfenster):

imageWenn wir uns die linke untere Ecke des Bildschirmausschnitt’s näher betrachten, dann sehen wir dort unter anderem einen Link mit der Beschriftung:

„Individuelle Editoreinstellungen“

Wenn wie diesen Link anklicken, wird das nachfolgend dargestellte Fenster geöffnet. Mal sehen, was es da zum Einstellen gibt.

 

imageIch möchte an dieser Stelle nun nicht alle möglichen Optionen besprechen, sondern nur diese erwähnen, welche Notwendig sind um die gewünschte WYSIWYG Darstellung zu ermöglichen.

Die Einstellung, worauf es uns in diesem Beitrag ankommt, befindet sich in der Mitte des Bildschirmausschnitt’s und hat den Namen „CSS für Eingabebereich“

Guckst du hier image

 

 

Öffnen wir doch mal diesen Bereich der Editor Optionen und betrachten uns das einmal näher:

image

„CSS Generator“: In der Beschreibung dazu heißt es: „Diese Option legt fest wie die CSS Datei generiert wird“. Egal was auch immer das heißen mag, wir müssen als Option URL auswählen.

Unter „Individuelle CSS Datei“ finden wir den Linktyp. Bei Linktyp wählen wir Datei (in Ihrem Portal) aus.

Nun können wir mit „Dateipfad“ und „Dateiname“ die von uns vorbereitete Datei, in unserem Fall die Datei FCK.CSS im Portal Root, auswählen.

Und nun ganz wichtig, guckst du hier: image

Am unteren Rand des Fensters kann man für die eben durchgeführten Einstellungen noch angeben ob diese Einstellungen nur für dieses eine speziellen Editor Fenster (Instanz) oder für alle Editor Fenster dieses Moduls (Modul) oder für alle in diesem Portal (Portal)verwendeten Editor Fenster gelten soll.

Bei unseren Einstellung handelt es sich um eine Einstellung die wir für das ganze Portal vornehmen möchte, also müssen wir, bevor wir die Einstellungen speichern noch in der Auswahlbox auf Portal stellen und dann den Link übernehmen betätigen.

Fertig – Nun sollten die richtigen CSS Format bereits während der Eingabe von Texten verwendet werden und wir haben damit unserem Wunsch nach WYSIWYG erfüllt.

Noch eine Anmerkung zum Schluß:

Sollte, nachdem die von uns erstellte Datei FCK.CSS nicht in der Auswahlbox „Dateiname“ zu sehen, sein, kann dies daran liegen, dass die Synchronisation zwischen der Dateistruktur und der Datenbank noch nicht, oder fehlerhaft war.

Um Abhilfe zu schaffen, genügt es meistens schon:

Einfach den Dateimanager zu öffnen und den Link „Ordner Synchronisieren“ anzuklicken.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.