-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
44 lines (37 loc) · 1.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contenido editable en HTML5 - Demo</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- begin the markup -->
<div class="wrapper">
<h1>Contenido Editable HTML5</h1>
<h3>Implantación Básica</h3>
<article id="content1" contenteditable="true">
<p>Galleta muffin croissant. Faworki danés bizcocho. Jujubes en polvo galleta pastel bizcocho halvah halvah. Galleta gomitas jalea galleta.</p>
<p>Rollo dulce tiramisú barra de chocolate ciruela azucarada caramelos rollo de tootsie caramelos. Pastel de chocolate wypas algodón de azúcar glaseado. Applicake brochetas de sésamo regaliz pastelería croissant caramelos pastel de frutas jengibre galleta. Dona toffee bastones de caramelo.</p>
</article>
<h3>Con localStorage</h3>
<p><small>Intenta editar y guardar cambios con el botón</small></p>
<article id="content2" contenteditable="true">
<p>Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels. Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant caramels fruitcake gingerbread biscuit. Donut toffee candy canes.</p>
</article>
<button id="save">Guardar Cambios</button>
<!-- begin the script -->
<script src="jquery.js" type="text/javascript"></script>
<script>
var theContent = $('#content2');// set the content
$('#save').on('click', function(){ // store the new content in localStorage when the button is clicked
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) { // apply the newContent when it is exist ini localStorage
theContent.html(localStorage.getItem('newContent'));
}
</script>
</body>
</html>