Composez du texte enrichi dans un éditeur en direct et récupérez le HTML généré, avec mise en forme, listes, liens et vue source.
Composez du texte enrichi dans un éditeur en direct et récupérez le HTML généré, avec mise en forme, listes, liens et vue source. Composez du texte enrichi dans un éditeur en direct et récupérez le HTML généré, avec mise en forme, listes, liens et vue source.
WYSIWYG signifie What You See Is What You Get (ce que vous voyez est ce que vous obtenez). Au lieu de saisir des balises HTML brutes, vous éditez un document visuellement — gras, italique, titres, listes, liens, et ainsi de suite — et l'éditeur traduit vos actions en balisage pour vous. La page que vous regardez utilise la capacité intégrée contenteditable du navigateur plus l'API document.execCommand, qui fait partie de chaque navigateur majeur depuis plus d'une décennie. Aucune bibliothèque tierce n'est impliquée : la mise en forme est appliquée nativement par le navigateur, donc le HTML généré correspond exactement à ce que votre navigateur produit pour toute autre zone éditable sur le web.
La barre d'outils couvre les opérations dont la plupart des gens ont besoin : annuler/refaire, gras, italique, souligné, barré, titres H1-H3, paragraphes, blocs de code, listes à puces et numérotées, citations, liens, et suppression de toute la mise en forme. Les sélecteurs de police et de taille changent la fonte et la taille de police de la sélection courante. La bascule Source alterne entre la vue rendue et une zone de texte brute contenant le HTML, que vous pouvez éditer directement. La ligne de statistiques sous l'éditeur affiche le nombre de caractères et de mots du contenu courant.
L'éditeur produit un balisage sémantique plutôt qu'une soupe de présentation partout où c'est possible : les titres deviennent <h1>/<h2>/<h3>, les listes deviennent <ul>/<ol>/<li>, les citations deviennent <blockquote>, et le code devient <pre>. La mise en forme au niveau du texte est appliquée avec <strong>, <em>, <u>, et <del>. Comme execCommand du navigateur est le moteur, le balisage exact peut varier légèrement entre les navigateurs — un clic en gras peut produire <strong> dans un navigateur et <b> dans un autre. Pour une compatibilité maximale, le HTML exporté est volontairement minimal et peut être collé dans des e-mails, des éditeurs CMS, ou des systèmes de documentation sans nettoyage supplémentaire.
Copiez le HTML exporté depuis le champ de sortie après bascule vers la vue source, ou utilisez le bouton Copier le HTML. En collant dans un client e-mail, gardez le balisage simple — de nombreux clients retirent <style> et l'imbrication complexe. Si vous devez intégrer ce contenu dans une page qui a déjà ses propres styles, préférez les balises sémantiques et évitez les styles inline ; le balisage exporté n'utilise aucun style inline, il hérite donc naturellement du CSS de votre page. Tout sur cette page s'exécute localement dans votre navigateur ; le contenu ne quitte jamais la page.