`Atributul contenteditable` în HTML

Face conținutul unui element editabil direct în pagină, ca într-un editor de text; plaintext-only permite doar text fără formatare.

Sintaxă tag

<div contenteditable="true">Text editabil</div>
<p contenteditable="plaintext-only">Doar text simplu</p>

Ce face `Atributul contenteditable`

Cu contenteditable, utilizatorul poate da clic pe element și poate scrie, șterge sau lipi text direct în pagină. Pe această idee sunt construite editoarele de text din browser (cum este editorul de articole din WordPress).

Valoarea true (sau atributul gol) permite editare completă, inclusiv lipirea de text formatat (îngroșat, linkuri). Valoarea plaintext-only permite doar text simplu, fără formatare; este suportată în Chrome, Safari și, din versiunea 136, în Firefox. Valoarea false oprește editarea pentru o parte dintr-un element editabil.

Conținutul editat nu se trimite automat cu un formular. Îl citești din JavaScript cu element.textContent sau element.innerHTML și ascultând evenimentul input.

Atribute

Atribut	Descriere
`true / ""`	Conținutul poate fi editat, cu formatare.
`plaintext-only`	Conținutul poate fi editat, dar doar ca text simplu.
`false`	Conținutul nu poate fi editat (util în interiorul unei zone editabile).

Exemple

Exemplul 1: Notiță editabilă cu numărul de caractere

La fiecare tastă, evenimentul input actualizează numărul de caractere.

<div id="notita" contenteditable="plaintext-only"
     style="border: 1px dashed #999; padding: 8px;">Cumpără pâine și lapte.</div>
<p id="numar"></p>

<script>
  const notita = document.getElementById("notita");
  const afiseaza = () => {
    document.getElementById("numar").textContent = notita.textContent.length + " caractere";
  };
  notita.addEventListener("input", afiseaza);
  afiseaza();
</script>

Ce afișează browserul

[Cumpără pâine și lapte.] (chenar punctat, editabil la clic)
24 caractere
(numărul se schimbă pe măsură ce scrii)

Exemplul 2: Zonă editabilă cu o parte blocată

Semnătura din interior are contenteditable="false", deci rămâne neschimbată în timp ce restul mesajului se poate edita.

<div contenteditable="true" style="border: 1px solid #ccc; padding: 8px;">
  <p>Bună ziua, vă confirm programarea de joi, ora 10.</p>
  <p contenteditable="false"><em>— Cabinet Dr. Ionescu, Iași</em></p>
</div>