Share
Les éditeurs WYSIWYG sont très populaires. Vous avez peut-être aussi utilisé un à un moment donné. Il existe de nombreuses bibliothèques disponibles pour vous aider à configurer votre propre éditeur. Bien qu'ils soient rapides à configurer, l'utilisation de ces bibliothèques présente également des inconvénients. Pour commencer, ils sont gonflés. La plupart d'entre eux ont des fonctionnalités sophistiquées que vous pourriez ne pas utiliser. De plus, personnaliser l'apparence de ces éditeurs peut être un casse-tête..
Dans ce tutoriel, nous construirons notre propre éditeur WYSIWYG léger. À la fin de ce didacticiel, vous disposerez d'un éditeur doté de fonctionnalités de formatage de base, stylisées selon vos préférences..
Commençons par l'introduction de execCommand. Nous allons utiliser cette commande pour implémenter intensivement notre éditeur..
execCommand est une méthode de l'objet document. Cela nous permet de manipuler le contenu d'une région éditable. Lorsqu'il est utilisé à côté contentEditable, cela peut nous aider à créer un éditeur de texte enrichi. Il y a beaucoup de commandes disponibles comme ajouter un lien, faire une sélection audacieux ou italique, et changer la taille ou la couleur de la police. Cette méthode suit la syntaxe:
document.execCommand (CommandName, ShowDefaultUI, ValueArgument);
CommandName est une chaîne qui spécifie le nom de la commande à exécuter. ShowDefaultUIest un booléen pour indiquer si l'interface de support doit être affichée ou non. Cette option n'est pas entièrement implémentée et il est préférable de la définir sur false.. ValueArgument est une chaîne pour fournir des informations telles que l'URL de l'image ou couleur de premier plan. Cet argument est défini sur nul lorsqu'une commande ne nécessite pas qu'une valeur prenne effet.
Nous devrons utiliser différentes versions de cette méthode pour implémenter différentes fonctionnalités. Dans les prochains paragraphes, je les passerai tous en revue un par un..
Les commandes telles que gras, justifier, annuler et rétablir n'ont pas besoin d'un ValueArgument. Dans ce cas, nous utilisons la syntaxe suivante:
document.execCommand (commandName, false, null);
CommandName est simplement le nom de la commande comme justifierCenter, justifierDroit, audacieux, etc.
Des commandes comme Insérer une image, createLink et couleur de premier plan besoin d'un troisième argument pour fonctionner correctement. Pour ces commandes, vous avez besoin de la syntaxe suivante:
document.execCommand (commandName, false, value);
Pour Insérer une image, la valeur serait l'URL de l'image à insérer. Dans le cas de couleur de premier plan, ce serait une valeur de couleur comme # FF9966 ou un nom comme bleu.
L’ajout de balises HTML de style bloc vous oblige à utiliser formatBloc comme nom de commande et le nom de la balise comme valeurArgument. La syntaxe serait semblable à:
Accentsconagua
document.execCommand ('formatBlock', false, tagName);Cette méthode ajoutera une balise HTML de style bloc autour de la ligne contenant la sélection actuelle. Il remplace également toute balise qui existait déjà là-bas. tagName peut être n'importe laquelle des balises de titre (h1-h6), p ou blockquote.
J'ai discuté des commandes les plus courantes ici. Vous pouvez visiter Mozilla pour une liste de toutes les commandes disponibles..
Avec les bases de notre chemin, il est temps de créer la barre d'outils. Je vais utiliser les icônes Font Awesome pour les boutons. Vous avez peut-être remarqué que, mis à part quelques différences, tous les execCommands ont une structure similaire. Nous pouvons utiliser cela à notre avantage en utilisant le balisage suivant pour les boutons de la barre d'outils:
Ainsi, chaque fois que les utilisateurs cliquent sur un bouton, nous serons en mesure de dire quelle version de execCommand à utiliser en fonction de la valeur de commande de données attribut. Voici quelques boutons pour référence:
H2
le commande de données valeur d'attribut pour le premier bouton est h2. Après vérification de cette valeur en JavaScript, nous utiliserons le formatBloc version du execCommand méthode. De même, pour le dernier bouton, en exposant suggère que nous devons utiliser le non valeurArgument version de execCommand.
En créant couleur de premier plan et couleur de fond boutons est une histoire différente. Ils posent deux problèmes. En fonction du nombre de couleurs proposées aux utilisateurs, écrire autant de code peut être fastidieux et sujet aux erreurs. Pour résoudre ce problème, nous pouvons utiliser le code JavaScript suivant:
var colorPalette = ['000000', 'FF9966', '6699FF', '99FF66', 'CC0000', '00CC00', '0000CC', '333333', '0066FF', 'FFFFFF']; var forePalette = $ ('. fore-palette'); pour (var i = 0; i < colorPalette.length; i++) forePalette.append(''); Notez que je mets aussi un Valeur des données attribut pour chaque couleur. Ce sera ensuite utilisé comme valeurArgument dans le execCommand méthode.
Le deuxième problème est que nous ne pouvons pas afficher autant de couleurs en permanence, car cela prendrait beaucoup de place et créerait une expérience utilisateur déplorable. En utilisant un peu de CSS, nous pouvons nous assurer que la palette de couleurs n'apparaît que lorsqu'un utilisateur survole ses boutons. Le balisage de ces boutons doit également être modifié comme suit:
Pour afficher les palettes uniquement sur flotter, nous avons besoin du CSS suivant:
.fore-palette, .back-palette display: none; .fore-wrapper: survoler .avant-palette, .back-wrapper: survoler .back-palette display: block; float: gauche; position: absolue;
Il y a beaucoup d'autres règles CSS dans la démo de CodePen pour rendre la barre d'outils plus jolie, mais c'est tout ce dont vous avez besoin pour les fonctionnalités principales..
Maintenant, il est temps de rendre notre éditeur fonctionnel. Le code requis pour le faire est étonnamment petit.
$ ('. toolbar a'). click (fonction (e) var commande = $ (this) .data ('commande'); if (commande == 'h1' || commande == 'h2' || commande == 'p') document.execCommand ('formatBlock', false, commande); if (command == 'prevouleur' ||| comm == 'backcolor') document.execCommand ($ (this) .data ( 'commande'), false, $ (this) .data ('valeur')); if (commande == 'createlink' || commande == 'insertimage') url = prompt ('Entrez le lien ici:' , 'http: \ / \ /'); document.execCommand ($ (this) .data ('command'), false, url); else document.execCommand ($ (this) .data ('command'), false, null););Nous commençons par attacher un événement de clic à tous les boutons de la barre d’outils. Chaque fois qu'un bouton de la barre d'outils est cliqué, nous stockons la valeur du commande de données attribut du bouton correspondant dans la variable, commander. Ceci est utilisé plus tard pour appeler la version appropriée du execCommand méthode. Cela aide à écrire un code concis et évite les répétitions.
Lors du réglage couleur de premier plan et couleur de fond, J'utilise le Valeur des données attribuer comme troisième argument. createLink et Insérer une image ne pas avoir une constante url valeur, nous utilisons donc une invite pour obtenir les valeurs de l'utilisateur. Vous pouvez également effectuer des vérifications supplémentaires pour vous assurer que le url est valable. Si la commander variable ne satisfait à aucun des si blocs, nous courons la première version de execCommand.
Voici à quoi ressemble notre éditeur WYSIWYG.
Vous pouvez également implémenter la fonctionnalité de sauvegarde automatique en utilisant stockage local que j'ai discuté dans mon dernier tutoriel.
Divers navigateurs ont des différences mineures d'implémentation. Par exemple, gardez à l’esprit que lors de l’utilisation de formatBloc, Internet Explorer prend en charge uniquement les balises de titre h1 - h6, adresse et pré. Vous devez également inclure les délimiteurs de balises lors de la spécification du nom de commande comme .
Toutes les commandes ne sont pas supportées par tous les navigateurs. Internet Explorer ne prend pas en charge les commandes telles que insertHTML et hiliteColor. De même, insertBrOnReturn est supporté uniquement par Firefox. Vous pouvez en savoir plus sur les incohérences de navigateur sur cette page GitHub.
Créer votre propre éditeur WYSIWYG peut être une expérience enrichissante. Dans ce tutoriel, j'ai abordé de nombreuses commandes et utilisé des CSS pour un style de base. En guise d’exercice, je vous suggère d’essayer d’implémenter un bouton de barre d’outils pour définir Police de caractère d'une sélection de texte. La mise en œuvre sera similaire à celle de la couleur de premier plan bouton.
J'espère que vous avez aimé ce tutoriel et appris quelque chose de nouveau. Si vous avez créé votre propre éditeur WYSIWYG à partir de rien, n'hésitez pas à le lier dans la section commentaires.
