Qu'est-ce que c'est ? WYSIWYG (What You See Is What You Get) (Ce que vous voyez est ce que vous obtenez)

WYSIWYG est un acronyme pour What You See Is What You Get (Ce que vous voyez est ce que vous obtenez). Il est utilisé pour les outils dans lesquels vous créez/modifiez du contenu en temps réel et voyez une prévisualisation en direct au fur et à mesure que vous travaillez.

Ces éditeurs/éditrices sont incroyablement utiles en ligne, en particulier pour la création de contenu pour les sites web. Qu’il s’agisse d’écrire une publication de blog, de rédiger un e-mail ou de concevoir une page web, un éditeur WYSIWYG rend le travail plus facile et plus efficace.

Pourquoi utiliser l’éditeur WYSIWYG ?

Les éditeurs/éditrices WYSIWYG sont dotés de nombreuses fonctionnalités avant d’améliorer votre processus de création de contenu. Les fonctionnalités et l’aspect sont généralement les mêmes, que vous ayez un site WordPress ou que vous utilisiez un autre système de gestion de contenu (CMS).

Vous trouverez dans la plupart des cas les fonctionnalités suivantes :

Formatage du texte : Ces éditeurs/éditrices vous permettent de mettre votre texte en gras, en italique, de le souligner et de le barrer, comme vous le feriez dans un traitement de texte. En fait, ils sont souvent appelés éditeurs/éditrices de texte riche parce qu’ils vous permettent de modifier le contenu d’une manière familière, comme dans Microsoft Word.
Liens : Vous pouvez facilement ajouter des liens à votre contenu en cliquant simplement sur un bouton dans une barre d’outils et en collant l’URL. Vous n’aurez pas à ajouter ou modifier le code HTML pour créer votre contenu.
Images : L’ajout de publicités est un jeu d’enfant. Vous pouvez les téléverser directement depuis votre appareil ou les insérer à partir d’une source en ligne. De nombreux éditeurs/éditrices WYSIWYG vous permettent même de coller une image directement en ligne.
Création de tableaux : Vous avez besoin de présenter des données de manière claire ? Les éditeurs/éditrices WYSIWYG vous permettent de créer des tableaux dans votre contenu sans avoir à recourir à d’autres applications web, telles que Google Sheets, ou à des contenus embarqués spéciaux.

Mais ce n’est pas tout. Les éditeurs/éditrices WYSIWYG offrent également des fonctionnalités avant la vérification de l’orthographe, la vue du code source, etc. Toutes ces fonctionnalités vous permettent de vous concentrer sur la création d’un contenu de qualité sans vous soucier d’apprendre le PHP, le CSS ou la conception web.

Fonctionnalités supplémentaires des éditeurs/éditrices WYSIWYG

En outre, les éditeurs/éditrices WYSIWYG sont généralement dotés d’un grand nombre de fonctionnalités destinées à simplifier et à améliorer le processus de création de contenu.

La plupart des éditeurs/éditrices WYSIWYG disposent d’un correcteur orthographique intégré. Cet outil intégré est très pratique : il souligne automatiquement les mots mal orthographiés, ce qui vous aide à éviter les fautes de frappe gênantes dans votre contenu.

Une autre partie extrêmement importante de WYSIWYG est la vue du code HTML. Elle vous permet de passer de la vue de la conception visuelle à celle du balisage en toute transparence.

L’examen du code HTML est idéal lorsque vous avez besoin de dépanner.

Il peut s’agir de problèmes liés à des images ou à une mise en forme incorrecte du texte en raison d’un copier/coller.

Sans oublier que de nombreux éditeurs/éditrices WYSIWYG sont livrés avec un ensemble robuste d’outils de conception. Par exemple, l’éditeur Gutenberg pour WordPress est un outil de conception interactif par glisser-déposer qui vous permet de rédiger du contenu et d’utiliser des modèles pour créer tout ce que vous pouvez imaginer juste devant vos yeux.

L’interface est toujours conviviale, de sorte que même si vous n’êtes pas un as de la technologie, vous serez en mesure de donner à votre contenu un aspect professionnel et soigné en quelques clics.

Éditeur de blocs WordPress

L’éditeur Gutenberg a été introduit en 2018 et a modifié l’interface utilisateur pour la création de contenu avec WordPress.

À son cœur, Gutenberg est un éditeur basé sur des blocs que vous pouvez utiliser sur le frontend ou l’interface d’administration de votre site.

Au lieu d’écrire et de concevoir dans une grande zone de texte, comme dans un éditeur de texte riche tel que TinyMCE, vous créez votre contenu à l’aide de blocs individuels. TinyMCE est un éditeur WYSIWYG open source qui a servi de base à l’ancien éditeur de contenu de WordPress, aujourd’hui appelé éditeur classique.

Il peut s’agir de paragraphes, de titres, d’images, de vidéos, de citations, voire d’éléments plus complexes tels que des tableaux ou des balises HTML personnalisées.

Chaque bloc Gutenberg peut être personnalisé et déplacé individuellement, ce qui vous permet d’exercer un contrôle sans précédent sur la mise en page et le design de votre contenu. Vous pouvez même utiliser des compositions prédéfinies appelées Mises en page pour disposer d’un modèle avec lequel travailler à l’intérieur de l’éditeur de blocs.

Vous pouvez déplacer des blocs en temps réel et voir exactement à quoi ressemblera votre publication de blog ou votre page d’atterrissage avant même de la publier.

Gutenberg n’est cependant pas le seul éditeur WYSIWYG pour la conception de sites web. Les constructeurs de sites non WordPress comme Squarespace proposent une modification WYSIWYG, et d’autres thèmes et extensions WordPress comme SeedProd et Divi le font également.

L’interface WSYIWYG de SeedProd est simple et intuitive, que vous modifiiez du texte ou l’ensemble de votre mise en page.

Beaucoup de ces outils ont des fonctionnalités plus avancées et une meilleure expérience utilisateur que Gutenberg, de sorte que beaucoup d’utilisateurs/utilisatrices pro commencent à les utiliser tout en continuant à améliorer leurs compétences en développement web.

Modifications courantes dans la modification WYSIWYG

Lorsque vous commencerez à utiliser les éditeurs/éditrices WYSIWYG plus fréquemment, il est inévitable que vous rencontriez quelques problèmes ou obstacles. Mais ne vous inquiétez pas ! La plupart de ces problèmes courants ont des solutions simples. Jetons un coup d’œil à certains d’entre eux.

Questions de formatage

L’un des problèmes les plus courants que vous pouvez rencontrer est celui de la mise en forme. Par exemple, votre texte peut ne pas être aligné correctement ou la taille de la police peut ne pas s’ajuster comme vous le souhaitez. Cela est souvent dû au fait que le texte copié contient du HTML, du CSS ou même du JavaScript supplémentaires.

Pour corriger ce problème, essayez d’abord de coller votre texte dans un éditeur/éditrices de texte brut, comme Notepad++. Copiez-le ensuite dans l’éditeur WYSIWYG. Cela supprime généralement tout code supplémentaire, ce qui autorise l’éditeur WYSIWYG à mieux formater le texte.

Les liens et les images seront également supprimés, vous devrez donc les réinsérer en utilisant l’éditeur de texte riche ou la vue du code HTML.

Les images ne s’affichent pas

Un autre problème courant est que les images ne s’affichent pas correctement ou pas du tout. Cela peut être dû au fait que l’URL de l’image est incorrecte ou que le fichier image n’est pas supporté. Vérifiez toujours que votre URL est correcte. Si vous téléversez des images, assurez-vous qu’elles sont dans un format adapté au web, tel que .jpg, .png ou .gif.

Par exemple, si vous utilisez un format comme .svg, WordPress a besoin d’un ajustement supplémentaire pour fonctionner correctement. En savoir plus, vous pouvez consulter notre guide sur la façon de faire fonctionner les fichiers SVG en toute sécurité avec WordPress.

Modifications inattendues du code

Parfois, vous pouvez trouver que le code est modifié de manière inattendue après avoir été enregistré. Les éditeurs/éditrices WYSIWYG ne sont pas parfaits et peuvent ajouter du HTML ou du CSS que vous n’aviez pas prévu. Cela peut modifier l’aspect et la convivialité de votre contenu.

Pour y remédier, vous pouvez passer à la vue du code HTML et retirer manuellement tout code indésirable. Soyez prudent, cependant, car vous devez avoir des connaissances de base en matière de balise HTML pour effectuer cette opération en toute sécurité.

Problèmes de compatibilité des navigateurs

Enfin, il se peut que vous rencontriez des problèmes lors de la vue de votre contenu sur différents navigateurs. Tous les navigateurs n’interprètent pas le HTML et le CSS de la même manière, et le JavaScript peut agir différemment selon les Réglages de votre système.

Tout cela peut conduire à des incohérences dans l’affichage de votre contenu. Testez toujours votre site dans plusieurs navigateurs, notamment Chrome, Firefox, Safari et Microsoft Edge, pour être sûr que votre contenu s’affiche correctement quel que soit l’endroit où il est vu.

Dernières réflexions sur les éditeurs/éditrices WYSIWYG

Les éditeurs WYSIWYG, comme l’Éditeur Gutenberg de blocs de WordPress ou même l’éditeur classique TinyMCE, plus ancien et open-source, sont des outils vitaux qui peuvent simplifier considérablement votre processus de création de contenu.

Grâce à des fonctionnalités telles que l’édition en temps réel par glisser-déposer, l’affichage du code HTML et les modèles, ces outils de conception web vous permettent de vous concentrer davantage sur la qualité de votre contenu plutôt que sur le codage.

Nous espérons que cela vous a appris à connaître les éditeurs/éditrices WYSIWYG et comment ils peuvent vous aider à améliorer vos compétences en matière de conception de sites Web. Vous pouvez également consulter nos choix d’experts sur les meilleurs constructeurs de pages par glisser-déposer pour WordPress et notre guide sur la façon de choisir le meilleur logiciel de conception Web pour votre site.

Ressources complémentaires

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Qu'est-ce que c'est : WYSIWYG (What You See Is What You Get) (Ce que vous voyez est ce que vous obtenez)