Utiliser CKEDITOR pour les mises en forme élaborées des posts sur Blogger.

By Anonyme - 18 février 2011 4 Comments






Difficile de réaliser des mises en forme élaborées sous blogger.

Ceux qui ont déjà réalisé un blog sous blogger l'auront constaté, l'interface de rédaction d'articles est vraiment minimaliste mais suffisante dans la majorité des cas. Grâce à cela on peut ainsi générer un code a peu prêt correct et presque toujours conforme aux normes W3C.
Toutefois, lorsqu'il s'agit de faire un tableau, de rédiger un article en plusieurs colonnes, d'insérer des émoticones ou un caractère spécial, il n'y a pas d'autres choix que de toucher au code HTML. Bien gênant lorsque l'on ne maîtrise pas.

La solution : CKEDITOR

Ce n'est rien d'autre qu'un éditeur de texte WYSIWYG (what you see is what you get), open source, que l'on peut intégrer à différentes applications et autres CMS (SPIP, JOOMLA, DRUPAL) pour rédiger des articles avec une possibilité de mise en forme assez riche. Il existe même un plugin CKEDITOR pour WORDPRESS, dont vous pouvez télécharger la dernière version, remplaçant celui d'origine.
J'ai d'ailleurs connu l'outil lorsque j'administrais des sites sous spip auxquel j'avais intégré CKEDITOR sous forme de plugin.

Comment faire?

L'idée c'est d'utiliser le site de démonstration de l'éditeur pour rédiger vos articles lorsque ceux-ci nécessitent une mise en forme particulière impossible à réaliser avec l'interface Blogger. J'ai d'ailleurs rédigé ce post via CKEDITOR.

Voila à quoi ressemble l'interface avec sa barre typographique enrichie :

  Une fois votre post rédigé sur l'interface de démonstration de CKEDITOR il s'agira de copier le code HTML généré pour le coller dans l'interface blogger. Pour cela rien de plus simple :
  1. Cliquez sur l'icône "Source" de CKEDITOR
  2. Copier l'ensemble du code HTML
  3. Rendez vous sur votre interfac ede rédaction d'article de blogger et créez un nouveau message
  4. Toujours sur Blogger, cliquez sur "Modifiez le code HTML"
  5. Collez le code HTML copié précédemment.
Dans le prochain article je vais vous montrer comment utiliser CKEDITOR pour réaliser un tableau.

4 commentaires to ''Utiliser CKEDITOR pour les mises en forme élaborées des posts sur Blogger."

ADD COMMENT
  1. Bonjour à toi,

    Ta suggestion est intéressante, mais je ne saurais plus me passer de Windows Live Writer qui permet de préparer nos articles à plein écran avec une foule de fonctionnalités.

    Il me semble que ton blog a pris un coup de jeune depuis la dernière fois où je l'ai visité. (Quand tu m'as posé 2 ou 3 questions, tu te souviens ?)

    En tout cas, il est super !

    RépondreSupprimer
  2. @MarieBo : en effet Windows live writer est super pratique. je l'utilise également même si je préfère écrire directement dans l'éditeur de Blogger. Tu as raison, l'usage de ckeditor ne se justifie pas pour blogger face a un outil aussi puissant que WLW sauf si Google autorisait un jour l'intégration de plugins à Blogger à la mode wordpress.
    Sinon merci du compliment pour le blog. Tes articles, ceux de Rodney du blogger au bout du doigt ainsi que ceux de Soufian de leblogger m'ont bien aidé a modifier et optimiser le tout. D'ailleur, j'avais choppé chez toi l'astuce permettant de désactiver le clic droit. Depuis j'ai réactivé ce clic droit car en tant qu'internaute je deteste quand il est désactivé.
    Je ne suis pas encore satisfait du temPlate mais je me penche plus en ce moment sur le référencement.

    RépondreSupprimer
  3. Bonjour,
    ma petite contribution: CKeditor peut être aussi utilisé pour créer un message élaboré dans Gmail et surtout pour se créer un bloc "signature" personnalisée. Gmail accepte sans sourciller les tableaux mais évidemment pas les scripts ou le iframes. Même s'il semble les accepter à première vue, l'interlocuteur ne les recevra pas pour des raisons de sécurité.
    Pour info: Gmail n'affiche pas le code HTML. Il faut donc faire un copier-coller du mode "rédiger" dans CKeditor vers l'éditeur de message ou l'éditeur de signature de Gmail. On peut cependant "perdre des morceaux en route" dans la manipulation.

    RépondreSupprimer
  4. J'ai oublié: j'ai découvert cette App bien pratique que l'on pourrait qualifier de "CKeditor pour Blogger": http://blogger-ckeditor-sample.appspot.com/ Malheureusement, si on utilise un modèle de message, il ne sera pas importé automatiquement. Cette URL est toujours bien en vue dans mes favoris et j'en ai même fait une "Web App" avec Chrome. Le raccourci est toujours dans mon dock et mon menu applications. Je suis sous eOs Freya (dérivé d'Ubuntu 14.04). Je ne trouve malheureusement pas le nom du créateur de cette app.

    RépondreSupprimer

Recevez par mail les nouveautés de crack-net