Installation et paramétrage de l’éditeur de texte FCKEditor - créer une newsletter PHP avec Dreamweaver (part 15)
NB : suite à la demande de plusieurs internautes, nous allons installer l’éditeur de texte FCKEditor plutôt que TinyMCE contrairement à ce que nous disions dans notre billet du 20 avril 2007.
Allez télécharger FCKEditor à l’adresse suivante : http://www.fckeditor.net/
Décompressez le zip dans votre répertoire contenant les fichiers d’administration. Vous avez maintenant un sous-répertoire /fckeditor/ dans votre répertoire /admin/.
Reprenez votre formulaire d’insertion en mode code et dans le head collez les lignes suivantes :
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor1 = new FCKeditor( 'contenu' ) ;
var oFCKeditor2 = new FCKeditor( 'breves' ) ;
oFCKeditor1.ToolbarSet = 'Basic' ;
oFCKeditor1.BasePath = "fckeditor/" ;
oFCKeditor1.ReplaceTextarea() ;
oFCKeditor2.ToolbarSet = 'Basic' ;
oFCKeditor2.BasePath = "fckeditor/" ;
oFCKeditor2.ReplaceTextarea() ;
} </script>
Prévisualisez votre page en local, vous devez maintenant voir apparaître FCK Editor en lieu et place des bêtes textareas !
Important : si vous utilisez en local EasyPHP avec Windows, le chemin d’accès au répertoire de FCKEditor n’est pas sensible à la casse majuscule / minuscule. En revanche sur un serveur Apache il faut impérativement respecter la casse. Ce problème est une cause fréquente de bug sur serveur distant quand FCK fonctionne parfaitement en local !
Nous allons maintenant paramétrer FCK Editor.
En écrivant la ligne javascript oFCKeditor1.ToolbarSet = 'Basic' ; nous avons indiqué à FCK d’utiliser la template de base, celle qui contient le moins d’outil. Nous allons changer les 2 lignes faisant référence à cette template en remplaçant Basic par MaToolBar.
Ouvrez maintenant le fichier fckconfig.js qui se trouve dans le répertoire /fckeditor/. Trouver et recopier ces lignes :
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;
Changer le mot Basic entre guillemet pour MaToolBar. Vous allez par ailleurs rajouter quelques éléments à votre choix sans oublier bien sûr les styles qui vont servir à votre mise en page de la newsletter dans le client messagerie. Vous obtenez quelque chose qui doit ressembler à ça :
FCKConfig.ToolbarSets["MaToolbar"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','TextColor','-','Style','FontFormat','-','Source','About']
] ;
Nous allons maintenant intégrer nos propres feuilles de styles. Ouvrez votre fichier template.php dans lequel se trouve votre mise en page de votre newsletter. Copier tous les styles concernant les balises p, h1 et h2. Allez maintenant dans fckeditor\editor\css et ouvrez le fichier fck_editorarea.css. Coller vos styles et enregistrez.
A la racine du répertoire fckeditor\ copier le fichier fckstyles.xml et enregistrez-le en fckstyles2.xml pour garder une sauvegarde du fichier d’origine (par précaution !). Ouvrez fckstyles.xml dans Dreamweaver et remplacer tout ce qu’il y a entre les balises <Styles> par ceci :
<Styles>
<Style name="edito" element="p">
<Attribute name="class" value="edito" />
</Style>
<Style name="titre article gauche" element="h1">
<Attribute name="class" value="article1" />
</Style>
<Style name="texte article gauche" element="p">
<Attribute name="class" value="article2" />
</Style>
<Style name="titre brève droite" element="h2">
<Attribute name="class" value="breves2" />
</Style>
<Style name="texte breve droite" element="p">
<Attribute name="class" value="breves2" />
</Style>
</Styles>
Voici pour ceux qui veulent personnaliser la valeur des attributs avec leur propres valeurs :
- name="xxx" : nom du styles dans le menu correspondant de l’interface fckeditor ;
- element="xxx" : balise html concernée ;
- name="class" : type de l’attribut de balise;
- value="xxx" : valeur de l’attibut de balise.
Votre intégration et paramétrage de FCKEditor est donc maintenant terminée. Quand vous prévisualisez dans le navigateur, vous devez obtenir ceci :
Notre prochaine étape est la contruction de la preview de la newsletter.
Ce billet fait partie du tutorial dreamweaver newsletter
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)