forked from joshontheweb/etch
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtryit.html
67 lines (60 loc) · 3.48 KB
/
tryit.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!doctype html>
<html>
<head>
<title>Etch.js - Minimal demo</title>
<link rel="stylesheet" href="styles/etch.css" />
</head>
<body>
<h2>Very very basic demo, so developers can play with it while they're developing features.</h2>
<p><strong>Full site and demo <a href="http://www.etchjs.com/">here</a>.</strong></p>
<p>Just click on text below to see Etch in action.</p>
<div class="section demo">
<div class="article">
<h1 class="title editable">Here is a title</h1>
<div class="body editable" data-button-class="all">
Text with a light blue background is editable. You will find it easy to use etch to <u>underline</u> text as well as <b>bold</b> and <i>italic</i>.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://etchjs.com/media/scripts/lib/rangy-core.js"></script>
<script src="scripts/etch.js"></script>
<script>
rangy.init();
rangy.createMissingNativeApi(); // to polyfill window.getSelection() in IE8
</script>
<script>
(function() {
var article = Backbone.Model.extend({
defaults: {
title: 'Default Title',
body: 'Default body text'
}
});
var articleView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'save')
this.model.bind('save', this.save);
},
events: {
'mousedown .editable': 'editableClick'
},
editableClick: etch.editableInit,
save: function() {
// normally you would call model.save() here but this is a demo
// $(this.el).find('.editable').effect('highlight', {color: 'yellow'});
// $('.save-event').fadeIn('fast', function() {
// setTimeout($(this).fadeOut('slow'), 10000);
// });
}
});
$article = $('.article');
var model = new article();
var view = new articleView({model: model, el: $article[0], tagName: $article[0].tagName});
})()
</script>
</body>
</html>