-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
53 lines (41 loc) · 2.19 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
45
46
47
48
49
50
51
52
53
<!doctype html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 ContentEditable Attribute - Hongkiat.com</title>
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../_nav/js/jquery.js"><\/script>')</script>
<!-- demo scripts -->
<link rel="stylesheet" href="style.css">
<!-- nav script -->
<script src="../_nav/js/nav.js" type="text/javascript"></script>
</head>
<body>
<!-- nav meta -->
<div class="demo-meta">
<h1 class="demo-title">HTML5 ContentEditable Attribute</h1>
<p class="demo-desc">A very nice addition in HTML5, ContentEditable. This demo shows how to use it to enable editing in the front-end with HTML5 ContentEditable</p>
</div>
<!-- demo content -->
<div class="wrapper">
<p><small>Try to edit and save the change with the button</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">Save Changes</button>
</div>
<!-- Github ribbon -->
<div><a href="https://github.com/hongkiat/html5-editable-content/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a></div>
<!-- begin the 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>