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

PARTAGER:

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&...



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.

COMMENTAIRES

BLOGGER: 4
Loading...

Blog geek

Crack-net est un blog Geek, pour les Geeks et autres Nerds mais aussi pour la ménagère, l'enseignant, l'étudiant, l'ouvrier ou le cadre.... Pour quiconque atterrira sur ces pages
Nom

accessoire,7,actualité,62,addon,10,Adsence,8,adwcleaner,2,Amazon,2,android,52,androïd,3,antivirus,12,Apple,19,application,65,arnaque,7,art,18,Article sponsorisé,3,astuce,97,bd,6,billet d'humeur,33,Blog geek,1,blogger,33,BLOGGING,44,bon plan,9,bug,8,bureatique,2,bureautique,3,chrome,22,cinema,17,cloud,3,CMS,3,concours,6,Crack-net story,33,découverte,3,dell,1,design,4,développement durable,2,dropbox,1,ebook,1,education,46,emploi,3,enquête,2,evernote,1,extension,14,facebook,32,firefox,11,Flash,4,foot,1,free,3,gadget,2,gagner de l'argent,12,geek,64,geekeries,12,gmail,14,google,32,gps,2,gratuit,120,html,5,humour,30,image,30,immobilier,3,infographie,70,Insolite,20,internet,59,iPad,6,iphone,53,itunes,7,jeux video,27,joomla,1,Lecture,2,linux,6,liste,1,logiciel,59,logo,4,mac,3,mail,19,manga,6,marketing,9,meilleurs sites,3,messenger,1,microsoft,7,mobile,13,monetiser,13,mp3,3,musique,14,nomade,1,office,6,outlook,1,p2p,1,PC,54,pdf,11,photo,43,photoshop,6,playstation,1,podcasts,2,pratique,13,publicité,15,referencement,6,référencement,2,rese,1,Réseaux sociaux,57,rumeur,2,samsung,5,samsung galaxy s2,9,sécurité,26,seo,12,séries,15,service web,116,skype,1,smartphone,47,sport,2,streaming,5,tablette,4,Tchat,1,téléchargement,24,telephone,7,téléphonie,13,template,6,test,3,torrent,3,travail,2,troll,3,Tuto,103,tv,9,twitter,47,video,56,wallpaper,5,webmaster,42,widget,4,wifi,2,windows,41,wordpress,9,youtube,20,
ltr
item
Crack-net: Utiliser CKEDITOR pour les mises en forme élaborées des posts sur Blogger.
Utiliser CKEDITOR pour les mises en forme élaborées des posts sur Blogger.
http://3.bp.blogspot.com/-8lEFc4fRqLM/TV5RWOfkRNI/AAAAAAAABZo/QXe8KW6ATiA/s1600/logo-ckeditor-h100.png
http://3.bp.blogspot.com/-8lEFc4fRqLM/TV5RWOfkRNI/AAAAAAAABZo/QXe8KW6ATiA/s72-c/logo-ckeditor-h100.png
Crack-net
http://www.crack-net.com/2011/02/utiliser-ckeditor-pour-les-mises-en.html
http://www.crack-net.com/
http://www.crack-net.com/
http://www.crack-net.com/2011/02/utiliser-ckeditor-pour-les-mises-en.html
true
3471367308829404027
UTF-8
Loaded All Posts Not found any posts VOIR TOUT Lire la suite Repondre Annuler la reponse Effacer Par Home PAGES ARTICLES Tout Voir JE VOUS RECOMMANDE LABEL ARCHIVE RECHERCHE ALL POSTS Not found any post match with your request Retour Home Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi Dim Lun Mar Mer Jeu Ven Sam Janvier Fevrier Mars Avril Mai Juin Juillet Aout Septembre Octobre Novembre Decembre Jan Fev Mar Avr Mai Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Hier $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow CONTENU PREMIUM SVP Partager pour deverrouiller Copier tout le code Sélectionner tout le code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy