CKeditor 3.x et 4.x

Publié le : 4 octobre 2009 – Dernière modification le 17 octobre 2022 – par Frédéric Bonnaud – 1267 commentaires

1
2
3
4
5
209 votes

CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser.

Attention : cet éditeur WYSIWYG risque de détruire la belle charte graphique de votre site, ainsi qu’empêcher la mise à jour simplifiée de celle-ci. Avec ce plugin, le déplacement de votre site nécessitera l’édition manuelle de chaque article contenant des liens internes si vous déplacez votre site dans un autre répertoire.

Ceci devient totalement faux si vous préservez la typographie spip

Introduction

Le plugin est intégré complètement à SPIP.

Si vous avez opté pour laisser le choix aux auteurs (c’est l’option par défaut). Il suffit de cliquer sur le lien adapté pour passer de l’éditeur spip à CKeditor.

Description

Que fait le plugin ?

Ce plugin remplace l’éditeur par défaut de spip (en particulier le porte-plume disparaît) dans les articles, les brêves et les rubriques par CKEditor un éditeur WYSIWYG.

Avec cet éditeur, vous pouvez :

  • continuer d’utiliser le mécanisme de spip pour insérer des images, des documents à/dans un article, une rubrique ...
  • insérer simplement des liens vers les objets standards de spip (mais aussi ceux non encore prévu en modifiant assez simplement le code du plugin : ajout d’un fichier, ajout d’un lien dans un autre) via un dialogue de CKEditor.
  • utiliser les balises spip non gérée par CKEditor comme vous le feriez depuis l’éditeur de spip.
  • utiliser des polices en utilisant le mécanisme CSS3 (@font-face), soit en utilisant le webfonts directory de google, ou en téléchargeant la police ainsi que la feuille de style CSS3 tel que générée par Font Squirrel par exemple dans le répertoire : IMG/FontKits/<répertoire de la police>/.
  • le plugin essaie, dans la mesure du possible de sauvegarder vos mises en page en utilisant les raccourcis typographiques de spip (le gras, l’italique, les liens, les ancres, les insertion d’images, de documents, les listes, ... ) mais beaucoup de choses sont sauvegardées au format html (les tableaux, les enrichissement sophistiqué : couleurs, polices etc ...).
  • (nouveau) utilisez CKEditor avec n’importe quel champ (pour peu que vous connaissiez un sélecteur jQuery permettant d’y accéder)
  • (nouveau) utiliser CKEditor aussi bien en partie privée que publique
  • (nouveau) utilisez les modèles SPIP de manière ’visuelle’
  • (nouveau) utilisez des modèles d’articles que vous définirez
  • (nouveau) préservez la typographie spip
  • plein d’autres choses ...

La dernière version est :

  • sur la zone !
  • compatible spip 3.0 (expérimental)

Mise à jour de la lib

Le plugin Ckeditor utilise le dossier lib/ de SPIP.

Mais rien dans SPIP ne gère la mise à jour des lib :(

En conséquence, pour mettre à jour la lib :

Remarque, vous pouvez personnaliser les greffons de CKEditor.

Installation

Dans tous les cas, il faut qu’un répertoire lib existe à la racine de votre installation Spip pour que Spip puisse y copier la librairie CKeditor. Et il faut que Spip puisse écrire dans ce répertoire : c’est un pré-requis obligatoire.

Ensuite, vous pouvez installer le plugin de deux manières différentes :

Par FTP

Téléchargez le plugin :

ckeditor-spip3-plugin
(0.17.1)

Vous pouvez préférez la version de développement qui se trouve là

Décompresser l’archive où vous voulez, copier le répertoire entier dans le sous répertoire plugins de votre installation spip.

En mode auto

Créez un répertoire auto dans le sous répertoire plugins de votre installation spip. Taper/Copier l’url du plugins

Validez.
Spip télécharge l’archive et vous montre ce qu’il y a dedans.

Validez.

Via SVP

Vu que le plugin est maintenant sur la zone : il peut être installé via SVP (à vérifier)

Activation du plugin

Utilissez le gestionnaire de plugins Spip pour activer le plugin.

Ouvrez le répertoire plugins/auto et activez CKeditor pour Spip

Validez.
Spip n’est pas content :

Normal, il faut encore télécharger CKeditor lui-même. Cliquer sur le bouton Télécharger.
Après le téléchargement qui prend un certain temps (près de 5Mo ...), Spip vous montre le contenu de l’archive qu’il vient de télécharger :

Procéder à l’installation :

Normalement à ce stade, le plugin est installé. Il arrive, je ne sais pas pourquoi que spip ne copie pas le contenu de CKeditor au bon endroit, dans lib/ckeditor. Chez moi, il laisse l’archive décompressée dans tmp/cache/chargeur/ckeditor. En l’effaçant complètement et en recommençant, ça a marché. Je pense que le bug vient de spip. Mais je n’en suis pas sûr.

Modules complémentaires

Pour profiter pleinement de toutes les fonctionnalités du plugin, il faut installer aussi :

Configuration

Puis on utilise l’interface CFG pour configurer le plugin. Ce n’est pas obligatoire mais les choix par défaut risquent de ne pas vous plaire.

Les documentations suivantes sont, sur certains points obsolètes

Vous pouvez consulter les articles :

Incompatibilités

Ce plugin est incompatible avec le plugin Multilang.

Contribution avec Git

ckeditor-spip-plugin est sur le Git de SPIP !

Avertissement !

L’utilisation de ce type d’éditeur WYSIWYG permet difficilement de maintenir une charte graphique cohérente. Prévenez vos rédacteurs de limiter le recours aux enrichissements trop exotiques, ou mieux : limitez l’utilisation dans ce plugin l’accès aux seules fonctions de l’éditeur que vous souhaitez leur offrir.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

370 discussions

  • 11

    Bonjour
    Je n’arrive pas à afficher la barre des outils de CKeditor je suis avec SPIP 2.0.9 et j’ai bien les plugins bonux 2.0 ; J’ai aussi la fenetre cfg qui me donne les choix des configurations
    Quand j’édite un article je n’ai que le lien avec « mode d’edition [SPIP] visuel » et rien ne s’affiche ???
    Merci

    • Frédéric Bonnaud

      Sans messages d’erreur, je ne peux pas savoir ce qui se passe.

      Si tu utilises Firefox, tu peux essayer de suivre dans la console d’erreur (menu : outils) ce qui se passe et retourner les erreurs éventuelles.

      Tu peux aussi regarder dans le log tmp/prive_spip.log
      Ainsi que dans les log apache.

      Mais sans indice, on sait juste que quelque chose cloche. Si je ne peux pas reproduire le bug... je doute de pouvoir y apporter une solution. Désolé.

    • gb

      Bonjour Merci de votre réponse du 26 octobre 17:32
      J’ai utilisé « ckeditor_3.0.1.zip » et « ckeditor-spip-0.7-rev118.zip »
      J’ai erreur signalée dans firefox « console d’erreurs »
      sur la ligne : 19

      Erreur : editor.lang.spip is undefined
      Fichier Source : http://www.monsite.com/xxxxxx/ecrire/lib/ckeditor/plugins/spip/plugin.js?t=99GE

      label : editor.lang.spip.title,

      Cela peut-il vous aidez ?

      D’avance Merci
      GB

    • Frédéric Bonnaud

      Maintenant je vois quelle est l’erreur. Mais je ne comprends pas comment elle peut intervenir...

      Vérifiez dans _DIR_RACINE/lib/ckeditor/plugins/spip/lang/
      la présence de fr.js et qu’il est bien disponible au téléchargement. Essayez par exemple de le télécharger via http.

      La seule piste que j’arrive à envisager, c’est que :

      • un .htaccess quelque part empêche le téléchargement
      • les droits sur le fichier fr.js empêche apache d’y accéder (improbable sauf si c’est vous qui avez copier le plugin à la main)

      Vous pouvez aussi, dans un premier temps désactiver les plugin ’spip’ et ’spipdoc’ depuis l’interface de configuration du plugin ça vous permettra de tester ckeditor, mais pas les facilités d’insersion de documents et de liens.

    • gb

      Merci pour votre réponse

      J’ai essayé, j’ai changé de lang (en) ça ne fonctionne toujours pas . J’ai aussi beaucoup d’avertissements pour JQuery, il doit y avoir une mer.. dans l’install je reprends tout au depart je reviendrai vers vous si je bloque

      Merci
      GB

    • Frédéric Bonnaud

      Ta réponse me fait penser, que je n’ai indiqué nulle part que jQuery doit être inclus ... mais je crois que c’est automatique dans la partie privé de spip.

      Par contre, je ne comprends toujours pas où peut bien résider ton problème.

      Utilise bien la dernière version packagée du svn (sinon, les problèmes que tu rencontre ont peut-être été fixés - peu probable vu les problèmes) à savoir : http://ckeditor-spip-plugin.googlecode.com/files/ckeditor-spip-plugin-0.7-r130.zip

    • gb

      Bonjour merci pour tes réponses

      j’ai solutionné le problème en passant un CHMOD sur le dossier CKeditor et activer le plugin et remettre tout comme avant.
      Je pense que le problème vient du faite que je ne pouvais pas installer CKeditor en automatique, ne voulant pas reconnaitre le dossier lid en écriture (777) dont j’ai charger en FTP et fait les changement de Chmod.

      Je suis resté sur ta dexième remarque.

      Merci encore et Bravo pour ce plugin qui je pense va séduire beaucoup de personnes qui ne sont pas familier avec l’editor de SPIP.

      GB

    • Patrick

      Bonjour,
      J’ai chargé les dernières versions de ckediteur301 et ckediteur spip plugin sur la dev, en spip 209branche dev, et en local pour essai :

      • compatibilité avec porte plume totale,
      • bouton de passage d’un mode à l’autre trés agréable et sécurisant,
      • choix de réglages et de skin importants.

      Problèmes découverts ce matin :

        • import de word2007 à déconseiller absolument (plantage de l’article),
        • pas d’import possible des images, le bouton « Explorer le serveur » si important manque.

      Sans cela, je passe de FCK à CK avec plaisir.
      Bon courage et merci

    • Frédéric Bonnaud

      Je me suis déjà expliquer dans ce forum sur la disparition que tu cites.

      Ce bouton a disparu :

      1. parce que avec CKEditor il nécessite CKFinder qui n’est pas libre et donc pas distribué avec ce plugin,
      2. parce que je le trouve inutile maintenant qu’il existe un bouton ’Insérer un document SPIP’ (alias spipdoc dans les options à activer dans les barres d’outils) qui permet d’insérer n’importe quel document SPIP géré par SPIP en utilisant les outils SPIP pour les autres, je ne vois pas pourquoi ce plugin devrait permettre d’insérer des images que spip ne permet pas. ça me parait illogique.

      Ceci dit, vu le nombre de demande, je mets sur ma todo list le développement de cette option ou d’une option similaire. (mais cela suprimera les facilités offertes par le bouton ’Insérer un document SPIP’)

      Par contre je retiens la proposition de contentCSS.

      Pour les bugs décrits :

      • le copiage depuis word : je n’ai pas word, je ne peux reproduire le bug, à voir si le problème se produit dans ckeditor seul, dans ce cas c’est un bug de ckeditor : ouvrir un ticket sur le site de ckeditor, sinon, il faudra trouver une solution, mais elle ne pourra venir de moi tant que je n’aurais pas word (et ce n’est pas près d’arriver)
      • pour le soucis (peu grave vue que cela ne peut pas empêcher le plugin de fonctionner) lié au ’warnings’ lié au numéro de version de ckeditor, je n’arrive pas à reproduire ce bug.
    • Patrick

      Bonjour, et merci pour ta réponse,

      Je n’avais pas vu l’explication sur le bouton dans le forum (donc mille excuses pour la redondance de la question).

      Je ne peux pas tester en ce moment.

      Pour ce qui est de word, j’ai désactivé le bouton, mais je sais que des rédacteurs tenteront le coup...

      Le sel moyen que j’ai trouvé pour remédier à ce problème, c’est d’effacer le contenu de l’article dans la base elle même.

      Je testerai avec CKeditor seul.Je te tiens au courant.

      La version de word est la 2OO7, je n’ai pas pu tester avec une autre version.

      J’ai en effet eu le même problème d’affichage de la version 301 qui était appelée, à l’installation, après vidage du cache de spip, pourtant la version installée était la bonne, tout est revenu en ordre après un nettoyage du cache et suppréssion de cookies sur mon navigateur (Mozilla).

      Voilà, je me tiens au courant du contenu de ce forum, mais là, j’ai été trop vite, et j’ai sauté une ligne...

      Merci et Bravo !

    • Patrick

      Précision : Page blanche dés la demande d’enregistrement, et page blanche àla lecture de l’article en public. (Word 2007)

      Dans la table des articles, le contenu de l’article, lui est bien présent. Après suppression tout revient en ordre.

      Je fouillerai mieux le forum à l’avenir ...

    • Bonjour,

      Je rencontre le même problème que GB. Messsage posté le 28 octobre :
      « console d’erreurs » sur la ligne : 19

      Erreur : editor.lang.spip is undefined Fichier Source : http://www.monsite.com/xxxxxx/ecrir...

      label : editor.lang.spip.title,

      Avez-vous trouvé une solution ? Si oui laquelle.

      Merci

      => Problème résolu CHMOD en 777 et récursion sur les dossier et fichier de lib/

      Merci

    Répondre à ce message

  • 1
    François Daniel Giezendanner

    Bonjour Frédéric,

    Les problèmes sont exprimés sur notre plate-forme institutionnelle ICP.

    Merci pour ta prompt réponse, en effet, sur un serveur externe à notre plate-forme institutionnelle ICP sur laquelle je viens de faire des essais, les accents sont conservés, le comportement est 100%, ton identification du problème est certainement exacte, nous en informons le personnel en charge de ces problèmes sur la plate-forme ICP.

    Par contre, l’éditeur est toujours obstrué, le navigateur est Firefox 3.5.5 quand au serveur je n’ai pas ces infos, le provider est Infomaniak à Genève.
    Je me renseigne.

    D’autre part je n’ai aucun doute concernant ton professionnalisme, c’est TOP.

    Merci pour ta réactivité.

    FDG

    • Frédéric Bonnaud

      Tu as tord ... je ne suis absolument pas professionnel et même totalement amateur ;-)

      Quand je parle de serveur, je veux parler du logiciel qui sert les pages (apache / iis / autre)

      Pour ce qui est des pages obstruées, je pense que le problème ne peut venir que du navigateur, et moi aussi j’utilise firefox 3.5.5 donc je ne comprends pas. Vérifie si ton firefox ne renvoie pas des erreurs dans la console d’erreurs (outils -> console d’erreurs).

    Répondre à ce message

  • 1
    François Daniel Giezendanner

    Bonjour,

    En cliquant sur le bouton « Pleine page » le champ d’édition wysiwyg est obstrué par des champs d’édition classiques SPIP ?

    Pouvez vous corriger SVP.

    Cordialement

    FDG

    • Frédéric Bonnaud

      Pour l’éditeur obstrué ... si j’avais ce problème jamais je n’aurais diffusé le plugin, il faut donc me dire dans quelles circonstances cela arrive ! (navigateur - version, serveur apache ou pas - version du serveur, etc ...) bref : de quoi reproduire le bug.

    Répondre à ce message

  • 1
    François Daniel Giezendanner

    Re-édition de :

    études et conformité

    donne :

    études et conformité

    • Frédéric Bonnaud

      Je vais sûrement être un peu brutal. Mais non je ne peux corriger le bug pour la simple raison que je ne peux le reproduire. Ne l’ayant pas... je ne vois pas comment je pourrais intervenir.

      Ce que je peux dire c’est que c’est typique d’un problème d’encodage (iso8859-1 <-> utf8)

      Peut-être ckspip_convert.php n’envoie-t-il pas le bon encodage (utf8) et le serveur est configuré en iso8859-1/15/latin1/latinX ... mais je ne peux testé : je ne sais pas la configuration de votre serveur.

    Répondre à ce message

  • François Daniel Giezendanner

    Bonjour,

    En mode CKEditor, je fais un copier-coller d’une partie de la page http://commons.wikimedia.org/wiki/Accueil

    Résultat OK à 100%.

    Je retourne en mode édition, que ce soit sous CKEditor ou non et j’enregistre à nouveau, les caractères accentués des textes sont alors remplacés par d’autres caractères indésirables.

    Pouvez-vous corriger ce bug SVP

    Cordialement

    FDG

    Répondre à ce message

  • 1
    fdauphin

    Bonjour
    Bravo pour ce plugin.
    Je l’utilise pour le site de mon collège et cela permet aux « pas doués de l’informatique » d’écrire des articles".
    Merci beaucoup.

    Malheureusement j’utilisais aussi le plugin « Crayons » mais avec CKéditor, cela devient compliqué, car du coup apparait tout le code source de l’article.
    Y aurait-il une solution envisageable ?
    Merci par avance et encore bravo pour ce travail.

    • Surement de faire un mix entre les crayons et ckeditor... mais bon pour l’instant ça me parait complexe.

      Et surtout ça va nécessiter de comprendre comment fonctionne les crayons et pour l’instant je n’ai pas de temps pour cela.

    Répondre à ce message

  • mtcocktail

    Parfait ça marche :)

    Répondre à ce message

  • Thibaut

    Bravo, il semble que le problème soit réglé, le texte s’affiche sans problèmes désormais.
    L’erreur que j’ai mentionnée dans mon poste précédent est toujours d’actualité mais tout semble bien fonctionner.
    Merci et bravo pour cette contrib qui va être d’un très grand secours, c’est du beau travail !

    Répondre à ce message

  • 1
    Thibaut

    Bonjour,
    effectivement, j’ai le même bug du texte qui disparait. Après tests et de ce que j’ai pu repérer, voici les éléments :
    -  SPIP version 2.0.10
    -  CKEditor 3.0.1
    -  plugin CKEditor 0.8 r155

    Si on mixe tout ça on obtient une erreur javascript lors d’une édition d’un article : Erreur : La feuille de style http://localhost/spip/ecrire/?exec=articles_edit&id_article=1 n’a pas été chargée car son type MIME, « text/html », n’est pas « text/css »

    Si on utilise le plugin CKEditor 0.7 r130 ca fonctionne mais cela nous prive des fonctions très utiles dans la 0.8 r155.
    Note : pas d’erreur d’utilisation de CKEditor 3.0.1 avec le plugin 0.7 r130.

    Je ne connais pas suffisamment le code de SPIP pour intervenir là dessus, quelqu’un a t’il les ressources ? Merci à vous.

    Répondre à ce message

  • 1
    mtcocktail

    Merci pour la mise à jours 0.8 :)

    Marche nickel la configuration CSS, trop fort :)

    Par contre j’ai toujours le bug ou quand je bascule d’un mode à l’autre le texte de l’article disparait... :(

    • Frédéric Bonnaud

      Si le texte de l’article disparait lors du changement d’éditeur, il peut y avoir plusieurs causes.

      1. une erreur javascript : utilise firefox et regarde ce que dit la console d’erreur,
      2. une erreur de droit sur le fichier ckspip_convert.html : il doit être lisible par le serveur/spip

    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