Gjør websider mer interaktive med attributten 'innholdsmessig'

Det har vært forskjellige måter og virkemidler for å gjøre innhold på nettsteder redigerbare for brukere og besøkende, og med bruk av attributter som kan innholdsinnholdes, kan vi gjøre områdene i dokumentets dokumenter redigerbare og gi brukerne et annet nivå av online interaksjon.

Denne artikkelen vil gå gjennom grunnlaget for spesifikasjonen, og gi flere eksempler på bruk i eksempelform, i tillegg til en ny nettleseadresse strekkode som kan gjøre nettleseren din til en enkel tekstredigerer som ligner Notisblokk, som deretter kan lagres og bokmerke .

WhatWG-spesifikasjonen som er lenket over, bestemmer følgende:

Det innholdsmessige attributtet er et oppregnet attributt hvis nøkkelord er den tomme strengen, sann og usann. Den tomme strengen og det sanne nøkkelordkartet til sann tilstand. Det falske nøkkelordet kartlegger til den falske tilstanden. I tillegg er det en tredje tilstand, arvelig tilstand, som er den manglende verdien standard (og ugyldig verdi standard).

Den sanne tilstanden indikerer at elementet er redigerbart. Arvetilstanden indikerer at elementet er redigerbart hvis foreldrene er det. Den falske tilstanden indikerer at elementet ikke er redigerbart.

I motsetning til designmode, som gjør det mulig for brukere å redigere hele websidedokumentet, lar innholdsmessig redigerbare bare spesifiserte elementer redigeres. Det innholdsmessige attributtet er først og fremst tenkt for å levere en brukeropplevelse i nettleser. Vanligvis vil du finne denne funksjonaliteten i bloggbaserte forfatterverktøy som WordPress, Drupal eller lignende nettsteder.

Den innholdsmessige har tre mulige tilstander:

  • contenteditable = "" eller contenteditable = "true" som spesifiserer at elementet er redigerbart.
  • contenteditable = "falsk", som spesifiserer at elementet ikke er redigerbart.
  • contenteditable = "arve", som spesifiserer at elementet er redigerbart hvis det umiddelbare overordnede elementet er redigerbart. Dette er standardverdien.

Den innholdsmessige funksjonen gir samme API som designmode for å samhandle med det redigerbare elementet, derfor er følgende kommandoalternativer gyldige for å samhandle med dokumentet ( designmode ) eller elementet ( innholdsmessig redigerbart):

  • document.execCommand - Utfører den gitte kommandoen.
  • document.queryCommandEnabled - Bestemmer om den gitte kommandoen kan utføres på dokumentet i gjeldende tilstand.
  • document.queryCommandIndeterm - Bestemmer om gjeldende valg er i en bestemt tilstand.
  • document.queryCommandState - Bestemmer om den gitte kommandoen er utført på det gjeldende valget.
  • document.queryCommandValue - Bestemmer gjeldende verdi for dokument, område eller gjeldende valg for den gitte kommandoen.

Når den innholdsmessige attributtet er lagt til et element, vil nettleseren føre til at elementet blir redigerbart. I tillegg vil alle barn av dette elementet også bli redigerbare med mindre barneelementene tydelig er satt til en innholdsmessig = "falsk".

La oss nå se på et kodebit som fremhever et element satt til attributten som kan tilpasses :

Dette er et grunnleggende eksempel på innholdsredigerbar attributt som er satt i et avsnittelement.

 Ovennevnte kodeeksempel viser det helt grunnleggende tillegget til contenteditable = "true" lagt til avsnittet 

element. Eksempelinnhold redigerbar demonstrasjonsfil index.html vises i Chrome versjon 24.0.1312.57 m er vist i figur A :

La oss nå legge til noen styling i tillegg til en styles.css-fil med følgende kodebit:

 seksjon { 
 polstring-topp: 10px; 
 } 
 // * 
 contenteditable = "true" { 
 polstring: 8px; 
 disposisjon: 2px dobbelt # FF6A6A; 
 bredde: 500px; 
 bakgrunnsfarge: # F5F5F5; 
 } 
 contenteditable = "true": hover { 
 disposisjon: 2px dobbelt # 0090D2; 
 bredde: 500px; 
 bakgrunnsfarge: # DCE3E9; 
 } 
 p { 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 skriftstørrelse: 1em; 
 } 

CSS legger til en konturlinje på 2 piksler med en farge # FF6A6A til ethvert element med contenteditable = "true" og inkluderer en bredde på 500 piksler, og en bakgrunnsfarge satt til # F5F5F5. På svevet endrer konturlinjen på 2 piksler fargen til et lyseblått sett til # 0090D2 med en bakgrunnsfarge på # DCE3E9 og bredden gjenstår på 500 piksler. Og så har jeg lagt til et annet element, som er satt til contenteditable = "true" med flere avsnitt som vist nedenfor:

Dette er et grunnleggende eksempel på innhold det redigerbare attributtet som er satt i avsnittelementet.

Alt innholdet i denne delen og artikkelen kan redigeres i HTML5-støttede nettlesere.

 Klikk hvor som helst innenfor dette området. 

 Skriv inn din redigerbare tekst her!

 De resulterende redigeringene vises i Chrome versjon 24.0.1312.57 i figur B nedenfor der markøren svever over den andre artikkelen: 

Figur B

"Når kan jeg bruke det innholdsmessige attributtet", viser kompatibilitetstabellene for støtte for det innholdsmessige attributtet for nettlesere på skrivebordet og mobilen.

Mulighetene for å berike brukeropplevelse med innholdsredigerbare regioner på nettstedene dine er bare begrenset av funksjonaliteten og tilgangen du gir til brukere på alle nivåer. Index.html og styles.css filene som brukes i denne demonstrasjonen er tilgjengelige for nedlasting.

Noe morsommere!

Visste du at for noe morsommere kan du også gjøre hele nettleservinduet ditt redigerbart? Et nylig innlegg av Jose Jesus Perez Aguinaga på CoderWall avslørte URL-en som skaper et notisblokk-lignende nettleservindu. Bare skriv følgende i nettleserens adressefelt (IE har problemer med dette): data: text / html,

Nå har du et fullt vindu for å legge til noe innhold. Du kan til og med bokmerke siden for fremtidig referanse. Et eksempel i den grunnleggende formen vises i figur C som vist i Chrome versjon 24.0.1312.57:

Figur C

Jose forklarer at dette fungerer fordi det bruker Data URI-formatet, som ber nettleseren om å gjengi innhold i HTML i vinduet som innholdsmessig . Du kan også bruke noen enkle redigeringsverktøy, for eksempel Ctrl + I for kursiv, Ctrl + B for fet skrift, Ctrl + U for understrek, noe som gir mer funksjonalitet.

Flere mennesker har tatt det et skritt videre og har laget sine egne sammenoppdaterte versjoner av grunnleggende kode. Ta "Editor Bookmarklet" som ble lagt ut av en anonym gjest på PasteBin, som gjør nettleseren til datatekstredigereren med fancy papirlinjer som vist i figur D nedenfor:

Med tanke på tid og kreativitet er jeg sikker på at variasjonene i nettleservinduet redigerbart tema er uendelige, der stiler, funksjonalitet og visningsfunksjoner kan manipuleres for å lage din egen tilpassede nettleser teksteditor.

© Copyright 2021 | pepebotifarra.com