--- title: document.execCommand slug: Web/API/Document/execCommand tags: - API - Commandes - DOM - Exécution - Méthodes translation_of: Web/API/Document/execCommand ---

{{ApiRef("DOM")}}
Lorsqu'un document HTML est passé à designMode, l'objet document expose la méthode execCommand qui permet d'exécuter des commandes pour manipuler le contenu de la zone modifiable, telle que les éléments form inputs ou contentEditable .

La plupart des commandes affectent la sélection du document (gras, italique, etc.), tandis que d'autres ajoutent de nouveaux éléments (ajout d'un lien) ou affectent une ligne entière (indentation). Lorsque vous utilisez contentEditable, l'appel execCommand() affectera l'élément modifiable actuellement actif.

Syntaxe

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

Valeur retournée

Un {{jsxref('Boolean')}} qui est à false (faux) si la commande n'est pas supportée ou désactivée.

 Note : Ne renvoie true (vrai) que dans le contexte d'une interaction utilisateur. Ne pas utiliser la valeur de retour pour vérifier le support du navigateur avant d'appeler une commande.

Paramètres

aCommandName
{{domxref("DOMString")}} spécifie le nom de la commande à exécuter ​​​​​​. Voir {{anch("Commands")}} pour la liste des commandes possibles .

aShowDefaultUI
Un {{jsxref("Boolean")}} indiquant si l'interface utilisateur par défaut doit être affichée. Ceci n'est pas implémenté par Mozilla.

aValueArgument
Pour les commandes qui nécessitent un argument , il s'agit d'une {{domxref ("DOMString")}} (chaîne de caractères) fournissant ces informations. Par exemple, insertImage requière l'URL de l'image à insérer. Spécifiez null si aucun argument n'est nécessaire.

Commandes

backColor
Change la couleur d'arrière-plan du document. En mode styleWithCss, il affecte plutôt la couleur de fond du bloc contenant. Cela nécessite une chaîne de valeurs {{cssxref ("<color>")}} pour être transmise en tant qu'argument de valeur. Notez que Internet Explorer utilise cette option pour définir la couleur d'arrière-plan du texte.

bold
Ajoute ou enlève l'affichage bold de la sélection ou au point d'insertion. Internet Explorer utilise la balise {{HTMLElement("strong")}} au lieu de {{HTMLElement("b")}}.

contentReadOnly
Rend le  contenu du document en lecture seule ou modifiable. Cela nécessite qu'un booléen true / false soit transmis en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)

copy
Copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la table de compatibilité pour déterminer si vous pouvez l'utiliser dans votre cas.

createLink
Crée un lien d'ancrage à partir de la sélection, uniquement s'il existe une sélection. Cela nécessite que la chaîne URI HREF soit transmise en tant qu'argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI null.)

cut
Coupe et copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la table de compatibilité pour déterminer si vous pouvez l'utiliser dans votre cas.

decreaseFontSize
Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou du point d'insertion (Non pris en charge par Internet Explorer).

defaultParagraphSeparator
Change le séparateur de paragraphes utilisé lorsque de nouveaux paragraphes sont créés dans les zones de textes modifiables. Voir Contenu éditable pour plus de détails.

delete
Supprime la sélection courante

enableInlineTableEditing
Active ou désactive les commandes d'insertion et de suppression des lignes et des colonnes du tableau. (Non pris en charge par Internet Explorer.)

enableObjectResizing
Active ou désactive les poignées de redimensionnement des images et autres objets redimensionnables. (Non pris en charge par Internet Explorer.)

fontName
Modifie le nom de police de la sélection ou du point d'insertion. Cela nécessite une chaîne de nom de police (tel qu'"Arial") à transmettre comme argument de valeur.

fontSize
Modifie la taille de police pour la sélection ou au point d'insertion. Cela nécessite que la taille d'une police HTML (1-7) soit transmise en tant qu'argument de valeur.

foreColor
Modifie une couleur de police pour la sélection ou au point d'insertion. Cela nécessite qu'une chaîne de valeurs de couleur soit transmise en tant qu'argument de valeur.

formatBlock
Ajoute une balise HTML style bloc autour de la ligne contenant la sélection en cours, en remplaçant l'élément bloc contenant la ligne si elle existe (dans Firefox, BLOCKQUOTE est l'exception - il enroule tout élément bloc contenant). Nécessite la saisie d'une chaîne de nom d'étiquette comme argument de valeur. Pratiquement toutes les étiquettes de style de bloc peuvent être utilisées (par exemple "{{HTMLElement("h1")}}", "{{HTMLElement("p")}}", "{{HTMLElement("dl")}}", "{{HTMLElement("blockquote")}}"). (Internet Explorer ne prend en charge que les balises de titre H1 - H6, ADDRESS et PRE, qui doivent également inclure les délimiteurs de balises <>, tels que "<H1>".)

forwardDelete
Supprime le caractère avant la position du curseur. Il est le même que frapper la touche de suppression.

heading
Ajoute une balise de titre autour d'une ligne de sélection ou d'insertion. Nécessite que la chaîne de nom d'étiquette soit transmise en tant qu'argument de valeur (c'est-à-dire "{{HTMLElement("H1")}}", "{{HTMLElement("H6")}}"). (Non pris en charge par Internet Explorer et Safari.)

hiliteColor
Modifie la couleur d'arrière-plan de la sélection ou du point d'insertion. Nécessite une chaîne de valeurs de couleur à transmettre comme argument de valeur. UseCSS doit être à true (vrai) pour que cela fonctionne. (Non pris en charge par Internet Explorer.)

increaseFontSize
Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)

indent
Décale la ligne contenant le point de sélection ou d'insertion. Dans Firefox, si la sélection s'étend sur 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 une balise br ou divise l'élément de bloc courant en deux. (Non pris en charge par Internet Explorer.)

insertHorizontalRule
Insère une ligne horizontale au point d'insertion. (Supprime la sélection)

insertHTML
Insère une chaîne HTML au point d'insertion (supprime la sélection). Nécessite une chaîne HTML valide à transmettre en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)

insertImage
Insère une image au point d'insertion (supprime la sélection). Nécessite l'image SRC URI chaîne à passer comme un argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI nulle.)

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

insertUnorderedList
Crée une liste non trié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 en cours. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)

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

italic
Active / désactive l'italique pour la sélection ou le point d'insertion. (Internet Explorer utilise la balise {{HTMLElement("em")}} au lieu de {{HTMLElement("i")}}).

justifyCenter
Centre le point de sélection ou d'insertion.

justifyFull
Justifie le point de sélection ou d'insertion.

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

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

outdent
Augmente la ligne contenant le point de sélection ou d'insertion.

paste
Colle le contenu du Presse-papiers au point d'insertion (remplace la sélection en cours). La fonctionnalité Presse-papiers doit être activée dans le fichier de préférences user.js. Voir [1].

redo
Rétablit la commande d'annulation précédente.

removeFormat
Supprime tout le formatage de la sélection en cours.

selectAll
Sélectionne tout le contenu de la zone modifiable.

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

subscript
Active ou désactive l'élément de souscription sur la sélection ou au point d'insertion.

superscript
Active / désactive l'élément de mise en exposant pour la sélection ou le point d'insertion.

underline
Active ou désactive l'élément d'annotation non textuelle pour la sélection ou le point d'insertion.

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

unlink
Supprime l'élément d'ancrage de l'hyperlien sélectionné.

useCSS {{Deprecated_inline}}
Active / désactive l'utilisation de balises HTML ou CSS pour le balisage généré. Nécessite un argument booléen vrai / faux comme argument de valeur. REMARQUE : Cet argument est logiquement inverse (c.-à-d. utilise false pour utiliser CSS, true pour utiliser HTML). (Non pris en charge par Internet Explorer.) Cela a été obsolète; Utilisez plutôt la commande styleWithCSS.

styleWithCSS
Remplace la commande useCSS ; argument fonctionne comme prévu, c'est-à-dire true modifie / génère des attributs de style dans le balisage, false génère des éléments de mise en forme.

Exemple

Un exemple d'utilisation sur CodePen.

Spécifications

Spécification Statut Commentaire
{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}} {{Spec2('HTML Editing')}} Définition initiale.

Compatibilité des navigateurs

{{CompatibilityTable}}

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}[1] {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}
insertBrOnReturn {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
copy/cut {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoDesktop(41)}} 9 29 10
defaultParagraphSeparator {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoDesktop(55)}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatNo}}
ClearAuthenticationCache {{CompatNo}} {{CompatVersionUnknown}} {{CompatNo}} 6 {{CompatNo}} {{CompatNo}}
Fonctionnalité Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}[1] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
insertBrOnReturn {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
copy/cut {{CompatNo}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile(41)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}}
defaultParagraphSeparator {{CompatNo}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile(55)}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatNo}}
ClearAuthenticationCache {{CompatNo}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatNo}}
    
     

[1] Avant Firefox 41, la capacité du presse-papiers devait être activée dans le fichier de préférences user.js. Voir Un bref guide des préférences Mozilla pour plus d'informations. Si la commande n'était pas prise en charge ou activée, execCommand déclenchait une exception au lieu de renvoyer false. Dans Firefox 41 et versions ultérieures, la capacité du presse-papiers est activée par défaut dans n'importe quel gestionnaire d'événements capable de faire apparaître une fenêtre (scripts semi-approuvés), mais aucun contenu web ne peut lire le presse-papier. Les extensions web peuvent interagir avec le presse-papier.

Voir aussi