HTML5 Contenteditable Atribut Úprava webového obsahu na front-end

Jedna z nových funkcí v HTML5 , který mě přitahoval, je nativní editor. Tato funkce je běžně používána v redakčních systémech pro úpravu obsahu přímo z prohlížeče a je obvykle plně vybavena JavaScriptem a AJAX. HTML5 přichází, aby tento proces byl o něco jednodušší spokojený atribut.

Co to dělá

Při použití na libovolný prvek nám tento atribut umožní Upravit viz obsah níže:

 
Cookie muffin croissant. Faworki dánský sušenku. Jujubes prášek cookie dort sušenky halvah halvah. Sušenky gummies želé sušenky.
 
Sladká rolka tiramisu čokoládové tyčinky cukr švestkové karamely tootsie roll karamely. Čokoládový dort wypas bavlněné cukroví poleva. Aplikační sezam zasekne lékořice pečivo croissant karamely ovocný koláč perníkové sušenky. Kobliha karamel cukroví hole.
 
 

V tomto příkladu jsme přidali spokojený atribut a nastavte jej skutečný takže obsah se stane upravitelným. Pro tento atribut mohou být přidány dvě další hodnoty;

• Nepravdivé což dělá opak: obsah nebude upravitelný
• zdědit; upraví obsah upravitelný, když přímého rodiče je také upravitelný.

• Zobrazit ukázku

Pokud jste se odhlásili z ukázky výše, můžete vidět, že obsah lze upravovat přímo z prohlížečů. Je však třeba poznamenat, že tento prvek se nevztahuje na ukládání změn, které jsme provedli, takže když obnovíte stránku po provedení změny, obsah se vrátí.

Jak uložit změny

Uložení změn závisí na tom, kde budeme data ukládat; obvykle se uloží do databáze. Ale protože nemáme přístup k databázi, v tomto tutoriálu vám ukážeme, jak změny uložit místní úložiště. K tomu budeme také používat trochu jQuery, aby byl kód jednodušší. Doporučil jsem, abyste se podívali na minulost, současnost a budoucnost lokálního úložiště pro webové aplikace jako další reference.

Nejdříve přidejme tlačítko vedle našeho obsahu.

 
 
Sladká rolka tiramisu čokoládové tyčinky cukr švestkové karamely tootsie roll karamely. Čokoládový dort wypas bavlněné cukroví poleva. Aplikační sezam zasekne lékořice pečivo croissant karamely ovocný koláč perníkové sušenky. Kobliha karamel cukroví hole.
 
 Uložit změny 

Myšlenkou je, že tyto změny uložíme, jakmile klepnete na tlačítko. Nastavte tuto událost pomocí skriptu;

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

Tento kód vytvoří nový klíč v localStorage obsahující poslední změnu v obsahu. Můžeme použít nástroje Firebug nebo nástroje pro vývojáře k objasnění, zda byla data úspěšně uložena nebo ne, ale ujistěte se, že jste stiskli tlačítko. Pro uživatele Firefoxu přejděte na stránku DOM panel a vyhledejte localStorage. V prohlížeči Chrome i v prohlížeči Safari jej vidíme na kartě Zdroje.

Poté můžeme tato data načíst a aktualizovat obsah následujícím způsobem;

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

Výše uvedený kód identifikuje položku newObsah z localStorage a pokud existuje, předá hodnotu vybranému prvku, v tomto případě # content2. V tomto okamžiku, kdy obnovíme stránku, bychom měli stále vidět změnu, kterou jsme provedli.

• Zobrazit ukázku
• Stáhněte si zdroj

Závěrečná myšlenka

V dávných dobách, přidání funkce front-end editoru, jak jsme ukázali, může trvat hodiny nebo možná i týdny. Tento atribut dnes trvá jen sekundu, spokojený.

A podle caniuse.com, tento atribut je již podporován (překvapivě) v IE7 + a (nepřekvapivě) v ostatních prohlížečích následovně: Firefox 12, Chrome 20, Safari 5.1 a Opera 12. To znamená, že tento prvek můžeme používat s klidem bez nutnosti nastavit fallbacsk pro starší prohlížeče.