CKeditor : Téléchargement d’images/documents

Le plugin CKeditor permet deux modes d’accès aux images a priori s’excluant l’un l’autre. Le premier à préférer si l’on veut rester SPIP permet d’utiliser les outils de SPIP de manipulation (placement, modification, médiathèque etc...) d’images. Le second permet d’utiliser des mécanismes plus classiques et plus intégré à CKeditor de téléchargement d’image (mais exclut les diverses manipulations par SPIP). Ce dernier mécanisme est maintenant entièrement configurable par plugin spip.

Cet article ne traite que du second mode.

Onglet : Téléchargement d’images/documents

Tout d’abord, vous devez décider si vous souhaitez utiliser une interface riche en javascript ou une interface légère.
L’interface légère ressemble à :

L’interface riche du plugin KCFinder ressemble à :

Les deux interfaces proposent globalement les mêmes possibilités mais pas de la même façon.

Depuis les dernières versions de ckeditor-spip-plugin, l’interface riche est modifiable par plugin spip. Par défaut c’est l’interface légère, mais en activant un plugin spip approprié (que vous pouvez développer) vous pouvez choisir un autre filebrowser : kcfinder, pgrfilemanager (pour l’instant seuls ces derniers sont développés).

Si vous souhaitez utiliser l’interface KCFinder, il faut

  • soit : que vous installiez d’abord la librairie KCFinder (préférez la version stable) dans le répertoire lib/. Le répertoire d’installation doit s’appeler : kcfinder-..... Ensuite, il faut cocher dans l’onglet Téléchargement d’images/documents (de configuration du plugin) l’option : Utiliser KCFinder si possible (ancienne version)
  • soit : activer le plugin ’KCFinder pour CKEditor’ et laisser SPIP se charger de l’installation de la librairie KCFinder.

Si vous souhaitez utiliser l’interface PGRFilemanger : il faut activer le plugin ’PGRFilemanager pour CKEditor’ et laisser SPIP se charger de l’installation de la librairie PGRFilemanager.

Ensuite, que vous utilisiez l’interface riche ou légère, il faut que vous activiez le bouton Image dans la configuration des barres d’outils.

Configuration proprement dite

Voici les options de configuration :

  • Autoriser le téléchargement depuis les dialogues de CKEDITOR : ceci active le droit de télécharger directement (sans passer par l’une des deux interfaces) depuis les dialogues de CKeditor. Ce n’est pas nécessaire, mais cela permet de télécharger et de sélectionner l’image directement.
  • Autoriser à parcourir le dossier de SPIP pour insérer des images : ceci active les interfaces (l’une ou l’autre) de parcourt de dossier. Si vous ne cochez ni cette option, ni la précédente : c’est que vous comptez utiliser le mécanisme de SPIP d’insertion d’images.
  • Autoriser à télécharger des images dans le dossier de SPIP : ceci permet d’activer le téléchargement des images, des documents. Si vous ne l’activez pas, cela signifie que l’on pourra parcourir les dossiers que vous aurez prévus pour insérer dans CKeditor des images prédéfinies.
    Si vous activez aussi autoriser aussi les rédacteurs, alors tout le monde pourra télécharger des images (c’est probablement le comportement souhaité par défaut).
  • Autoriser à créer des répertoires : vous pouvez (dans l’interface légère uniquement) interdire la création de sous répertoires, ainsi que limiter cette possibilité aux seuls administrateurs.

Répertoires

Pour des raisons de sécurités, les téléchargements sont limités à un sous répertoires du répertoire IMG/. Les téléchargements sont organisés en 3 zones : fichiers (pour les documents), images et flash.

Vous pouvez choisir le Répertoire de base des téléchargements (dans IMG/). Dans ce répertoire (forcément) vous pouvez choisir :

  • le Répertoire des images et la Liste des extensions autorisées

    Ce répertoire stocke les images utilisées par CKEditor en dehors de toute gestion par SPIP. Pour y télécharger des images, soit vous y déposez des images via ftp, soit vous utilisez l’onglet ’Envoyer’ depuis le dialogue ’Images’ de CKEditor, soit vous utilisez le mécanisme de téléchargement de votre plugin ’filebrowser’.

  • le Répertoire des documents Flash® et la Liste des extensions autorisées

    Même chose que pour les images mais pour les documents et les vidéos Flash®

  • le Répertoire des fichiers et la Liste des extensions autorisées

    Ce dossier stocke les fichiers vers lesquels vous pourrez obtenir des liens depuis l’onglet ’cible’, soit du dialogue ’Liens’, soit du dialogue ’Images’ de CKEditor. Pour y télécharger des images, vous devrez soit les y télécharger par ftp, soit les y télécharger par l’onglet ’Envoyer’ du dialogues ’Lien’, soit les y télécharger par le mécanisme de téléchargement votre votre plugin ’filebrowser’

Les répertoires sont des noms donnés relativement au Répertoire de base des téléchargements.

Les Liste des extensions autorisées sont de la forme :

ext1 ; ext2 ; ext3 ; ext4

Discussion

8 discussions

  • J’ai installé CKEditor 4 ver : 1.0.6. CA marche bien.
    Lorsque j’insère des images dans un article, je veux les choisir parmi toutes les images du dossier IMG.
    Je pense que dans la configuration de CKeditor, une option devrait être incluse pour que l’utilisateur puisse choisir dans quel dossier il souhaite insérer ses images. La considération de sécurité doit être qu’il ne peut être lu que dans ce dossier, jamais écrit, sauf dans le propre dossier de CKeditor.
    Pouvez-vous m’aider à résoudre ce problème. J’accède uniquement aux dossiers Images dans IMG

    Répondre à ce message

  • YASSINE BALHIH

    Bonjour .

    j’ai réalisé un page web dont le but est d’envoyer des emails , j’ai intégré le Ckeditor dans cette page et je veux que son contenu sera le message envoyé.

    pour un texte simple le message est envoyé vers ma boite.

    Le problème est pour les images , j’arrive pas à les envoyer vers ma boite

    je travaille sous wampServer en local

    Aidez moi Svp.

    Répondre à ce message

  • Depuis les dernières versions de ckeditor-spip-plugin, l’interface riche est modifiable par plugin spip. Par défaut c’est l’interface légère, mais en activant un plugin spip approprié (que vous pouvez développer) vous pouvez choisir un autre filebrowser : kcfinder, pgrfilemanager (pour l’instant seuls ces derniers sont développés).

    Ou peut on trouver les plugins en question, pour s’en servir comme base ? ils ne sont pas sur la zone

    Merci de votre réponse.

    Répondre à ce message

  • 2

    Bonjour à tous.

    D’abord merci pour ce plugin, je ne le répèterais jamais assez ;-)
    J’arrive pas à configurer avec spip3 biscotte je ne vois pas CFG mais bon, je patiente...

    Petite question d’onglet.
    Dans un spip 2.1.14 avec CKeditor 3.6.2 et le plugin 0.15 (r795),
    dans la boite de dialogue « Liens » l’onglet « Avancés » a disparu. Est-ce le plugin spip qui force cela ?
    Puis-je le remettre à la main ? (me dire où, j’ai du mal à trouver ;-)

    Merci.

    • pour spip3 : job under way ! mais j’ai peu de temps en ce moment. Pour une préview ( à tester pour remonter les bugs) : plugin en beta pour spip3

      Pour ta question à propos de la boite de dialogue « Liens » et de l’onglet « Avancés » qui a disparu, c’est effectivement le plugin qui le fait disparaître, pour le faire réapparaître, dans ckeditor_fonctions.php, commenter/supprimer la ligne :

      $cke_cfg['removeDialogTabs'] = 'link:advanced' ;
    • Merci beaucoup.
      Ça marche nickel.

      Encore merci pour ta réactivité : 11 minutes. #CHAPO

    Répondre à ce message

  • 3
    Claire Thibault

    Bonjour,

    j’ai un soucis avec les fonctionnalités de dépôt : quelque soit le bouton choisit (lien, image ou flash) je ne peut déposer que des images.

    Jai dû modifier le script filebrowser.html et ajouter type=’.$_REQUEST(’type’].’& un peu partout...Sinon, on revient systématiquement au type par défaut soit image.

    • si tu postais ici le code modifié, ou mieux si tu me l’envoie @ fredlefred chez gmail point com
      je pourrais corriger rapidement ce bug sur le svn.

    • Bonjour,
      j’ai le même problème.
      SPIP 2.1.10
      ckeditor r797
      y a-t-il une solution ?
      Cordialement
      Bruno

    • Bonjour,

      En m’aidant de ce que disait Claire Thibault, j’ai modifié le script filebrowser.html en remplaçant
      page=filebrowser
      par
      page=filebrowser&type=’.$_REQUEST[’type’]
      Cela marche
      Cordialement
      Bruno

    Répondre à ce message

  • Stéphane Santon

    Bonjour,
    Spip 2.1.12, CK 0.15r795, CK 3.6.1

    Lorsque je glisse-dépose une image dans un corps d’article, après enregistrement et temps de téléversement de l’image, je perds tout le contenu de l’article...

    Puis comment mettre à jour la lib CKEditor 3.6.1 -> 3.6.2 en « automatique », càd sans téléchargement + téléversement ftp?

    Merci

    Répondre à ce message

  • 3
    Gerard FONTAINE

    Bonjour,
    A quoi sert le dossier Files de CKeditor ? Je ne trouve pas comment charger des fichiers dans ce dossier et les intégrer ensuite avec les outils de CKeditor.
    Cela est-il fait pour remplacer le télchargement de fichiers de spip (Joindre un document) ?
    Cordialement

    • Pour répondre d’abord à ta deuxième question : oui et non.

      • oui : ça sert effectivement à télécharger des documents sur le serveur et permettre à ckeditor de mettre un lien vers ce documents depuis l’article
      • non : ça ne s’intègre pas avec la gestion spip de document

      Comment ça marche (faudra que je précise cela dans l’article) :

      • le dossier Flash : c’est pour le bouton Flash de ckeditor, pour télécharger et intégrer des applet/video flash dans l’article spip
      • le dossier Image : c’est pour le bouton Image de ckeditor, pour télécharger et intégrer des images dans l’article spip
      • le dossier Files : c’est pour l’onglet ’cible’ des liens (ou des images d’ailleurs) : pour télécharger des documents et intégrer dans l’article des liens vers ceux-ci. Pour envoyer des documents dans ce dossier, il y a un onglet ’Envoyer’ qui apparaît dans la boîte de dialogue des liens (l’onglet ’Envoyer’ qui apparaît dans la boîte de dialogue des images envoie dans le dossier ’images’)

      J’espère que c’est plus clair.

    • Gerard FONTAINE

      Bonsoir,

      Cette fois-ci tout est clair pour moi

      Merci beaucoup pour votre réponse

    • j’ai mis en place le plugin mais j’aimerai pouvoir garder la gestion des images pour le mécanisme de spip. Or dans mon article aprés avoir telepcharger mon image par Spip, coller n’affiche pas l’image.
      J’ai du raté un paramètre dans la configuration du plugin

      Merci pour votre aide
      LG

    Répondre à ce message

  • 1
    Baboul

    Bonjour,

    Merci pour les explications.
    Chez moi, ça fonctionne bien pour les images et les flash mais pas pour les fichiers. Quand je clique sur « ajouter un document SPIP », j’ai toujours l’interface classique de ckeditor qui ne permet de sélectionner un document déjà rattaché à l’article mais pas d’en ajouter. Est-ce que j’ai manqué quelque chose ?

    Merci pour votre aide

    • En fait, avec les documents spip, tu ne peux pas avoir l’interface riche.

      Tu ne peux l’avoir que pour l’insertion de lien.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom