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

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


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 émoticônes 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
  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

Nom

accessoire,12,actualité,72,addon,11,Adsence,3,adwcleaner,2,Amazon,2,android,59,antivirus,14,Apple,22,application,74,arnaque,9,art,18,Article sponsorisé,3,astuce,171,bd,6,billet d'humeur,25,Blog geek,1,blogger,31,BLOGGING,41,bon plan,43,bug,9,bureatique,2,bureautique,4,chrome,27,cinema,17,cloud,3,CMS,3,concours,5,Crack-net story,23,découverte,2,dell,2,design,4,développement durable,2,dropbox,1,ebook,3,education,96,emploi,3,enquête,2,evernote,1,extension,24,facebook,30,fiche-film-serie,1,firefox,12,Flash,3,foot,5,free,3,gadget,3,gagner de l'argent,5,geek,63,gmail,14,google,34,gps,2,gratuit,118,html,5,humour,27,IA,2,image,36,immobilier,2,infographie,67,Insolite,15,internet,77,iPad,6,iphone,46,itunes,6,jeux video,37,joomla,1,Lecture,2,linux,5,liste,1,logiciel,76,logo,5,mac,9,mail,23,manga,8,marketing,7,meilleurs sites,2,messenger,1,microsoft,8,mobile,11,monetiser,6,mp3,4,musique,19,Netflix,7,nomade,1,office,6,orthographe,5,outlook,1,p2p,1,PC,82,pdf,11,photo,46,photoshop,8,piratage,63,playstation,1,podcasts,1,pratique,15,PS5,1,publicité,13,raccourcis clavier,5,referencement,1,référencement,2,rese,1,réseau,2,Réseaux sociaux,53,rumeur,2,samsung,6,samsung galaxy s2,7,sécurité,60,seo,8,séries,14,service web,133,skype,1,smartphone,52,sport,5,streaming,22,tablette,6,Tchat,1,téléchargement,30,telephone,7,téléphonie,14,template,6,test,3,torrent,5,travail,2,troll,3,Tuto,203,tv,14,twitter,41,video,65,vidéoprojecteur,12,wallpaper,6,webmaster,41,WhatsApp,3,widget,4,wifi,4,windows,55,wordpress,9,Y13,1,youtube,24,
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.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkd2imlfPwzOzNKw2DKmCmmPId3aPFAq6rgyaRdTrFBwWUNybdnGvZs4uOWEca8IXQNy3fbkQh9z_Z8t_AK9dmQjWJ0ixuYvwHlKyQbRcA5C7bAlV6glCEsRz9mhjYYLTLEm4jG6UuRC4R/s1600/logo-ckeditor-h100.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkd2imlfPwzOzNKw2DKmCmmPId3aPFAq6rgyaRdTrFBwWUNybdnGvZs4uOWEca8IXQNy3fbkQh9z_Z8t_AK9dmQjWJ0ixuYvwHlKyQbRcA5C7bAlV6glCEsRz9mhjYYLTLEm4jG6UuRC4R/s72-c/logo-ckeditor-h100.png
Crack-net
https://www.crack-net.com/2011/02/utiliser-ckeditor-pour-les-mises-en.html
https://www.crack-net.com/
https://www.crack-net.com/
https://www.crack-net.com/2011/02/utiliser-ckeditor-pour-les-mises-en.html
true
3471367308829404027
UTF-8
Loaded All Posts Articles non trouvés VOIR TOUT Lire plus... Répondre Cancel reply Effacer Par Home PAGES Articles Voir Tout RECOMMANDÉ POUR VOUS LABEL ARCHIVE SEARCH TOUS LES ARTICLES Aucun article ne correspond à votre recherche Back Home Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi Dim Lun Mar Mer Jeu Ven Sam Janvier Février Mars Avril Mai Juin Juillet Aout Septembre Octobre Novembre Décembre Jan Fev Mar Avr Mai Jun Jul Aug Sep Oct Nov Dec A l'instant Il y a 1 minute $$1$$ minutes ago Il y a 1 heure $$1$$ hours ago Hier $$1$$ days ago $$1$$ weeks ago Il y a plus de 5 semaines Followers Follow CONTENU PREMIUM BLOQUÉ STEP 1: Share to a social network STEP 2: Click the link on your social network Copier tout le code Sélectionner tout le code Tout le code est copié Impossible de copier le code/texte, veuillez appuyer sur [CTRL]+[C] (ou CMD+C sur Mac) pour copier Au Sommaire...