Attributo Contented HTML5 Modifica contenuto Web su front-end

Una delle nuove funzionalità di HTML5 quello che mi ha attratto è l'editor di front-end nativo. Questa funzione viene comunemente applicata nei sistemi di gestione dei contenuti per modificare i contenuti direttamente dal browser e viene generalmente realizzata completamente con JavaScript e AJAX. HTML5 arriva a rendere il processo un po 'più facile da usare contenteditable attributo.

Cosa fa

Quando applicato a qualsiasi elemento, questo attributo ci permetterà di modificare il contenuto in esso, vediamo l'esempio di seguito:

 
Muffin di biscotti croissant Faworki danese biscotto. Halvah del halvah del biscotto della torta del biscotto della polvere delle giuggiole. Biscotto con biscotti gommosi.
 
Caramello di rotolo di tiramisù dolce con zucchero al caramello e caramello. Torta al cioccolato wypas glassa di zucchero filato. Applicake sesamo scatta la pasticceria liquirizia croissant caramel con biscotti di panpepato al caramello. Ciambella caramelle toffee.
 
 

In questo esempio, abbiamo aggiunto contenteditable attributo e impostarlo vero quindi il contenuto diventa modificabile. Ci sono altri due valori che possono essere aggiunti per questo attributo;

• falso che fa il contrario: il contenuto non sarà modificabile
• ereditare; trasformerà il contenuto modificabile quando il genitore diretto è modificabile pure.

• Visualizza la demo

Se hai controllato la demo di cui sopra, puoi vedere che il contenuto può essere modificato direttamente dai browser. Tuttavia, va notato che questo elemento non copre la memorizzazione delle modifiche apportate, quindi quando si aggiorna la pagina dopo aver apportato la modifica, il contenuto verrà ripristinato.

Come salvare le modifiche

Il salvataggio delle modifiche dipende da dove verranno memorizzati i dati; comunemente, verrà salvato in un database. Ma dal momento che non abbiamo accesso al database, in questo tutorial, ti mostreremo come salvare le modifiche in memoria locale. Per fare ciò, useremo anche un po 'di jQuery per rendere il codice più semplice. Ti ho raccomandato di dare un'occhiata a The Past, Present & Future of Local Storage per le applicazioni Web come ulteriore riferimento.

Prima di tutto, aggiungiamo un pulsante accanto al nostro contenuto.

 
 
Caramello di rotolo di tiramisù dolce con zucchero al caramello e caramello. Torta al cioccolato wypas glassa di zucchero filato. Applicake sesamo scatta la pasticceria liquirizia croissant caramel con biscotti di panpepato al caramello. Ciambella caramelle toffee.
 
 Salva I Cambiamenti 

L'idea è che memorizzeremo le modifiche dopo aver fatto clic sul pulsante. Quindi, impostiamo questo evento attraverso la sceneggiatura;

 var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;); 

Questo codice creerà una nuova chiave in localStorage contenente l'ultima modifica apportata al contenuto. Possiamo utilizzare Firebug o gli Strumenti per sviluppatori per chiarire se i dati sono stati archiviati correttamente o meno, ma assicurati di premere il pulsante. Per gli utenti di Firefox, vai su DOM pannello e cerca localStorage. In Chrome e Safari, possiamo vederlo nella scheda "Risorse".

Possiamo quindi recuperare questi dati per aggiornare il contenuto, come segue;

 if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent'));  

Il codice sopra identifica l'oggetto nuovo contenuto da localStorage e se esiste, passerà il valore all'elemento selezionato, in questo caso # content2. A questo punto, quando aggiorniamo la pagina, dovremmo comunque vedere il cambiamento che abbiamo apportato.

• Visualizza la demo
• Scarica fonte

Pensiero finale

In passato, aggiungere la funzione di editor di front-end come avevamo dimostrato, può richiedere ore o forse anche settimane. Oggi, ci vuole solo un secondo con questo attributo, contenteditable.

E, secondo caniuse.com, questo attributo è già supportato (sorprendentemente) in IE7 + e (non sorprendentemente) in altri browser come segue: Firefox 12, Chrome 20, Safari 5.1 e Opera 12. Ciò significa che possiamo usare questo elemento con tranquillità di mente senza dover impostare fallbacsk per i browser più vecchi.