diff --git a/content/data/specifications.yaml b/content/data/specifications.yaml index 820a7189..507437eb 100644 --- a/content/data/specifications.yaml +++ b/content/data/specifications.yaml @@ -5,3 +5,4 @@ html.spec.whatwg.org: 'WHATWG HTML Living Standard' w3c.github.io/webappsec-cspee: 'Content Security Policy: Embedded Enforcement' w3c.github.io/webappsec-feature-policy: 'Feature Policy' wicg.github.io/priority-hints: 'Priority Hints' +w3c.github.io/contentEditable: 'ContentEditable' \ No newline at end of file diff --git a/content/html/HTML.md b/content/html/HTML.md index abc5be09..069c3e57 100644 --- a/content/html/HTML.md +++ b/content/html/HTML.md @@ -11,6 +11,7 @@ link_lists: - title: Reference pages: - "/content/html/reference/elements" + - "/content/html/reference/global_attributes" --- **HTML** (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ([CSS](/en-US/docs/Web/CSS)) or functionality/behavior ([JavaScript](/en-US/docs/Web/JavaScript)). diff --git a/content/html/reference/global_attributes/contenteditable/contenteditable.md b/content/html/reference/global_attributes/contenteditable/contenteditable.md new file mode 100644 index 00000000..33880513 --- /dev/null +++ b/content/html/reference/global_attributes/contenteditable/contenteditable.md @@ -0,0 +1,40 @@ +--- +title: 'contenteditable attribute' +mdn_url: /en-US/docs/Web/HTML/Global_attributes/contenteditable +interactive_example: + url: https://interactive-examples.mdn.mozilla.net/pages/tabbed/attribute-contenteditable.html + height: html-short +browser_compatibility: html.global_attributes.contenteditable +specifications: + - https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable + - https://w3c.github.io/contentEditable/#contenteditable +examples: + - examples/using-contenteditable +recipe: html-global-attribute +--- + +## Short description + +The `contenteditable` global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. + +## Values + +The attribute must take one of the following values: + +- `true` or the *empty string*, which indicates that the element must be editable; +- `false`, which indicates that the element must not be editable. + +If this attribute is not set, its default value is inherited from its parent element. + +## Usage notes + +This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values `true`, `false` or the *empty string* is mandatory and that a shorthand like `` is not allowed. The correct usage is ``. + +You can set the color used to draw the text insertion [caret](https://developer.mozilla.org/docs/Glossary/caret) with the CSS [`caret-color`](https://developer.mozilla.org/docs/Web/CSS/caret-color) property. + +## See also + +- [Making content editable](https://developer.mozilla.org/docs/Web/Guide/HTML/Editable_content) +- [`HTMLElement.contentEditable`](https://developer.mozilla.org/docs/Web/API/HTMLElement/contentEditable) and [`HTMLElement.isContentEditable`](https://developer.mozilla.org/docs/Web/API/HTMLElement/isContentEditable) +- The CSS [`caret-color`](https://developer.mozilla.org/docs/Web/CSS/caret-color) property +- `HTMLElement` [`input` event](https://developer.mozilla.org/docs/Web/API/HTMLElement/input_event) which also fires for `contenteditable` elements diff --git a/content/html/reference/global_attributes/contenteditable/contributors.md b/content/html/reference/global_attributes/contenteditable/contributors.md new file mode 100644 index 00000000..3f57bcb3 --- /dev/null +++ b/content/html/reference/global_attributes/contenteditable/contributors.md @@ -0,0 +1,16 @@ +[SphinxKnight](/en-US/profiles/SphinxKnight), +[estelle](/en-US/profiles/estelle), +[mdnwebdocs-bot](/en-US/profiles/mdnwebdocs-bot), +[mfuji09](/en-US/profiles/mfuji09), +[wbamberg](/en-US/profiles/wbamberg), +[Wryn](/en-US/profiles/Wryn), +[jpreuss](/en-US/profiles/jpreuss), +[ExE-Boss](/en-US/profiles/ExE-Boss), +[genezx](/en-US/profiles/genezx), +[sideshowbarker](/en-US/profiles/sideshowbarker), +[DragMeToProgramming](/en-US/profiles/DragMeToProgramming), +[jpmedley](/en-US/profiles/jpmedley), +[Sheppy](/en-US/profiles/Sheppy), +[mfluehr](/en-US/profiles/mfluehr), +[chrisdavidmills](/en-US/profiles/chrisdavidmills), +[teoli](/en-US/profiles/teoli) diff --git a/content/html/reference/global_attributes/contenteditable/examples/using-contenteditable/description.md b/content/html/reference/global_attributes/contenteditable/examples/using-contenteditable/description.md new file mode 100644 index 00000000..5fe3608a --- /dev/null +++ b/content/html/reference/global_attributes/contenteditable/examples/using-contenteditable/description.md @@ -0,0 +1,3 @@ +You can set the `contenteditable` attribute on nearly any HTML element to make it editable. + +Here's a simple example which creates a `
` element whose contents the user can edit. diff --git a/content/html/reference/global_attributes/contenteditable/examples/using-contenteditable/example.html b/content/html/reference/global_attributes/contenteditable/examples/using-contenteditable/example.html new file mode 100644 index 00000000..a721b714 --- /dev/null +++ b/content/html/reference/global_attributes/contenteditable/examples/using-contenteditable/example.html @@ -0,0 +1,3 @@ +
+ This text can be edited by the user. +
diff --git a/content/html/reference/global_attributes/global_attributes.md b/content/html/reference/global_attributes/global_attributes.md new file mode 100644 index 00000000..0e0cfd80 --- /dev/null +++ b/content/html/reference/global_attributes/global_attributes.md @@ -0,0 +1,10 @@ +--- +title: HTML global attributes +mdn_url: /en-US/docs/Web/HTML/Global_attributes +recipe: landing-page +related_content: /content/related_content/html.yaml +link_lists: + - title: Index of HTML global attributes + directory: "/content/html/reference/global_attributes" +--- +This page lists all the HTML global attributes, which are created using tags... diff --git a/content/related_content/html.yaml b/content/related_content/html.yaml index 85c790dd..93d86d4d 100644 --- a/content/related_content/html.yaml +++ b/content/related_content/html.yaml @@ -9,3 +9,5 @@ children: - title: Elements directory: "/content/html/reference/elements" + - title: Global attributes + directory: "/content/html/reference/global_attributes" diff --git a/recipes/html-global-attribute.yaml b/recipes/html-global-attribute.yaml new file mode 100644 index 00000000..aa99a2ca --- /dev/null +++ b/recipes/html-global-attribute.yaml @@ -0,0 +1,10 @@ +related_content: /content/related_content/html.yaml +body: +- prose.short_description +- meta.interactive_example? +- prose.values +- prose.* +- meta.examples +- meta.specifications +- meta.browser_compatibility +- prose.see_also diff --git a/scripts/build-json/build-page-json.js b/scripts/build-json/build-page-json.js index 62cd4c50..b889cc61 100644 --- a/scripts/build-json/build-page-json.js +++ b/scripts/build-json/build-page-json.js @@ -52,6 +52,7 @@ function buildPageJSON(docsPath) { body = landingPage.buildLandingPageJSON(docsDirectory, data, content); break; case 'html-element': + case 'html-global-attribute': case 'html-input-element': { const cached = recipeCache[data.recipe]; let recipe;