Attribut Contenteditable HTML5 Modifier le contenu Web sur le serveur frontal

Une des nouvelles fonctionnalités de HTML5 qui m'a attiré est l'éditeur natif de front-end. Cette fonctionnalité est couramment utilisée dans les systèmes de gestion de contenu pour modifier le contenu directement à partir du navigateur. Elle est généralement entièrement construite avec JavaScript et AJAX. HTML5 vient rendre le processus un peu plus facile en utilisant contenteditable attribut.

Ce qu'il fait

Appliqué à n’importe quel élément, cet attribut nous permettra de modifier son contenu, voyons l'exemple ci-dessous:

 Croissant muffin aux biscuits. Biscuit danois Faworki. Jujubes biscuit en poudre gâteau biscuit halva halva. Biscuit Gélatines Gelée Biscuit.
 Barre de chocolat tiramisu au petit pain sucré caramel aux prunes Glaçage à la barbe à papa. Au sésame, Applicake coupe des croissants à la réglisse, des caramels, un biscuit aux gâteaux aux fruits et aux épices. Canne de bonbon au caramel.

Dans cet exemple, nous avons ajouté contenteditable attribuer et le définir vrai alors le contenu devient éditable. Deux autres valeurs peuvent être ajoutées pour cet attribut.

faux ce qui fait le contraire: le contenu ne sera pas éditable
hériter; il rendra le contenu modifiable lorsque le parent direct est éditable aussi.

Voir la démo

Si vous avez extrait la démo ci-dessus, vous pouvez voir que le contenu peut être modifié directement à partir des navigateurs. Toutefois, il convient de noter que cet élément ne couvre pas la mémorisation des modifications apportées. Par conséquent, lorsque vous actualisez la page une fois les modifications apportées, le contenu est rétabli..

Comment enregistrer les modifications

L'enregistrement des modifications dépend de l'endroit où nous allons stocker les données. généralement, il sera enregistré dans une base de données. Mais comme nous n’avons pas accès à la base de données, dans ce tutoriel, nous allons vous montrer comment enregistrer les modifications dans stockage local. Pour ce faire, nous allons également utiliser un peu de jQuery pour simplifier le code. Je vous recommande de consulter le passé, le présent et l'avenir du stockage local pour les applications Web à titre de référence supplémentaire..

Tout d’abord, ajoutons un bouton à côté de notre contenu.

  Barre de chocolat tiramisu au petit pain sucré caramel aux prunes Glaçage à la barbe à papa. Au sésame, Applicake coupe des croissants à la réglisse, des caramels, un biscuit aux gâteaux aux fruits et aux épices. Canne de bonbon au caramel.

L'idée ici est que nous enregistrerons les modifications une fois le bouton cliqué. Définissons donc cet événement à travers le script.

 var theContent = $ ('# content2'); $ ('# save'). on ('click', function () var éditéContenu = leContenu.html (); localStorage.newContent = éditéContenu;);

Ce code créera une nouvelle clé dans localStorage contenant la dernière modification apportée au contenu. Nous pouvons utiliser Firebug ou les outils de développement pour déterminer si les données ont été stockées avec succès ou non, mais assurez-vous de cliquer sur le bouton. Pour les utilisateurs de Firefox, allez à la DOM panneau et recherchez localStorage. Sous Chrome et Safari, on peut le voir sous l'onglet "Ressources"..

Nous pouvons ensuite récupérer ces données pour mettre à jour le contenu, comme suit;

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

Le code ci-dessus identifiera l'article Nouveau contenu depuis le localStorage et s'il existe, il passera la valeur à l'élément sélectionné, dans ce cas # content2. À ce stade, lorsque nous actualisons la page, nous devrions toujours voir les modifications apportées..

Voir la démo
Source de téléchargement

Pensée finale

Auparavant, l'ajout de la fonctionnalité d'éditeur frontal, comme nous l'avions démontré, pouvait prendre des heures, voire des semaines. Aujourd'hui, cela ne prend qu'une seconde avec cet attribut, contenteditable.

Et, selon caniuse.com, cet attribut est déjà pris en charge (étonnamment) dans IE7 + et (sans surprise) dans les autres navigateurs comme suit: Firefox 12, Chrome 20, Safari 5.1 et Opera 12. Cela signifie que nous pouvons utiliser cet élément en toute tranquillité. d'esprit sans avoir à configurer Fallbacsk pour les anciens navigateurs.