Éditeur HTML WYSIWYG pour webmaster

nettlebay · May 9, 2015

Il n'y a pas beaucoup de bons éditeurs html WYSIWYG* sur Ubuntu. Celui que j'utilise parfois est Composer qui fait partie de la suite Mozilla Seamonkey (ne pas confondre avec Kompozer, Mozilla aussi. Mais Kompozer est assez décrié car son HTML est un peu spécial...). Et c'est un peu bête de devoir installer une suite complète assez lourde tout ça pour profiter d'une seule application...

J'utilise surtout CKEditor qui est open source, multi-plateforme, léger et très complet.

C'est une application-web. Voir la description sur Wikipedia en Anglais (la version française est très succincte).

* WYSIWYG: What You See Is What You Get (Ce que vous voyez est ce que vous obtenez)

CKEditor est un excellent éditeur WYSIWYG (généralement en ligne) très complet et gratuit qu'on peut installer sur un serveur distant ou même sur son disque dur, donc en local. L'inconvénient de cette solution c'est qu'il n'est pas toujours simple à configurer pour un néophyte.
Cet éditeur est beaucoup plus complet que celui de Blogger (plateforme de blogging de Google) avec entre autres des modèles disponibles, la création d'iframes, de tableaux, menus déroulants, formulaires, boutons, ancres et bien plus encore... La fonction "Aperçu" (dans le navigateur) est bien pratique. De quoi bien s'amuser! Attention certaines fonctions peuvent ne pas fonctionner. Attention aussi, Ckeditor peut "casser" ou altérer partiellement un code déjà conçu avec un autre éditeur... Attention encore... Blogger "casse" les ancres* quand on passe en mode "rédiger".

Toujours dans Blogger, mais aussi probablement dans d'autres plateformes de blog, c'est un outil précieux pour créer et organiser des widgets personnalisés. L'éditeur de widget HTML/Javascript de Blogger est en effet très limité en mode "rédiger" (Dans Blogger, le mode "rédiger" correspond à l'affichage WYSIWYG).

On peut aussi s'en servir pour agencer un bel email, créer un "bloc-signature" personnalisé, ou pour créer une page Web ou un article sur un blogs ou un site Web. Cependant, ne vous en servez pas pour personnaliser un article sur un forum. Il est probable que votre code HTML sera refusé car les forums utilisent en général le Bbcode.

* Pour évitez ça, allez sur cette page: http://jean-louis.pierre.pagesperso-orange.fr/Crypter-le-HTML.htm et "cryptez" le code de votre lien vers l'ancre puis ensuite l'ancre elle-même. Copiez-collez les codes obtenus (c'est du JavaScript) à la place des codes d'origine. Blogger ne les cassera plus.

Dans le cas présent, je vous présente CKEditor pour Blogger (hébergé sur Google App Engine).

Je ne sais pas qui a eu cette excellente idée, mais on le remercie très chaleureusement... C'est (presque) exactement ce que je cherchais. L'adresse est ici: http://blogger-ckeditor-sample.appspot.com

C'est en fait une page Web qui intègre CKeditor "full" et des boutons pour se connecter à son compte Blogger/Google, choisir son blog (si on en a plusieurs), créer un article puis le publier. Mais ce n'est pas un module permettant comme "CKeditor for Wordpress" de remplacer l'éditeur par défaut de Blogger. Malheureusement.

Il est facile d'en faire une application Chrome* et ainsi de disposer d'un raccourci sur son Bureau et dans le menu "applications". D'autres navigateurs le font aussi.

Et pas de soucis d'hébergement, puisque cette "Web App" est déjà hébergée sur Google App Engine...

*Allez dans "personnaliser et contrôler Google Chrome" > "plus d'outils" > "Créer des raccourcis vers des applications".

Réglez les dimensions de la fenêtre à votre guise. Les dimensions seront mémorisées.

Allez à la page de CKEditor pour Blogger

Boutons

Login to Blogger: se "loguer" sur Blogger
Blog: votre ou vos blogs devraient alors s'afficher. Choisissez celui pour lequel vous voulez créer un nouvel article.
Title: Titre de votre article
Create Post: publiez votre article. Quand on clique dessus, il semble n'y avoir aucune réaction, mais oui ! Votre article a bien été publié sur votre blog...

Conseils

Pour remplir toute la fenêtre, cliquez sur l'icône. C'est plus confortable...
Par contre, si vous utilisez un modèle de message, ce modèle ne s'affichera pas. Il vaut donc mieux enregistrer le code de votre modèle dans un fichier texte* pour l'avoir sous la main et le recopier dans le "source" de votre nouvel article. Il est cependant possible qu'avec un modèle très compliqué vous risquiez de "perdre des plumes". Mais on peut toujours essayer!
Pour l'utiliser sur une autre plateforme que Blogger, créez votre page ou article. Quand c'est fait, passez en mode source (HTML) et copiez-collez le code sur votre autre plateforme.
Pour Gmail, il suffit de copier-coller votre travail en mode normal (rédiger) dans votre email ou même dans votre signature Gmail car l'éditeur de Gmail ne dispose pas d'affichage HTML (attention cependant, tout ne peut pas être utilisé dans Gmail, les iframes et les scripts par exemple. Par contre, pas de gros problèmes avec les tableaux).

* TRUC: mettez le code HTML de votre (ou vos) modèle(s) dans votre éditeur de texte préféré > Enregistrez-le sous le nom de "html_model.txt" (par exemple) > ouvrez-le avec votre navigateur (Ctrl+o) > mettez-le dans vos favoris (bien visible). Attention! Quand vous ouvrirez votre fichier texte dans votre navigateur, il est possible que les caractères accentués soient altérés. Solution: Allez dans "personnaliser et contrôler Google Chrome" > "plus d'outils" > "codage" et choisissez Unicode (UTF-8). L'affichage des caractères accentué devrait redevenir normal.

image de capture

À gauche, l'icône/logo de CKEditor. Si vous créez une Web Application avec Chrome, il va utiliser le "favicon" du site comme icône, et évidemment, c'est monstrueusement pixelisé... Vous pouvez donc remplacer cette icône par celle-ci. Par contre, elle ne sera peut-être pas adaptée à votre thème d'icône... Il faudra peut-être la retravailler avec un éditeur d'image. Pour info, les raccourcis bureau sont dans /.local/share/applications/. Ceux qui n'y sont pas sont probablement dans /usr/share/applications (à éditer en root). Les icône devraient se trouver dans ce coin là (il faut fouiner!): /home/utilisateur/.local/share/icons/

Liens de cette page

http://blogger-ckeditor-sample.appspot.com/

http://en.wikipedia.org/wiki/CKEditor

http://ckeditor.com/

http://computing.help.inf.ed.ac.uk/main-web-via-web

http://www.seamonkey-project.org/

https://draft.blogger.com/home

http://jean-louis.pierre.pagesperso-orange.fr/Crypter-le-HTML.htm

http://www.frenchmozilla.fr/kompozer.php

Edited May 10, 2015 by nettlebay