HTML5 contenteditable: Pas tekstblokken direct aan.

Ooit de drang gehad om een tekstblok binnen een website even snel aan te passen? In de reeks HTML5 blog-items nu dan plaats voor  contenteditable. Met contenteditable kan je tekst binnen bijvoorbeeld een div direct aanpasbaar laten zijn, zonder input-veld of textarea.

Contenteditable toepassingen

Van veel html5 toepassingen wist ik meteen een manier hoe deze in te zetten. Opslag met Local Storage, get current location, Canvas en font-face zijn direct toepasbaar en een meerwaarde voor applicaties waar ik aan werk. Voor contenteditable heb ik eerst enkele malen moeten nadenken. Allereerst zou het natuurlijk perfect werken voor CMS systemen, amar daar verlang je al snel een rich text editor voor het toevoegen van stijlen, en grafische elementen. Voor formulieren zou het ook kunnen , maar is dat er nou voor gemaakt. Toch zit de bruikbaarheid van dit element hem het meest in de combinatie met andere elementen zoals local storage.

Compatibility van contenteditable

Contenteditable is te gebruiken in de huidige versies van alle browsers en lijkt het meest compatible html5 element te zijn. Ook in Internet Explorer 7 werkt het naar behoren. Opera, Chrome, Safari en Firefox ondersteunen allemaal het contenteditable element. Zie de vergelijking op caniuse.com

Welke elementen kunnen worden aangepast met contenteditbale

contenteditable is een nieuw attribuut van html5 en is bruikbaar in de meeste tekst-containers. Zo kunnen ze gebruikit worden in:

• div
• section
• a
• h1 tot h6
• ul, li etc
• span

Natuurlijk is het ook te gebruiken in bijvoorbeeld body of table, maar op die manier is er dus weinig controle over het aanpasbare element.

Gebruik van contenteditable

Hieronder een code voorbeeld van het gebruik van het contenteditbale attribuut.

[xml]

<section id="wrapper">
<header>
<h1>ContentEditable</h1>
</header>
<article>
<section>
<p>De elementen met <code>contenteditable</code> kunnen aangepast worden door de client in de browser.</p>
</section>
<section contenteditable="true">
<h2>Deze kop is aanpasbaar</h2>
<p>De tekst in deze paragraaf is aanpasbaar</p>
<ol>
<li>en deze lijst</li>
<li>is ook</li>
<li>aanpasbaar</li>
</ol>
</section>
</article>
</section>
[/xml]

Neemt stijl over van element

Door bovenstaand voorbeeld te gebruiken kan je zien dat de tekst aan te passen is van elle elementen binnen de aanpasbare element. Je kan bepaalde elementen binnen het aanpasbare element uitzetten door bijvoorbeeld:

[xml]
<h1 contenteditable="false">Kop is niet aan te passen</h1>
[/xml]

In het aanpasbare element wordt de stijl van het omringende element over genomen. Zo blijft de list in bovenstaand voorbeeld een list, ook als er een enter wordt gegeven. Ook de paragraaf blijft de paragraaf en de kop blijft de kop. Er kan dus alleen binnen het element zelf aangepast worden. Er worden geen nieuwe elementen aangemaakt.

Een demo van content editable

Op de website van html5demos staat een demo soortgelijk aan bovenstaande code. Door middel van javascript en css kan het content-veld worden aangepast zodra er op gefocust wordt, zodat het duidelijker is dat deze aan ta passen is. Ook kan de inhoud van het editable deel met een id worden opgehaald of gereset.

Related articles by Zemanta

• JavaScript & HTML5 – Brave New World (slideshare.net)
• HTML 5 for Web Designers, by Jeremy Keith (37signals.com)
• The Future of the Web: HTML5 (slideshare.net)