Impressum

CKeditor : Edition WYSIWYG en Préservant la typo SPIP

CKeditor : le succeseur de FCKeditor
mardi 24 mai 2011
par  François Daniel Giezendanner
popularité : 1%
3 votes

Avec le plugin CKeditor pour SPIP, vous éditez en WYSIWYG en préservant la typo SPIP : aucun code HTML n’est introduit dans vos articles, tout est reconverti en typographie SPIP.

 Préambule

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.

Cet article reprend une partie des articles en référence sous paragraphe « Source » ci-dessous.


 Compatibilité

  • SPIP 2.0
  • SPIP 2.1

 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//.
  • 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 les crayons, ou les champs extra2
  • (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 ...

 Installation de base

L’installation de base est bien décrite sur la page officielle du site spip-contrib :

Le plugin CKEditor nécessite la librairie ckeditor à télécharger depuis http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.1/ckeditor_3.6.1.zip et à installer dans lib/

Il faut donc télécharger la librairie ici :

et l’installer dans /spip/lib/


 Préserver la typo SPIP avec CKeditor

Nous l’attendions, Emmanuel Dreyfus l’a fait ...

Depuis la version 0.14 du plugin CKeditor pour SPIP, il est possible d’utiliser CKeditor en préservant la typo SPIP : aucun code HTML n’est introduit dans vos articles, tout est reconverti en typographie SPIP.

Les éditeurs visuels ont l’avantage de la simplicité pour l’usager : pas de langage de typo à apprendre, il suffit de cliquer sur des boutons. Le prix à payer pour cette simplicité, c’était jusqu’ici l’introduction de code HTML dans les articles SPIP, là où il ne devrait y avoir que du code typo. Ce code HTML introduit des disparités dans le rendu visuel du site, et il interdit un certain nombre de manipulations basées sur la typo SPIP. De plus, la présence de ce code HTML rendait la cohabitation impossible entre les usagers de CKeditor et les usagers préférant manipuler la typo dans l’éditeur SPIP.

Cette limitation appartient au passé, puisque depuis la version 0.14 du plugin CKeditor pour SPIP, on peut utiliser une librairie — judicieusement nommée HTML2SPIP — pour retransformer en typo SPIP tout le code HTML produit par CKeditor. On a ainsi un éditeur visuel, mais les articles restent rédigés en typo SPIP.

Pour rentrer dans les détails, au moment où on lance CKeditor, SPIP converti sa typo en HTML. CKeditor manipule le code HTML, et quand on enregistre, la librairie HTML2SPIP converti l’HTML en typo SPIP. Tout ne peut pas être converti, et certains enrichissements de CKeditor seront ignorés au moment de la reconversion en typo. Par exemple, CKeditor permet de choisir la couleur d’une section, opération qui n’a pas de sens en typo SPIP (et plus généralement qui est à proscrire si on tente d’imposer une charte graphique cohérente). HTML2SPIP ignorera les colorations introduites par CKeditor, qui seront perdues.


 Configuration de CKeditor pour préserver la typo

Tout d’abord, il faut télécharger la librairie HTML2SPIP. Prenez la dernière version, et décompactez la dans le dossier lib de votre installation de SPIP.

Rendez vous ensuite dans les formulaires de configuration de CKeditor dans l’espace privé. Choisissez le formulaire Configuration avancée, qui ressemble à ceci :

PNG - 146 ko

Si à la place des réglages de la section Options HTML2SPIP, vous avez un message indiquant La librairie html2spip n’est pas installée(...), vous pouvez avoir un des problèmes suivants :

  • HTML2SPIP n’est pas installée dans le dossier lib.
  • Les permissions dans le système de fichier ne permettent pas au serveur d’y accéder.
  • La version de HTML2SPIP n’est pas celle attendue par le plugin CKeditor. Le plugin attend une version spécifique de la librairie. Le message d’erreur vous donne un lien vers la bonne version.

Activez l’option Reconvertir l’HTML en typo SPIP. Si vous souhaitez que le plugin désactive de lui même les fonctionnalités de CKeditor incompatibles avec la typo SPIP, cochez aussi l’option N’utiliser que les options de CKEditor compatibles avec les raccourcis typographiques SPIP.

Suite sur Préserver la typo SPIP avec CKeditor.


 Source


Publications

Derniers articles publiés

Agenda

<<

2018

 

<<

Juin

 

Aujourd'hui

LuMaMeJeVeSaDi
28293031123
45678910
11121314151617
18192021222324
2526272829301
Aucun évènement à venir les 6 prochains mois

Météo

Ville(SZXX0013)

Conditions météo à 0h0
par weather.com®

Inconnu

°C


Inconnu
  • Vent :  km/h - N/D
  • Pression :  mbar tendance symbole
Prévisions >>


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


9 sites référencés dans ce secteur

Brèves

Mise à jour de sécurité SPIP 2.1.10 du 7 avril 2011

mardi 19 avril 2011

...et oui encore une nouvelle version de SPIP (SPIP 2.1.10) disponible suite à la découverte d’une faille par Arnault.

Cette faille concerne les branches 2.0 et 2.1 et peut permettre à un rédacteur de déconnecter le site de sa base de données.

PIWIK succède à PhpMyVisites pour SPIP 2

jeudi 8 janvier 2009

L’analyseur de trafic web PhpMyVisite en plugin pour SPIP 1.9x a maintenant un magnifique successeur très performant pour SPIP 2, il s’agit du plugin PIWIK :