Skip to content

Commit da195a4

Browse files
tristanthebtristantheb
authored
chore(fr): update of Web/HTML/Reference/Global_attributes/contenteditable (#31354)
1 parent 13b68a2 commit da195a4

File tree

1 file changed

+113
-18
lines changed
  • files/fr/web/html/reference/global_attributes/contenteditable

1 file changed

+113
-18
lines changed

‎files/fr/web/html/reference/global_attributes/contenteditable/index.md‎

Lines changed: 113 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
---
2-
title: contenteditable
2+
title: "Attribut HTML universel : contenteditable"
3+
short-title: contenteditable
34
slug: Web/HTML/Reference/Global_attributes/contenteditable
4-
original_slug: Web/HTML/Global_attributes/contenteditable
5+
l10n:
6+
sourceCommit: 9cfc2285428932f448a1747e347b1e35a3e0172b
57
---
68

7-
{{HTMLSidebar("Global_attributes")}}
9+
L'[attribut universel](/fr/docs/Web/HTML/Reference/Global_attributes) **`contenteditable`** est un attribut énuméré qui indique si l'élément doit être éditable par l'utilisateur·ice. Si c'est le cas, le navigateur modifie son widget pour permettre l'édition.
810

9-
L'[attribut universel](/fr/docs/Web/HTML/Reference/Global_attributes) **`contenteditable`** est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.
10-
11-
{{InteractiveExample("HTML Demo: contenteditable", "tabbed-shorter")}}
11+
{{InteractiveExample("Démonstration HTML : contenteditable", "tabbed-shorter")}}
1212

1313
```html interactive-example
1414
<blockquote contenteditable="true">
15-
<p>Edit this content to add your own quote</p>
15+
<p>Éditez ce contenu pour ajouter votre propre citation</p>
1616
</blockquote>
1717

18-
<cite contenteditable="true">-- Write your own name here</cite>
18+
<cite contenteditable="true">-- Écrivez votre propre nom ici</cite>
1919
```
2020

2121
```css interactive-example
2222
blockquote {
23-
background: #eee;
23+
background: #eeeeee;
2424
border-radius: 5px;
2525
margin: 16px 0;
2626
}
@@ -47,16 +47,112 @@ blockquote p::after {
4747
}
4848
```
4949

50-
Les valeurs autorisées pour cet attribut sont :
50+
## Valeurs
51+
52+
Les valeurs autorisées pour cet attribut sont&nbsp;:
53+
54+
- `true`, ou la _chaîne de caractères vide_ qui indiquent que l'élément est éditable.
55+
- `false`, qui indique que l'élément ne peut pas être édité.
56+
- `plaintext-only`, qui indique que le texte brut de l'élément est éditable, mais que la mise en forme riche est désactivée.
57+
58+
Si l'attribut est donné sans valeur, comme `<label contenteditable>Exemple d'étiquette</label>`, sa valeur est traitée comme une chaîne de caractères vide.
59+
60+
Si cet attribut est absent ou si sa valeur est invalide, sa valeur est _héritée_ de son élément parent&nbsp;: l'élément est donc éditable si son parent l'est.
61+
62+
Notez que bien que ses valeurs autorisées incluent `true` et `false`, cet attribut est un attribut _[énuméré](/fr/docs/Glossary/Enumerated)_ et non un attribut _booléen_.
63+
64+
Vous pouvez définir la couleur utilisée pour dessiner le {{Glossary("caret")}} d'insertion du texte avec la propriété CSS {{CSSxRef("caret-color")}}.
65+
66+
Les éléments rendus éditables, et donc interactifs, à l'aide de l'attribut `contenteditable` peuvent être sélectionnés. Ils participent à la navigation clavier séquentielle. Cependant, les éléments avec l'attribut `contenteditable` imbriqués dans d'autres éléments `contenteditable` ne sont pas ajoutés à la séquence de tabulation par défaut. Vous pouvez ajouter les éléments `contenteditable` imbriqués à la séquence de navigation clavier en spécifiant la valeur `tabindex` ([`tabindex="0"`](/fr/docs/Web/HTML/Reference/Global_attributes/tabindex)).
67+
68+
Si du contenu est collé dans un élément avec `contenteditable="true"`, toute la mise en forme est conservée. Si du contenu est collé dans un élément avec `contenteditable="plaintext-only"`, toute la mise en forme est supprimée.
69+
70+
## Exemples
5171

52-
- `true` ou la chaîne de caractères vide qui indiquent que l'élément est éditable
53-
- `false` qui indique que l'élément ne peut pas être édité.
72+
### Coller du contenu dans `contenteditable`
5473

55-
Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.
74+
Cet exemple comporte deux éléments {{HTMLElement("div")}} avec `contenteditable`, le premier avec la valeur `true` et le second avec la valeur `plaintext-only`. Copiez le contenu ci-dessous et collez-le dans chaque `div` pour voir leurs effets.
5675

57-
Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que `<label contenteditable>Exemple</label>` n'est pas autorisée. La version correcte sera `<label contenteditable="true">Exemple</label>`.
76+
#### HTML
77+
78+
```html hidden
79+
<h2>Contenu à copier</h2>
80+
<p class="instructions">
81+
Copiez tout le texte du bloc ci-dessous et collez-le dans chacun des blocs
82+
contenteditable pour comparer les résultats.
83+
</p>
84+
<section class="copying">
85+
<div class="copy">
86+
<p>
87+
Ceci est un paragraphe contenant <strong>Gras</strong>,
88+
<em>Italique</em> et du texte <span class="red">rouge</span>, suivi d'une
89+
liste ordonnée&nbsp;:
90+
</p>
91+
<ol>
92+
<li>Étape un</li>
93+
<li>Étape deux</li>
94+
<li>Étape trois</li>
95+
</ol>
96+
</div>
97+
</section>
98+
```
99+
100+
```html
101+
<h2>Pasting areas</h2>
102+
<section class="pasting">
103+
<div class="wrapper">
104+
<h3>contenteditable="true"</h3>
105+
<div contenteditable="true"></div>
106+
</div>
107+
<div class="wrapper">
108+
<h3>contenteditable="plaintext-only"</h3>
109+
<div contenteditable="plaintext-only"></div>
110+
</div>
111+
</section>
112+
```
113+
114+
```css hidden
115+
h2 {
116+
margin-bottom: 0;
117+
}
118+
.copying {
119+
font-family: "Georgia", serif;
120+
margin: 1rem;
121+
padding: 1rem;
122+
border: solid black 1px;
123+
}
124+
.red {
125+
color: red;
126+
}
127+
.pasting {
128+
display: flex;
129+
flex-direction: row;
130+
gap: 1rem;
131+
width: 100%;
132+
.wrapper {
133+
flex: 1 1;
134+
margin: 0;
135+
padding: 0;
136+
}
137+
h3 {
138+
font-family: monospace;
139+
}
140+
[contenteditable] {
141+
min-height: 3rem;
142+
border: solid 1px;
143+
padding: 0.5rem;
144+
background-color: whitesmoke;
145+
}
146+
[contenteditable="true"] {
147+
caret-color: blue;
148+
}
149+
[contenteditable="plaintext-only"] {
150+
caret-color: red;
151+
}
152+
}
153+
```
58154

59-
Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.
155+
{{EmbedLiveSample("Coller du contenu dans `contenteditable`", 400, 620)}}
60156

61157
## Spécifications
62158

@@ -68,8 +164,7 @@ Il est possible de modifier la couleur du symbole d'insertion grâce à la propr
68164

69165
## Voir aussi
70166

71-
- [Rendre le contenu éditable](/fr/docs/Web/HTML/Reference/Global_attributes/contenteditable)
72167
- [Tous les attributs universels](/fr/docs/Web/HTML/Reference/Global_attributes)
73-
- {{domxref("HTMLElement.contentEditable")}} et {{domxref("HTMLElement.isContentEditable")}}
74-
- {{cssxref("caret-color")}}
168+
- Les propriétés DOM {{DOMxRef("HTMLElement.contentEditable")}} et {{DOMxRef("HTMLElement.isContentEditable")}}
169+
- La propriété CSS {{CSSxRef("caret-color")}}
75170
- [L'évènement `input` pour l'objet DOM `HTMLElement`](/fr/docs/Web/API/Element/input_event)

0 commit comments

Comments
 (0)