Atributo HTML5 Contenteditable Editar conteúdo da Web no front-end
Um dos novos recursos em HTML5 que me atraiu é o editor nativo de front-end. Esse recurso é comumente aplicado em sistemas de gerenciamento de conteúdo para editar conteúdo diretamente do navegador e geralmente é construído totalmente com JavaScript e AJAX. HTML5 vem para tornar o processo um pouco mais fácil usando contenteditable atributo.
O que faz
Quando aplicado a qualquer elemento, esse atributo nos permitirá editar o conteúdo nele, vamos ver o exemplo abaixo:
Croissant do bolinho do bolinho. Biscoito dinamarquês de Faworki. Halvah do halvah do biscoito do bolo da cookie do pó dos jujuba. Biscuit gummies geléia de biscoito.
Caramelos do rolo do tootsie dos caramelos da ameixa do açúcar da barra de chocolate do tiramisu do rolo doce. Crosta de algodão doce do wypas do bolo de chocolate. O sésamo de Applicake agarra o biscoito do pão-de-espécie do fruitcake dos caramelos do croissant da pastelaria do alcaçuz. Bastões de doces de caramelo.
Neste exemplo, adicionamos contenteditable atributo e defini-lo verdade então o conteúdo se torna editável. Existem dois outros valores que podem ser adicionados para este atributo;
falsoque faz o contrário: o conteúdo não será editávelherdar; ele vai transformar o conteúdo editável quando o pai direto é editável também.
- Ver demonstração
Se você fez o checkout acima, você pode ver que o conteúdo pode ser editado diretamente nos navegadores. No entanto, deve-se notar que este elemento não cobre o armazenamento das alterações que fizemos, portanto, quando você atualizar a página depois de fazer a alteração, o conteúdo será revertido.
Como salvar as alterações
Salvar alterações depende de onde armazenaremos os dados; comumente, ele será salvo em um banco de dados. Mas como não temos acesso ao banco de dados, neste tutorial, vamos mostrar como salvar as alterações no localStorage. Para fazer isso, também usaremos um pouco de jQuery para tornar o código mais simples. Eu recomendei que você desse uma olhada no passado, presente e futuro do armazenamento local para aplicativos da Web como referência adicional.
Primeiro de tudo, vamos adicionar um botão ao lado de nosso conteúdo.
Caramelos do rolo do tootsie dos caramelos da ameixa do açúcar da barra de chocolate do tiramisu do rolo doce. Crosta de algodão doce do wypas do bolo de chocolate. O sésamo de Applicake agarra o biscoito do pão-de-espécie do fruitcake dos caramelos do croissant da pastelaria do alcaçuz. Bastões de doces de caramelo.
A ideia aqui é que iremos armazenar as alterações assim que o botão for clicado. Então, vamos definir este evento através do script;
var theContent = $ ('# content2'); $ ('# save'). on ('clique', função () var editedContent = theContent.html (); localStorage.newContent = editedContent;); Este código irá criar uma nova chave no localStorage contendo a última alteração feita no conteúdo. Podemos usar o Firebug ou o Developer Tools para esclarecer se os dados foram armazenados com sucesso ou não, mas certifique-se de apertar o botão. Para usuários do Firefox, vá para o DOM painel e procure por localStorage. No Chrome e no Safari, podemos vê-lo na guia "Recursos".
Podemos então recuperar esses dados para atualizar o conteúdo da seguinte forma;
if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent')); O código acima irá identificar o item novos conteúdos do localStorage e se existir, ele passará o valor para o elemento selecionado, neste caso # content2. Neste ponto, quando atualizarmos a página, ainda devemos ver a alteração que fizemos.
- Ver demonstração
- Fonte de download
Pensamento final
Antigamente, adicionar o recurso de editor front-end, como demonstramos, pode levar horas ou mesmo semanas. Hoje, leva apenas um segundo com esse atributo, contenteditable.
E, de acordo com caniuse.com, este atributo já é suportado, (surpreendentemente) no IE7 + e (sem surpresa) em outros navegadores da seguinte forma: Firefox 12, Chrome 20, Safari 5.1 e Opera 12. Isso significa que podemos usar este elemento com paz de mente sem ter que configurar fallbacsk para navegadores mais antigos.
