Search the Community

le 15/07/15 J'ai créé récemment un article sur un éditeur WYSIWYG: CKEditor. C'est une "Web App" qui généralement me suffit largement. Mais j'avais parlé accessoirement de COMPOSER qui est un bon éditeur Web WYSIWYG de Mozilla. L'article qui suit est un copié-collé (ou presque) d'un article perso sur mon blog Tuxnotes. Composer est un éditeur HTML WYSIWYG assez peu connu qui fait partie de l'ex-suite Mozilla qui s'appelle elle-même maintenant Seamonkey. Il est probablement le meilleur éditeur gratuit sur Ubuntu. Gratuit ? Car, oui, il en existe des payants même sous Ubuntu. C'est une évidence, on trouve de plus en plus de logiciels payants sous Linux, chose inimaginable il y a quelques années. Les bonnes manières se perdent... Il ne faut pas le confondre avec Kompozer -plus connu- qui n'est plus beaucoup suivi, assez bogué et d'ailleurs impossible paraît-t-il à installer actuellement sur Ubuntu 14.04 Trusty Tarh et dérivés. "SeaMonkey's powerful yet simple HTML editor keeps getting better with dynamic image and table resizing, quick insert and delete of table cells, improved CSS support, and support for positioned layers. For all your documents and website projects, Composer is all you need." Traduc: Le puissant mais simple Editeur HTML de SeaMonkey continue de s'améliorer avec image dynamique et redimensionnement de tableaux, insertion rapide et suppression de cellules dans un tableau, un support amélioré du CSS, et le support des calques. Pour tous vos documents et projets de sites web, Composer est tout ce dont vous avez besoin. Seamonkey est une suite qui comprend un navigateur Web (fork de Firefox), un client mail (fork de Thunderbird), un agenda (fork de Sunbird), un tchat et un éditeur HTML WYSIWYG, COMPOSER. C'est ce dernier qui nous intéresse ici. L'inconvénient, c'est que ça oblige à installer une suite complète pour utiliser seulement un seul soft. Vous pouvez évidement essayer les autres logiciels de la suite. Le navigateur utilise la plupart des mêmes modules que Firefox (extensions). Seamonkey n'est pas idéal à installer car en général, on ne le trouve pas spontanément dans Synaptic ou le Software Center. Il faut donc ajouter le PPA dans vos dépôts. Ci-dessous les 4 commandes liées pour le PPA, la clé, l'update et l'installation (copiez-collez dans votre Terminal). Les "&&" séparent les différentes commandes. Si l'une échoue, les suivantes ne sont pas exécutées. Attention! Il existe -paraît-il- un risque de casser quelque chose dans votre Linux en installant Seamonkey (mais je crois que c'est une blague ). Il est donc préférable -on ne sait jamais- de faire un backup avant avec Clonezilla. Personnellement, je n'ai jamais eu de problème. echo -e "\ndeb http://downloads.sourceforge.net/project/ubuntuzilla/mozilla/apt all main" | sudo tee -a /etc/apt/sources.list > /dev/null && sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com C1289A29 && sudo apt-get update && sudo apt-get install seamonkey-mozilla-build Pour info: les "&&" entre les différentes commandes font que si une commande échoue, la suivante ne sera pas lancée. Si on veut que les commandes suivantes soient quand même lancées en cas d'échec de la précédente, il faut remplacer les "&&" par un "; " (point-virgule et 1 espace). On peut combiner les deux si nécessaire. Pour lancer Composer seul (sans passer par Seamonkey)... ..., il faut d'abord lancer le créateur de lanceur (launcher-creator)... gnome-desktop-item-edit ~/.local/share/applications/ --create-new Ce qui lance cette fenêtre Type: Application Nom: COMPOSER commande: seamonkey -edit Commentaire: Editeur Web WYSIWYG (facultatif) Cliquez sur l'icône à gauche et choisissez celle-ci (ou une autre si vous voulez): , puis Validez. Il faut évidement l'avoir enregistrée sur votre disque local. C'est la représentation stylisée d'une Artemia. Le lanceur devrait désormais apparaître dans votre menu "Applications" dans la catégorie "Autres" Si vous voulez qu'il apparaisse dans Programmation et Internet, rajoutez ceci à la fin: Categories=Development;Network Ci-dessous, le contenu de COMPOSER.desktop (le raccourci) qui se trouve maintenant (en principe) dans /home/user/.local/share/applications/ #!/usr/bin/env xdg-open [Desktop Entry] Version=1.0 Type=Application Terminal=false Icon[fr_FR]=/home/user/.local/share/applications/seam.png Name[fr_FR]=Composer Exec=seamonkey -edit Comment[fr_FR]=Editeur Web WYSIWYG Name=Composer Comment=Editeur Web WYSIWYG Icon=/home/user/.local/share/applications/seam.png Categories=Development;Network NOTES: WYSIWYG est l’acronyme de " What You See Is What You Get " signifiant en français "ce que vous voyez est ce que vous obtenez". COMPOSER est (plus ou moins, c'est assez complexe...) un fork du défunt NVU comme Kompozer ou BlueGriffon. Ce dernier est excellent et gratuit mais les "modules" additionnels sont payants. Ça devient vite lassant! Sur cette page http://computing.help.inf.ed.ac.uk/main-web-via-web, vous pourrez trouver un tuto pour utiliser Composer, mais c'est en Anglais. Il y en a un en Français ici mais il doit bien dater! Et en plus, c'est pour Windows (peut-être 95!). C'est ici et c'est très moche mais peut-être utile? Il y a aussi des liens sur Framasoft. Mais pour quelqu'un qui déjà une expérience de ce genre de soft, la prise en main est rapide. N'UTILISEZ JAMAIS un traitement de texte genre MS WORD pas même Publisher (ou similaire) pour créer une page Web! Le code HTML obtenu est bancal et super-lourd. Ou alors, utilisez un nettoyeur de code HTML... (c'est pas gagné!). Je pense que ça doit être guère mieux avec LibreOffice... mais je n'ai jamais essayé. Attention, dans certains cas, Composer peut très bien "casser" votre code HTML, surtout si celui-ci est un peu complexe ou "mal foutu"... L'autre icône bleue que vous voyez dans votre catégorie "Internet" est évidemment Seamonkey, le navigateur. Il est très rapide mais c'est toujours comme ça au début... Ajoutez quelques modules ou extensions et ce sera pareil que Firefox. L'affichage d'une page complexe ne pose quasiment pas de problème. Seamonkey signifie littéralement "singe de mer" en Anglais mais c'est en fait le nom populaire anglais pour la fameuse Artemia Salina (ou Artémie) qui est une sorte de petit crevette hyper-résistante (elle est vendu séchée en paquet et ressuscite quand on la met dans de l'eau). Elle est utilisée comme nourriture vivante pour les poissons d'élevage et d'aquarium. Elles sont devenues célèbres sous le nom de "Pifises" ou "Poudre de Vie" grâce au magazines pour enfants "Pif le chien". Pour gérer convenablement vos lanceurs et catégories d'applications, utilisez Alacarte (gestionnaire de menus). On peut le trouver dans les dépôts. Il y a aussi Ezame, mais je ne l'ai pas encore essayé. Liens dans cette page: Seamonkey dans Wikipedia The SeaMonkey® Project Article sur CKEditor http://computing.help.inf.ed.ac.uk/main-web-via-web http://tuxnotes.blogspot.com Artemia Salina http://www.chassan.org/rbi/tutor/Composer/Composer.htm http://www.bluegriffon.org/ http://www.framasoft.net/article1456.html

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