contenteditable

Das Attribut muss einen der folgenden Werte haben:

• true oder ein leerer String, was angibt, dass das Element bearbeitbar ist.
• false, was anzeigt, dass das Element nicht bearbeitbar ist.
• plaintext-only, was angibt, dass der Rohtext des Elements bearbeitbar ist, jedoch die Formatierung von Rich-Text deaktiviert ist.

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

Wenn dieses Attribut fehlt oder sein Wert ungültig ist, wird sein Wert von seinem übergeordneten Element geerbt: Das Element ist also bearbeitbar, wenn sein übergeordnetes Element bearbeitbar ist.

Beachten Sie, dass obwohl die erlaubten Werte true und false enthalten, dieses Attribut ein aufgezähltes und kein Boolesches Attribut ist.

Sie können die Farbe, die zum Zeichnen des Text-Einfügemarkens verwendet wird, mit der CSS-Eigenschaft caret-color festlegen.

Elemente, die mit dem Attribut contenteditable bearbeitbar und dadurch interaktiv gemacht werden, können fokussiert werden. Sie nehmen an der sequentiellen Tastaturnavigation teil. Allerdings werden Elemente mit dem contenteditable-Attribut, die in andere contenteditable-Elemente eingebettet sind, standardmäßig nicht in die Tabulator-Sequenz aufgenommen. Sie können die eingebetteten contenteditable-Elemente zur Tastatur-Navigationssequenz hinzufügen, indem Sie den tabindex-Wert angeben (tabindex="0").

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

Dieses Beispiel enthält 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 ein, um ihre 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;
  }
}

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