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 <head>, placez le code suivant :
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
//premier éditeur
var oFCKeditor = new FCKeditor( 'toto' ) ;
oFCKeditor.BasePath = "./fckeditor/" ;
//la variable à modifier. Le chemin se définit par rapport au basepath
oFCKeditor.Config['EditorAreaCSS'] = './css/fck_editorarea.css';
oFCKeditor.Height = 300 ;
oFCKeditor.ReplaceTextarea() ;
//deuxième éditeur
var oFCKeditor2 = new FCKeditor( 'titi' ) ;
oFCKeditor2.BasePath = "./fckeditor/" ;
oFCKeditor2.Height = 300 ;
//Chemin de notre seconde feuille de style
oFCKeditor2.Config['EditorAreaCSS'] = './css/fck_editorarea2.css';
oFCKeditor2.ReplaceTextarea() ;
}
</script>
Bien entendu, vous devez avoir les textarea correspondants dans le html :
<textarea name="toto" id="toto" rows="8" cols="30">Contenu avec la première feuille de style</textarea> <textarea name="titi" id="titi" rows="8" cols="30">Contenu avec la deuxième feuille de style</textarea>
Démonstration
Vous pouvez voir la démo ici.
0 Comments.