Extensions et tutorials gratuits disponibles sur internet pour Dreamweaver. PHP et ASP. Classement thématique. Blog référencé par Adobe Communauté Dreamweaver.

Dreamweaver gratuit

Installation et paramétrage de l’éditeur de texte FCKEditor - créer une newsletter PHP avec Dreamweaver (part 15)

30 mai 2007 | Posté par caroder à 20:25

Bookmark and Share

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 :

news19

Notre prochaine étape est la contruction de la preview de la newsletter.

Ce billet fait partie du tutorial dreamweaver newsletter

Catégorie : | Commentaires [33] | Permalien [#]

Commentaires

  • Génial !

    Sympa je vais try tout sa

    Posté par Greg | 10 avril 2008 à 15:14
  • Problème install fckeditor

    Salut je ne sais pas si tu aides .
    Car j'ai suivi à la lettre ton tutorial pour installer fckeditor.
    Cela ne marche pas.
    J'ai suivi à la lettre le tutorial officiel de fckeditor et cela n'a pas marché.

    Posté par xxx | 16 avril 2008 à 06:17
  • Réponse dmx

    As-tu bien vérifié la graphie du nom de dossier FCKEditor (sans maj. comme indiqué ci-dessus) ?

    Posté par caroder | 16 avril 2008 à 06:20
  • RE

    Bah oui j'ai bien vérifier.
    Mais je désespérement tellement que j'ai essayé d'installer tiny et la non plus sa ne marche pas.
    Pourtant je suis en local sous WAMP mais je ne pense pas que cela joue..

    Posté par saturn1 | 16 avril 2008 à 11:35
  • As-tu utilisé l'intégration via javascript (celle du tuto ci-dessus) ou PHP ?
    PAr ailleurs, dans quel répertoire se trouve le répertoire FCKeditor ?

    Posté par caroder | 16 avril 2008 à 20:56
  • Modif taille cadre de texte géré

    Bonjour,
    Je tente de paramétrer fckeditor. Mon souci de ce soir et de définir la taille du cadre dans lequel défile le texte (la page) que je mets à jour. Où est cette information ? Merci.

    Posté par jcletang | 25 avril 2008 à 23:20
  • @ jcletang

    Si je comprends bien ta question, la largeur du "cadre" est déterminée dans le HTML par la largeur du ...

    Posté par dreamweaver | 27 avril 2008 à 08:30
  • installation fckeditor

    Impeccable en local. Je me suis creusé les méninges depuis des semaines sans trouver. Votre solution est élégante, simple et efficace. Bravo et bonne réussite.

    Posté par ZINE | 04 juin 2008 à 23:08
  • Merci !!!

    Excellent tuto, je trouve mon bonheur sur ce blog !!! J'espère vite découvrir de nouvelles choses.

    Posté par ludwig_pop | 30 juin 2008 à 13:13
  • super tuto

    super tuto mais j'ai 1 question de noob... comment ajouter l'option ajout d'image et centré ?

    meeeerciiii

    Posté par edouard | 09 juillet 2008 à 12:16
  • @ Edouard

    Il suffit pour cela d'ajouter les options souhaitées en les "repiquant" dans le fichier fckconfig.js dans la Toolbar complète...

    Posté par dreamweaver | 16 juillet 2008 à 19:08
  • installation fckeditor

    salut
    tout le monde
    j'aimerai me servir de fckeditor
    mais sur le tuto vous dites
    qu'aprés decompression
    on doit reprendre au formulaire d'insertion
    il est où ce formulaire , ds fckeditor ou
    on doit créer un formulaire puis s'en servir?
    merci de votre aide

    Posté par riahana | 08 août 2008 à 16:16
  • les styles ne changent pas

    Salut et merci beaucoup pour ce tuto.
    J'ai un problème,les styles ne changent pas, ce sont encore les styles par défaut, hors je n'ai laissé que les miens dans le fichier fck_editorarea.css, comment est-ce possible??

    Merci d'avance pour votre aide.

    Posté par georgie | 29 octobre 2008 à 15:44
  • UserFilesAbsolutePath

    Comment installer les codes pour le serveur internet:

    En local cela fonction super bien ainsi:

    $Config['UserFilesPath'] = 'http://localhost/Allegro_2009_int/dossier/' ;
    $Config['UserFilesAbsolutePath'] = 'c:\wamp\www\Allegro_2009_int\dossier\\' ;

    Sur le serveur si je mets cela:

    $Config['UserFilesPath'] = 'http://www.xavier-allegro.ch/dossier/' ;
    $Config['UserFilesAbsolutePath'] = 'http:\\xavier-allegro.ch\dossier\\' ;

    CELA NE FONCTION PAS !!!!

    Quelqu'un peut-il m'aider ????? MERCI

    Posté par broccard | 20 février 2009 à 19:39
  • Réponse à broccard

    $Config['UserFilesAbsolutePath'] = 'http:\\xavier-allegro.ch\dossier\\' ;

    La ligne ci-dessus n'indique pas le chemin absolu ! Pour connaître ton chemin absolu :

    Crée un fichier appelé "real_path.php".

    Mets la ligne de code suivante dans le fichier :


    Envoie ce fichier sur le serveur via FTP dans le dossier dont tu souhaites connaître le chemin absolu.

    Ouvre ton navigateur et lance ce fichier PHP. Il donne le chemin absolu !

    Posté par Caroder | 21 février 2009 à 22:00
  • UserFilesAbsolutePath

    Super c'est résolu.

    Connais-tu par hasard comment on intègre CKFinder dans FCKeditor ???

    Merci

    Posté par broccard | 24 février 2009 à 23:29
  • rien ne fonctionne

    salut tout le monde;
    g essayé d'integrer fckeditor suivant ce tuto mai malheureusemen rien ne fonctionne

    Posté par maya | 22 mars 2009 à 20:30
  • problème résolu (pour ma part)

    Bonjour à tous,

    voilà, après de longues heures de recherches pour réussir à insérer FCKeditor, j'ai enfin réussi!

    Avec le code qui est proposé au-dessus j'ai dû modifier un petit quelque chose:
    oFCKeditor1.ToolbarSet = 'Basic' ;
    devient:
    oFCKeditor1.ToolbarSets = 'Basic' ; AVEC UN 'S' A ToolbarSets!

    J'ai lu les commentaires et ceux qui n'ont pas réussi à faire fonctionnent fckeditor ont peut-être le même problème que moi.

    Maintenant ça fonctionne parfaitement bien chez moi

    A+

    Posté par Math | 29 juin 2009 à 17:31
  • Valide pour moi

    Merci Math.
    J'ai de nouveau vérifié : le code que j'ai indiqué ici est bien valide pour moi à la fois sur serveur de dev et de prod.
    Mais peut-être la version de FCKEditor entre la date de création de ce tuto et aujourd'hui a-t-elle changé...

    Posté par Caroder | 29 juin 2009 à 20:57
  • probleme

    Salut les gens,

    voila, j'ai un petit soucis. J'ai fait comme indiqué pour utiliser fckeditor mais j'ai un message d'erreur, enfin une popup windaube :

    ERROR: the textarea width id or name set to "breves" was not found


    On est obligé de nommer spécialement nos textarea (j'ai déjà tout fait mon backoff, et j'ai pas envie de tout renommer sous prétexte que monsieur préviens qu'il peut pas charger parce que le nom est pas là).

    De plus, je croyaisqu'il y avait de base d'activé l'upload de fichier d'image ? or il ne le montre pas dans la page qui marche bien... :/

    Posté par tavax | 21 juillet 2009 à 21:59
  • probleme

    Salut les gens,

    voila, j'ai un petit soucis. J'ai fait comme indiqué pour utiliser fckeditor mais j'ai un message d'erreur, enfin une popup windaube :

    ERROR: the textarea width id or name set to "breves" was not found


    On est obligé de nommer spécialement nos textarea (j'ai déjà tout fait mon backoff, et j'ai pas envie de tout renommer sous prétexte que monsieur préviens qu'il peut pas charger parce que le nom est pas là).

    De plus, je croyaisqu'il y avait de base d'activé l'upload de fichier d'image ? or il ne le montre pas dans la page qui marche bien... :/

    Posté par tavax | 21 juillet 2009 à 22:02
  • Hauteur textarea

    Bonjour,

    Je suis content d'avoir trouvé ce tutoriel qui me permet d'utiliser cet outil.
    Par contre je plante sur la manière de définir la hauteur du textarea (aucun effet avec le height du html).
    Merci d'avance

    Posté par pascalbm | 10 août 2009 à 13:50
  • Hauteur textarea

    Bonjour,

    Je suis content d'avoir trouvé ce tutoriel qui me permet d'utiliser cet outil.
    Par contre je plante sur la manière de définir la hauteur du textarea (aucun effet avec le height du html).
    Merci d'avance

    Posté par pascalbm | 10 août 2009 à 14:11
  • FCKEditor est mort !

    Ce tutoriel est un vrai bonheur !
    Cependant, il est intéressant de préciser que FCKEditor est mort, pour laisser place à CKEditor (version 3), plus moderne encore, dont l'intégration est différente de ce qui est enseigné dans ce tuto.
    Toutes les infos utiles se trouvent là :
    http://docs.cksource.com/
    En attendant, un grand bravo à l'auteur de "Dreamweaver Gratuit" !! Ce site est génial !

    Posté par Grégory | 14 octobre 2009 à 16:46
  • beau travail!

    Je tiens à remercier toute personne ayant collaborer à ce tuto il est vraiment super

    Posté par tima | 11 janvier 2010 à 19:50
  • hauteur de la zone texte

    bonjour à tous
    j'ai bien suivi ce tuto et ça a marché j'ai juste un petit souci qui a déjà été posté mais il est resté sans réponse c'est la hauteur du textarea que je n'arrive pas à modifier le html ne fait rien du tout je crois qu'il est annulé par le code du fckeditor est ce possible de nous dire comment faire pour y remédier
    Merci

    Posté par tima | 18 janvier 2010 à 22:20
  • elmaghraoui

    cv b1 o qoi

    Posté par moussa el maghra | 27 février 2010 à 21:50
  • parametrage

    Bonjour tout le monde,
    Y aurait quelqu'un qui sera comment activer la suppression des styles et la suppression du contenu MSOword automatiquement: des le collage du contenu .
    Merci

    Posté par behmene | 02 mars 2010 à 10:51
  • Instalation

    Salut. merci pour le tuto

    Une question: pour drupal7, dans quel répertoire il faut mètre le dossier FCKeditor 3.5.2?
    Et a ce qui concerne la méthode d'installation est ce qu'il sera la même?

    merci.

    Posté par krok | 03 avril 2011 à 03:39
  • S'il vous plaît

    S'il vous plaît. vous pouvez répandre a ma question?
    Merci.

    Posté par krok | 08 avril 2011 à 19:59
  • Petite correction à effectuer

    la nécessité du respect de la casse dans les noms de fichiers n'est pas dû au serveur apache, mais au système d'exploitation Linux.

    Posté par dominique | 29 avril 2011 à 11:06
  • ravi

    c'est hyper sympa ce programme

    Posté par coco | 09 juin 2011 à 21:29
  • Nouvelle solution

    Après avoir essayé en vain de configurer FKEditor, je me suis apperçu qu'il s'agissait plutôt maintenant de ckeditor.
    Sur le site de l'auteur à http://docs.ckeditor.com/#!/guide/dev_installation j'ai vu "CKEditor Quick Start Guide" Guide rapide du démarrage de CKEditor.
    J'ai suivi les recommandations et cela a marché en quelques secondes :

    To start, create a simple HTML page with a element in it. You will then need to do two things:

    1 - Add a call to the CKEditor script in the element of your page.
    2 - Use the CKEDITOR.replace() method to replace the existing element with CKEditor.

    Exemple :





    A Simple Page with CKEditor






    Ceci est ma zone de texte à remplacer avec CKEditor.


    //Remplacer le avec une instance de CKEditor
    // utilisant la configuration par défaut.
    CKEDITOR.replace( 'editor1' );

    Posté par Maf | 13 juillet 2015 à 21:12
 

Poster un commentaire