Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Document : méthode execCommand()

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

Note : Bien que la méthode execCommand() soit obsolète, il existe encore quelques cas d'utilisation valides qui n'ont pas d'alternatives viables. Par exemple, contrairement à la manipulation directe du DOM, les modifications effectuées par execCommand() préservent le tampon d'annulation (historique des modifications). Pour ces cas d'utilisation, vous pouvez toujours utiliser cette méthode, mais vérifiez la compatibilité inter-navigateurs, par exemple en utilisant document.queryCommandSupported().

La méthode execCommand de l'interface Document implémente plusieurs commandes différentes. Certaines permettent d'accéder au presse-papier, tandis que d'autres servent à éditer les champs de formulaire, les éléments contenteditable ou des documents entiers (lorsqu'ils sont passés en mode design).

Pour accéder au presse-papier, il est recommandé d'utiliser l'API Clipboard plus récente plutôt que execCommand().

La plupart des commandes affectent la sélection du document. Par exemple, certaines commandes (gras, italique, etc.) mettent en forme le texte actuellement sélectionné, tandis que d'autres suppriment la sélection, insèrent de nouveaux éléments (remplaçant la sélection) ou affectent une ligne entière (indentation). Seul l'élément éditable actuellement actif peut être modifié, mais certaines commandes (par exemple, copy) peuvent fonctionner sans élément éditable.

Note : Les modifications effectuées par execCommand() peuvent ou non déclencher les évènements beforeinput et input, selon le navigateur et la configuration. Si elles sont déclenchées, les gestionnaires d'évènements s'exécutent avant que execCommand() ne retourne. Les auteur·ice·s doivent être prudent·e·s avec ce type d'appels récursifs, en particulier s'ils appellent execCommand() en réponse à ces évènements. Depuis Firefox 82, les appels imbriqués à execCommand() échoueront toujours, voir le bogue 1634262 (angl.).

Syntaxe

js
execCommand(commandName, showDefaultUI, valueArgument)

Paramètres

commandName

Une chaîne de caractères définissant le nom de la commande à exécuter. Les commandes suivantes sont définies :

backColor

Modifie la couleur d'arrière-plan du document. En mode styleWithCss, cela affecte la couleur d'arrière-plan du bloc englobant à la place. Cela nécessite une chaîne de caractères de valeur <color> à passer en argument de valeur.

bold

Active ou désactive le gras pour la sélection ou au point d'insertion.

contentReadOnly

Rend le document de contenu soit en lecture seule, soit modifiable. Cela nécessite un booléen vrai/faux comme argument de valeur.

copy

Copie la sélection actuelle dans le presse-papier. Les conditions d'activation de ce comportement varient selon les navigateurs et ont évolué au fil du temps. Consultez le tableau de compatibilité pour déterminer si vous pouvez l'utiliser dans votre cas.

Crée un hyperlien à partir de la sélection, mais uniquement s'il y a une sélection. Nécessite une chaîne de caractères URI comme argument de valeur pour le href de l'hyperlien. L'URI doit contenir au moins un caractère, qui peut être un espace.

cut

Supprime la sélection actuelle et la copie dans le presse-papier. Le moment où ce comportement est activé varie selon les navigateurs, et ses conditions ont évolué au fil du temps. Consultez le tableau de compatibilité pour les détails d'utilisation.

decreaseFontSize

Ajoute une balise <small> autour de la sélection ou au point d'insertion.

defaultParagraphSeparator

Modifie le séparateur de paragraphe utilisé lors de la création de nouveaux paragraphes dans les zones de texte éditables.

delete

Supprime la sélection actuelle.

enableAbsolutePositionEditor

Active ou désactive la poignée qui permet de déplacer les éléments positionnés en absolu. La poignée est désactivée par défaut depuis Firefox 64 (bogue Firefox 1490641 (angl.)).

enableInlineTableEditing

Active ou désactive les contrôles d'insertion et de suppression de lignes/colonnes de tableau. Les contrôles sont désactivés par défaut depuis Firefox 64 (bogue Firefox 1490641 (angl.)).

enableObjectResizing

Active ou désactive les poignées de redimensionnement sur les images, tableaux, éléments positionnés en absolu et autres objets redimensionnables. Les poignées sont désactivées par défaut depuis Firefox 64 (bogue Firefox 1490641 (angl.)).

fontName

Modifie le nom de la police pour la sélection ou au point d'insertion. Cela nécessite une chaîne de caractères de nom de police (comme "Arial") comme argument de valeur.

fontSize

Modifie la taille de la police pour la sélection ou au point d'insertion. Cela nécessite un entier de 1 à 7 comme argument de valeur.

foreColor

Modifie la couleur de police pour la sélection ou au point d'insertion. Cela nécessite une chaîne de caractères de valeur hexadécimale comme argument de valeur.

formatBlock

Ajoute un élément HTML de niveau bloc autour de la ligne contenant la sélection actuelle, en remplaçant l'élément de bloc contenant la ligne si un existe (dans Firefox, <blockquote> est l'exception — il enveloppe tout élément de bloc englobant). Nécessite une chaîne de caractères de nom de balise comme argument de valeur. Pratiquement tous les éléments de niveau bloc peuvent être utilisés. (Edge hérité ne prend en charge que les balises de titre H1 à H6, ADDRESS, and PRE, qui doivent être entourées de chevrons, comme "<H1>".)

forwardDelete

Supprime le caractère devant la position du curseur, identique à l'appui sur la touche Suppr d'un clavier Windows.

heading

Ajoute un élément de titre autour d'une sélection ou d'une ligne au point d'insertion. Nécessite une chaîne de caractères de nom de balise comme argument de valeur (par exemple, "H1", "H6"). (Non pris en charge par Safari.)

highlightColor

Modifie la couleur d'arrière-plan pour la sélection ou au point d'insertion. Nécessite une chaîne de caractères de valeur de couleur comme argument de valeur. useCSS doit être à true pour que cela fonctionne.

increaseFontSize

Ajoute une balise <big> autour de la sélection ou au point d'insertion.

indent

Indente la ligne contenant la sélection ou le point d'insertion. Dans Firefox, si la sélection couvre plusieurs lignes à différents niveaux d'indentation, seules les lignes les moins indentées de la sélection seront indentées.

insertBrOnReturn

Contrôle si la touche Entrée insère un élément HTML <br>, ou divise l'élément de bloc actuel en deux.

insertHorizontalRule

Insère un élément HTML <hr> au point d'insertion, ou remplace la sélection par celui-ci.

insertHTML

Insère une instance TrustedHTML ou une chaîne de caractères de balisage HTML au point d'insertion (supprime la sélection). Cela nécessite un balisage HTML valide.

Attention : L'entrée est analysée comme du HTML et écrite dans le DOM. Les API de ce type sont connues comme des points d'injection, et sont potentiellement une porte d'entrée pour des attaques de cross-site scripting (XSS), si l'entrée provient d'un·e attaquant·e.

Vous pouvez réduire ce risque en assignant toujours des objets TrustedHTML au lieu de chaînes de caractères et en appliquant les types de confiance. Voir l'API Trusted Types pour plus d'informations.

insertImage

Insère une image au point d'insertion (supprime la sélection). Nécessite une chaîne de caractères d'URL pour le src de l'image comme argument de valeur. Les exigences pour cette chaîne de caractères sont les mêmes que pour createLink.

insertOrderedList

Crée une liste ordonnée numérotée pour la sélection ou au point d'insertion.

insertUnorderedList

Crée une liste non ordonnée à puces pour la sélection ou au point d'insertion.

insertParagraph

Insère un paragraphe autour de la sélection ou de la ligne actuelle.

insertText

Insère le texte brut donné au point d'insertion (supprime la sélection).

italic

Active ou désactive l'italique pour la sélection ou au point d'insertion.

justifyCenter

Centre la sélection ou le point d'insertion.

justifyFull

Justifie la sélection ou le point d'insertion.

justifyLeft

Justifie la sélection ou le point d'insertion à gauche.

justifyRight

Justifie la sélection ou le point d'insertion à droite.

outdent

Désindente la ligne contenant la sélection ou le point d'insertion.

paste

Colle le contenu du presse-papier au point d'insertion (remplace la sélection actuelle).

Cette fonctionnalité est définie comme désactivée pour le contenu web, mais a été implémentée via l'API Clipboard sur certains navigateurs. Sur ces navigateurs, la fonctionnalité nécessite l'activation transitoire, et la reconnaissance d'une interface contextuelle lors du collage de contenu inter-origine. Consultez le tableau de compatibilité des navigateurs pour plus d'informations.

redo

Refait la commande d'annulation précédente.

removeFormat

Supprime toute mise en forme de la sélection actuelle.

selectAll

Sélectionne tout le contenu de la région éditable.

strikeThrough

Active ou désactive le barré pour la sélection ou au point d'insertion.

subscript

Active ou désactive le texte en indice pour la sélection ou au point d'insertion.

superscript

Active ou désactive le texte en exposant pour la sélection ou au point d'insertion.

underline

Active ou désactive le soulignement pour la sélection ou au point d'insertion.

undo

Annule la dernière commande exécutée.

Supprime l'élément d'ancrage d'un hyperlien sélectionné.

useCSS Obsolète

Active ou désactive l'utilisation de balises HTML ou de CSS pour le balisage généré. Nécessite un booléen vrai/faux comme argument de valeur.

Note : Cet argument est logiquement inversé (c'est-à-dire, utilisez false pour utiliser le CSS, true pour utiliser le HTML). Cela a été rendu obsolète au profit de styleWithCSS.

styleWithCSS

Remplace la commande useCSS. true modifie ou génère des attributs style dans le balisage, faux génère des éléments de présentation.

AutoUrlDetect

Modifie le comportement d'auto-lien du navigateur.

showDefaultUI

Une valeur booléenne indiquant si l'interface utilisateur par défaut doit être affichée. Ceci n'est pas implémenté dans Mozilla.

valueArgument

Pour les commandes qui nécessitent un argument d'entrée, il s'agit d'une chaîne de caractères fournissant cette information. Par exemple, insertImage nécessite l'URL de l'image à insérer. Définir null si aucun argument n'est nécessaire.

Valeur de retour

Une valeur booléenne qui est false si la commande n'est pas prise en charge ou est désactivée.

Note : document.execCommand() retourne uniquement true si elle est invoquée dans le cadre d'une interaction utilisateur·ice. Vous ne pouvez pas l'utiliser pour vérifier la prise en charge du navigateur avant d'appeler une commande.

Exemple

Un exemple d'utilisation est disponible sur CodePen.

Spécifications

This feature does not appear to be defined in any specification.

Compatibilité des navigateurs

Voir aussi