création de site internet

flus RSS du blogsur Facebooksur Twitter

04
10

WYSIHTML5, un nouvel éditeur WYSIWYG

dans Outils

TinyMCE et CKEditor sont les éditeurs WYSIWYG les plus connus et fréquemment rencontrés sur les sites. Mais pour les avoir déjà pratiqués, je leur trouve de nombreuses limites qui peuvent les rendre inadaptés (gestion des retours à la ligne / paragraphes, code HTML généré peu propre, ...). C'est pourquoi une nouvelle alternative, comme WYSIHTML5 est toujours intéressante à analyser.

De prime abord, la liste des fonctionnalités proposées est plutôt attirante. Notamment, pour les plus intéressantes, tout ce qui touche à la conversion des contenus issus d'éditeurs classiques (Word, ...), la gestion des retours chariots et des paragraphes, la génération d'un code HTML (HTML 5 même) propre et valide, la détection d'URL à la saisie... Bien sûr, les fonctionnalités plus classiques (mise en forme, version HTML, ...) restent présentes.

Ensuite, sa mise en oeuvre est relativement simple. Une fois les fichiers javascript inclus dans votre page, il faut créer un <textarea> classique, en veillant à bien spécifier un id.

<form><textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus></textarea></form>

Reste maintenant à ajouter la déclaration de la barre d'outil. De nombreuses commandes sont disponibles, à vous de choisir celles que vous souhaitez et à bien veiller à respecter leur appel. L'exemple ci-dessous permet de créer une barre d'outil avec les boutons pour mettre en gras et en italique, et un bouton pour ajouter un lien.

<div id="wysihtml5-toolbar" style="display: none;">
     <a data-wysihtml5-command="bold">bold</a>
     <a data-wysihtml5-command="italic">italic</a>
     <a data-wysihtml5-command="createLink">insert link</a>
     <div data-wysihtml5-dialog="createLink" style="display: none;">
          <label>
               Link:
               <input data-wysihtml5-dialog-field="href" value="http://" class="text">
          </label>
          <a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
     </div>
</div>

Il est évidemment possible de personnaliser l'aspect de cette barre d'outil via les CSS et/ou en utilisant des images à la place des libellés dans les <a>.

Enfin, il suffit d'initialiser WYSIHTML5 avec les différentes options de configuration proposées.

<script>
     var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
          toolbar: "wysihtml5-toolbar", // id of toolbar element
          parserRules: wysihtml5ParserRules // defined in parser rules set
     });
</script>

La seule limite à cet éditeur est qu'il est entièrement fondé sur du HTML5. Donc son fonctionnement n'est pas compatible avec les navigateurs plus anciens n'interprétant pas le HTML5. A la place est proposé un simple <textarea>. Mais, je cite les éditeurs : "Users with other browsers will see the textarea and are still able to write plain HTML by themselves." ("Les utilisateurs d'autres navigateurs - que ceux exploitant HTML5 - verront un textarea et pourront toujours y écrire eux-mêmes le code HTML") ...

Plus d'informations : WYSIHTML5 sur GitHub

Partager :