HTML contenteditable globales Attribut

Probieren Sie es aus

<blockquote contenteditable="true">
  <p>Edit this content to add your own quote</p>
</blockquote>

<cite contenteditable="true">-- Write your own name here</cite>

blockquote {
  background: #eeeeee;
  border-radius: 5px;
  margin: 16px 0;
}

blockquote p {
  padding: 15px;
}

cite {
  margin: 16px 32px;
  font-weight: bold;
}

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

[contenteditable="true"] {
  caret-color: red;
}

Wert

Das Attribut muss einen der folgenden Werte annehmen:

• true oder ein leerer String, was bedeutet, dass das Element bearbeitbar ist.
• false, was bedeutet, dass das Element nicht bearbeitbar ist.
• plaintext-only, was bedeutet, dass der Rohtext des Elements bearbeitbar ist, aber die Formatierung von Richtext deaktiviert ist.

Wenn das Attribut ohne Wert angegeben wird, wie in <label contenteditable>Example Label</label>, wird sein Wert als leerer String behandelt.

Wenn dieses Attribut fehlt oder sein Wert ungültig ist, wird sein Wert vom Elternelement geerbt: Das Element ist also bearbeitbar, wenn sein Elternelement bearbeitbar ist.

Obwohl seine erlaubten Werte true und false umfassen, ist dieses Attribut ein aufgezähltes und kein Boolean-Attribut.

Sie können die Farbe, die zum Zeichnen des Texteinfüge-Cursors verwendet wird, mit der CSS caret-color-Eigenschaft festlegen.

Elemente, die mit dem contenteditable-Attribut bearbeitbar und somit interaktiv gemacht werden, können fokussiert werden. Sie nehmen an der sequentiellen Tastaturnavigation teil. Allerdings werden Elemente mit dem contenteditable-Attribut, die innerhalb anderer contenteditable-Elemente verschachtelt sind, standardmäßig nicht zur Tabulatorsequenz hinzugefügt. Sie können die verschachtelten contenteditable-Elemente zur Tastaturnavigationssequenz hinzufügen, indem Sie den tabindex-Wert angeben (tabindex="0").

Wenn Inhalte in ein Element mit contenteditable="true" eingefügt werden, bleibt die gesamte Formatierung erhalten. Wenn Inhalte in ein Element mit contenteditable="plaintext-only" eingefügt werden, wird die gesamte Formatierung entfernt.

Beispiele

Einfügen von Inhalten in contenteditable

Dieses Beispiel hat zwei <div>-Elemente mit contenteditable, das erste mit dem Wert true und das zweite mit dem Wert plaintext-only. Kopieren Sie den untenstehenden Inhalt und fügen Sie ihn in jedes div-Element ein, um deren Effekte zu sehen.

HTML

<h2>Content to copy</h2>
<p class="instructions">
  Copy all the text in the block below and paste it into each of the
  contenteditable blocks to compare the results.
</p>
<section class="copying">
  <div class="copy">
    <p>
      This is a paragraph containing <strong>Bold</strong>, <em>Italic</em>, and
      <span class="red">red</span> text, followed by an ordered list:
    </p>
    <ol>
      <li>Step one</li>
      <li>Step two</li>
      <li>Step three</li>
    </ol>
  </div>
</section>

<h2>Pasting areas</h2>
<section class="pasting">
  <div class="wrapper">
    <h3>contenteditable="true"</h3>
    <div contenteditable="true"></div>
  </div>
  <div class="wrapper">
    <h3>contenteditable="plaintext-only"</h3>
    <div contenteditable="plaintext-only"></div>
  </div>
</section>

h2 {
  margin-bottom: 0;
}
.copying {
  font-family: Georgia, serif;
  margin: 1rem;
  padding: 1rem;
  border: solid black 1px;
}
.red {
  color: red;
}
.pasting {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  .wrapper {
    flex: 1 1;
    margin: 0;
    padding: 0;
  }
  h3 {
    font-family: monospace;
  }
  [contenteditable] {
    min-height: 3rem;
    border: solid 1px;
    padding: 0.5rem;
    background-color: whitesmoke;
  }
  [contenteditable="true"] {
    caret-color: blue;
  }
  [contenteditable="plaintext-only"] {
    caret-color: red;
  }
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Alle globalen Attribute
• HTMLElement.contentEditable und HTMLElement.isContentEditable
• Die CSS caret-color-Eigenschaft
• HTMLElement input-Ereignis