contenteditable attribut - HTML

contenteditable attributten giver mulighed for at brugeren kan ændre på hjemmesidens indhold

Introduktion

contenteditable attributten går ud på at brugeren får mulighed for at rediger det der er på hjemmesiden.

Det vil sige brugeren kan ændre tekst og billeder og indsætte sit eget formateret tekst (for eksempel med HTML kode og billeder) som brugeren har lavet i forvejen.

Ideen med contenteditable er vel at man så kan rediger direkte på hjemmesiden mens man kigger på hjemmesiden. Hvor man før ville have brugt eksterne programmer til at rette i koden for derefter at gemme filen, skifte til browseren og opdater siden for at se ændringerne.

Browsertest

Browserunderstøttelse af contenteditable

Browser Contenteditable Muligheder med billeder Muligheder med tekst
Firefox logo
Firefox 12.0
ja flyt
slet
ændre størrelse 1
indsæt
Drag and drop fil 4
indsæt formateret tekst
Opera logo
Opera 11.61
ja slet
indsæt
indsæt formateret tekst
Safari logo
Safari 5.1.2
ja flyt
slet
indsæt
indsæt ren tekst (formateret tekst laves om til ren tekst)

Skrift : Fed/Kursiv/Understreg/kontur

Afsnitsretning : Venstre til højre/Højre til venstre
2
Chrome logo
Chrome 16
ja flyt
slet
indsæt
indsæt formateret tekst (mulighed for at lave om til ren tekst ved højreklik 3)
Internet Explorer logo
Internet Explorer 10.0.9200.16438 Pre-Release
ja flyt
slet
ændre størrelse 1
indsæt
indsæt formateret tekst
Alle tests er udført på Windows 7 (64-bit)


1 Når billedet er markeret kan man ændre størrelsen ved at hive i siderne/hjørnerne.
contenteditable Firefox ændre billede størrelse

2 Ved at marker teksten og højreklikke man kan ændre tekstens udseende.
contenteditable Safari højreklik skrift fed kursiv understreg kontur

3 Når man har formateret tekst i udklipsholderen kan man vælge at indsætte den som den er eller som ren tekst.
contenteditable Chrome højreklik indsæt som almindelig tekst

4 Man kan hive billedfiler direkte ind fra explorer/stifinder og slippe det i et område med contenteditable attribut for at indsætte billederne. Det virker både med én eller flere filer samtidig. Det ser kun ud til at virke med billedfiler. Jeg har teste at det virker med JPEG, GIF, PNG, SVG og BMP. Andre filer ignoreres bare.



Jeg havde tidligere et problem i Firefox 10.0.2, Opera 11.61 og Safari 5.1.2 med at hvis jeg indsatte et PNG billede med transparens så blev det der var gennemsigtigt sort.
Men nu kan jeg ikke se problemet mere i Firefox 12.0, Opera 11.64 og Safari 5.1.5.
Jeg ved ikke om der er fordi det er blevet rettet i browserne eller om det er et problem med min computer.
Browserunderstøttelse fra caniuse.com :

Demo

Denne tekst kan redigeres fordi elementet hvor teksten står i har fået tilføjet contenteditable="true" attributten.

Disse billeder kan flyttes, slettes, ændres af brugeren

kat i chok scooter

Har re vsit ngloe svatejfel.

Resultatet ovenfor er skabt af følgende kode

CONTENTEDITABLE ATTRIBUT DEMO
(PÅ EN SIDE FOR SIG SELV)


Hvis browseren har stavekontrol og funktionen er slået til kan der komme en prikket rød linje under de ord som stavekontrollen ikke genkender.
Hvis man ikke vil have det kan man slå stavekontrollen fra med spellcheck="false" attributten.
Denne tekst kan redigeres af brugeren.

Svtaeolktlernon re såelt TIL.


Denne tekst kan redigeres af brugeren.

Svtaeolktlernon re såelt FRA.

Resultatet ovenfor er skabt af følgende kode


Med CSS kan det gøres tydeligt hvilken del af siden som kan redigeres af brugeren ved for eksempel at ændre baggrundsfarven for der redigerbare når musen holdes over.
Denne tekst kan IKKE redigeres af brugerne
Denne tekst kan redigeres fordi elementet hvor teksten står i har fået tilføjet contenteditable="true" attributten.

Dette billede kan flyttes og slettes af brugeren (og størrelsen kan måske ændres)

kat i chok

Denne tekst og billede kan IKKE ændres af brugerne

scooter

Denne tekst kan IKKE redigeres af brugerne
Denne tekst kan redigeres.
Resultatet ovenfor er skabt af følgende kode

Sjov

Skriv følgende i adresselinjen (eller besøge data:text/html,<html contenteditable>) i din browser også har du en midlertidig notesblok, hvor du også kan indsætte billeder.

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.