Vous avez un menu déroulant en CSS et une animation Flash en dessous, et quand vous déroulez votre menu, celui-ci passe sous l’animation… Pas de panique, voici une solution.
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.
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;
}
Il s’agit de modifier la valeur de la variable FCK Editor Config['EditorAreaCSS']
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() ;
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>
Vous pouvez voir la démo ici.