Urejanje vsebine v HTML

Atribut contenteditable omogoča, da je vsebino izbranega HTML-elementa mogoče urejati neposredno v brskalniku. Uporabimo ga lahko pri različnih elementih, na primer pri <div>, <p>, <blockquote> in podobnih elementih, ki vsebujejo besedilo.

Tak element postane urejevalno območje, v katerem lahko uporabnik besedilo vnaša, popravlja ali briše. Pomembno pa je, da atribut contenteditable sam po sebi ne poskrbi za shranjevanje sprememb. Če želimo vsebino shraniti, moramo dodati še JavaScript ali drugo strežniško rešitev.

Osnovna pravila

Atribut contenteditable je naštevni atribut, ki določa stanje urejanja vsebine elementa. Najpogosteje uporabljamo naslednje vrednosti:

• true – vsebino elementa je mogoče urejati,
• false – vsebine elementa ni mogoče urejati,
• plaintext-only – mogoče je urejati samo navadno besedilo brez bogatega oblikovanja.

Primerjava z elementi obrazca

Za vnos besedila pogosto uporabljamo elementa <input> in <textarea>. Atribut contenteditable pa je uporaben takrat, ko želimo neposredno urejati vsebino običajnega HTML-elementa.

Osnovni primer

V spodnjem primeru je element <div> urejevalen, ker ima vrednost contenteditable="true".

<div contenteditable="true">
  To besedilo lahko urejaš.
</div>

Primer z naslovom in odstavkom

Urejevalen je lahko tudi večji del vsebine. Tako lahko znotraj istega elementa urejamo naslov in odstavek.

<div contenteditable="true">
  <h3>Moj naslov</h3>
  <p>Ta odstavek lahko popravljaš neposredno v brskalniku.</p>
</div>

Primer vrednosti plaintext-only

Če želimo dovoliti samo vnos navadnega besedila brez bogatega oblikovanja, uporabimo vrednost plaintext-only.

<div contenteditable="plaintext-only">
  Tukaj lahko urejaš samo navadno besedilo.
</div>

Primer z lastnostjo caret-color

Barvo kazalke za vnos lahko določimo z lastnostjo CSS caret-color. To je uporabno, kadar želimo poudariti aktivno urejevalno območje.

<div contenteditable="true" style="caret-color:red;">
  Urejevalno polje z rdečo kazalko.
</div>

Priporočila

• Atribut contenteditable uporabimo takrat, ko želimo neposredno urejati vsebino znotraj dokumenta.
• Za klasičen vnos podatkov v obrazce raje uporabimo <input> ali <textarea>.
• Če ne želimo oblikovanega besedila, uporabimo vrednost plaintext-only.
• Pri resničnih projektih je smiselno dodati tudi preverjanje, obdelavo in shranjevanje vnesene vsebine.

Pogoste napake

• Domneva, da se spremembe po urejanju samodejno shranijo.
• Uporaba atributa contenteditable tam, kjer je primernejši obrazčni element.
• Neupoštevanje dejstva, da lahko uporabnik spremeni tudi neželeno vsebino, če urejevalno območje ni ustrezno omejeno.
• Zanašanje na zastarele pristope za urejanje besedila brez sodobne logike za nadzor in shranjevanje vsebine.