-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
275 lines (258 loc) · 14.4 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!doctype html>
<html>
<head>
<link rel="icon" href="media/styles/images/favicon.ico" />
<title>Etch.js - A Content Editor</title>
<meta name="description" content="A Content Editor built on backbone.js">
<meta name="author" content="Josh Nielsen">
<link rel="stylesheet" href="media/styles/reset.css" />
<link rel="stylesheet" href="media/styles/text.css" />
<link rel="stylesheet" href="media/styles/960.css" />
<link rel="stylesheet" href="media/scripts/etch/styles/etch.css" />
<link rel="stylesheet/less" href="media/styles/style.less" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Cabin+Sketch:bold'>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="media/scripts/lib/less.min.js"></script>
</head>
<body>
<div class="main">
<a href="http://github.com/joshontheweb/etch"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div class="main-header container_12">
<div class="logo grid_4">
<span class="logo-type">Etch.js</span>
<span class="tag-line">A Content Editor</span>
</div>
<div class="intro grid_4">
<ul>
<li>
Try the <a href="#demo">Demo</a>
</li>
<li>
Read the <a href="#docs">Documentation</a>
</li>
<!-- <li>
<a href="#faq">Frequently Asked Questions</a>
</li> -->
<li>
View the source at <a href="http://github.com/joshontheweb/etch">Github</a>
</li>
</ul>
</div>
<div class="download grid_4">
<p>
<a class="download-link" href="https://github.com/joshontheweb/etch/tarball/0.6.3">Download v0.6.3<span class="download-icon"></span></a>
</p>
<p>~20k</p>
</div>
</div>
<div class="section about container_12">
<div class="header grid_12">
<h2 id="about">About</h2>
</div>
<div class="grid_8">
<p>
Etch is a content editor built on Backbone.js and is designed to be easily plugged into your Backbone app.
</p>
<p>Pros:</p>
<ul>
<li>Minimal and Lightweight</li>
<li>Utilizes <a href="http://blog.whatwg.org/the-road-to-html-5-contenteditable">ContentEditable</a> to edit content in place</li>
<li>Easy integration with your backbone.js app</li>
</ul>
<p>Cons:</p>
<ul>
<li>Only tested in modern browsers, some legacy support has been added, but testing is incomplete (help/feedback is needed here)</li>
<li>People still use legacy IE browsers :(</li>
</ul>
<p>Future:</p>
<ul>
<li>Image Uploading, Cropping and Insertion - already built, just needs some work</li>
<li>Legacy support for IE7+</li>
<li>Unit Tests</li>
</ul>
</div>
<div class="aside grid_4">
</div>
</div>
<div class="section demo container_12">
<div class="header grid_12">
<h2 id="demo">Demo</h2>
<div class="note">Areas marked with a blue background are editable, try it.</div>
</div>
<div class="article grid_8">
<h3 class="title editable" data-button-class="title">
This is an editable title
</h3>
<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 class="aside grid_4">
<p class="save-event"><code>'save'</code> event triggered on model</p>
</div>
</div>
<div id="docs" class="section docs container_12">
<div class="header grid_12">
<h2>Documentation</h2>
</div>
<div class="body grid_8">
<h3>Include Dependencies</h3>
<p>
Etch depends on <a href="http://jquery.com/">jQuery</a>, <a href="http://underscorejs.org">Underscore</a>, <a href="http://backbonejs.org">Backbone</a>,
as well as <a href="http://code.google.com/p/rangy/">Rangy</a> if you need support for legacy browsers (IE8 and prior).
</p>
<p class="note">
You can exclude Rangy and shave 41k off of your footprint
if you don't need legacy support.
</p>
<p>
Once you have the dependencies squared away simply include the etch.js script after them and before the script where you define your Models/Views.
</p>
<p>
At this point your scripts section should look something like this:
<pre><code>
<script src="/media/scripts/lib/jquery.js"></script>
<script src="/media/scripts/lib/underscore.js"></script>
<script src="/media/scripts/lib/backbone.js"></script>
<script src="/media/scripts/lib/rangy-core.js"></script> <!-- OPTIONAL -->
<script src="/media/scripts/etch/scripts/etch.js"></script>
<script src="/media/scripts/article.js"></script> <!-- Models/Views here -->
</code></pre>
</p>
<p class="note">Ensure that your scripts are in the right order or everything will likely be broken.</p>
<p>Also you need to add etch.css to your stylesheets</p>
<pre><code>
<link rel="stylesheet" href="/media/scripts/etch/styles/etch.css" />
</code></pre>
<h3>Building the Model</h3>
<p>
This part is simple, we just define a model and give it a url and some defaults. Your model will probably end up being more complex but
this is all it takes to get Etch working.
</p>
<pre><code>
var article = Backbone.Model.extend({
url: '/some/api/url/',
defaults: {
title: 'Default Title',
body: 'Default body text'
}
});
</code></pre>
<h3>Building the View</h3>
<p>
Basically all we need to do is call <code>etch.editableInit</code> when a user clicks (mousedown) on an editable element.
Because of how backbone delegates events we need to call an intermediate function, <code>editableClick</code>, which references
<code>etch.editableInit</code>.
</p>
<pre><code>
var articleView = Backbone.View.extend({
events: {
'mousedown .editable': 'editableClick'
},
editableClick: etch.editableInit
});
</code></pre>
<p>
<code>etch.editableInit</code> handles everything else for you except for saving.
Etch will trigger a 'save' event on your model when the save button is clicked. All we need to do is listen for it by
adding a binding to the view like so:
</p>
<pre><code>
var articleView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'save');
this.model.bind('save', this.model.save);
},
events: {
'mousedown .editable': 'editableClick'
},
editableClick: etch.editableInit
});
</code></pre>
<h3>Customizing</h3>
<p>
You may have noticed that the demo had different buttons in the editor widget depending on if you were editing the body or the title.
Etch allows you to customize which buttons to show on a given 'editable' by adding a <code>data-button-class</code> attribute to the element.
</p>
<p>
The default classes are:
</p>
<pre><code>
etch.config.buttonClasses = {
'default': ['save'],
'all': ['bold', 'italic', 'underline', 'unordered-list', 'ordered-list', 'link', 'clear-formatting', 'save'],
'title': ['bold', 'italic', 'underline', 'save']
};
</code></pre>
<p class="note">The 'default' button class will be used if no button class is defined on the element.</p>
<p>
Defining your own button classes can be accomplished by extending <code>etch.config.buttonClasses</code>. Here we override 'default' to
add more buttons and add a 'caption' class.
</p>
<pre><code>
_.extend(etch.config.buttonClasses, {
'default': ['bold', 'italic', 'underline', 'save'],
'caption': ['bold', 'italic', 'underline', 'link', 'save']
});
</code></pre>
<p class="note">The order of buttons in the array is how they will be presented in the editor widget.</p>
<p>If the class '.editable' causes conflicts for you or you need to change it for any reason you can do so by setting <code>etch.config.selector</code></p>
<pre><code>
etch.config.selector = '.my-new-editable-class';
</pre></code>
<p>All functions are public and can be overridden to customize functionality</p>
<p>For instance, if you want to create a custom popup for the link url prompt:</p>
<pre><code>
etch.views.Editor.prototype.urlPrompt = function(callback) {
// Custom popup code to get url
callback(url)
}
</code></pre>
<h3>Issues and Questions</h3>
<p>Contact Josh Nielsen through <a href="https://github.com/joshontheweb/etch/issues">github issues</a></p>
<h3>API Changelog:</h3>
<p>
<strong>0.6.0</strong> - etch configuration options now are nested under the etch.config namespace.
</p>
</div>
</div>
<!-- <div id="faq" class="section faq container_12">
<div class="header grid_12">
<h2>Frequently Asked Questions</h2>
</div>
<div class="body grid_8">
<p>Q: What is your favorite color?</p>
<p>A: Blue, no red.</p>
</div>
</div> -->
<div class="main-footer container_12">
<ul>
<li>Author: <a href="http://twitter.com/joshontheweb/">@joshontheweb</a></li>
<li>Contributors: <a href="http://twitter.com/mtoymil/">@mtoymil</a></li>
<li>A <a href="http://mahalo.com/">Mahalo.com</a> Hack Day project</li>
</ul>
</div>
</div>
<script src="media/scripts/lib/jquery.js"></script>
<script src="media/scripts/lib/jquery-ui.min.js"></script>
<script src="media/scripts/lib/less.min.js"></script>
<script src="media/scripts/lib/underscore.js"></script>
<script src="media/scripts/lib/backbone.js"></script>
<script src="media/scripts/lib/rangy-core.js"></script>
<script src="media/scripts/etch/scripts/etch.js"></script>
<script src="media/scripts/script.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11906758-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>