Plusieurs instances de FCK Editor avec des feuilles de styles différentes

Virginie — Thu, 02 Jul 2009 10:57:03 +0000

Vous utilisez FCK Editor pour éditer des contenus. Vous avez sur votre site plusieurs éditeurs FCK. Mais leurs contenus seront affichés à des endroits différents, et cet affichage est régi par des styles différents. Vous voudriez donc pouvoir changer la feuille de style de l’éditeur en fonction de vos différentes instances de FCK.

Les feuilles de styles

La feuille de style utilisée par défaut est fckeditor/editor/css/fck_editorarea.css

Modifions-la, ce sera notre première feuille de style :

body
{
font-family:Verdana, Arial, sans-serif;
color:red;
}

Créons notre seconde feuille de style : fck_editorarea2.css dans fckeditor/editor/css/

body
{
font-family:Georgia, serif;
color:blue;
}

Principe général

Il s’agit de modifier la valeur de la variable FCK Editor Config['EditorAreaCSS']

Placement des éditeurs : solution 1, en Php

include_once("fckeditor/fckeditor.php") ;

//premier éditeur
$oFCKeditor = new FCKeditor('content') ;
$oFCKeditor->BasePath = './fckeditor/' ;

//la variable à modifier. Le chemin se définit par rapport au basepath
$oFCKeditor->Config['EditorAreaCSS'] = './css/fck_editorarea.css';

$oFCKeditor->Value = 'Contenu avec la première feuille de style' ;
$oFCKeditor->Height = 300 ;
$oFCKeditor->Create() ;

//deuxième éditeur
$oFCKeditor2 = new FCKeditor('content2') ;
$oFCKeditor2->BasePath = './fckeditor/' ;

//Chemin de notre seconde feuille de style
$oFCKeditor2->Config['EditorAreaCSS'] = './css/fck_editorarea2.css';

$oFCKeditor2->Value = 'Contenu avec la deuxième feuille de style' ;
$oFCKeditor2->Height = 300 ;
$oFCKeditor2->Create() ;

Placement des éditeurs : solution 2, en JavaScript (remplacement d’un textarea)

Notez que je préfère cette méthode : si l’utilisateur à JavaScript désactivé, les textarea apparaissent et sont éditables, tandis qu’avec l’éditeur placé avec Php, rien ne s’affiche.

A l’intérieur de la balise , placez le code suivant :

Bien entendu, vous devez avoir les textarea correspondants dans le html :

Contenu avec la première feuille de style
Contenu avec la deuxième feuille de style

Démonstration