forked from jakiestfu/Medium.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
421 lines (356 loc) · 23.8 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
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
<!DOCTYPE html>
<html lang="en">
<head>
<title>Medium.js</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../medium.css">
<link rel="stylesheet" type="text/css" href="docs.css">
<link rel="stylesheet" type="text/css" href="prism.css">
<meta property="og:title" content="Medium.js"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="//jakiestfu.github.io/Medium.js/"/>
<meta property="og:site_name" content="Medium.js"/>
<meta property="og:description" content="Medium.js is a tiny JavaScript library for making HTML5's contenteditable beautiful." />
<meta name="description" content="Medium.js is a tiny JavaScript library for making HTML5's contenteditable beautiful." />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
</head>
<body>
<div class="wrap">
<a class="brand" href="//jakiestfu.github.io/Medium.js/" id="ThisisMediumjs">Medium.js</a>
<h1 class="catch">Taking control of content editable</h1>
<div class="share">
<iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&repo=Medium.js&type=watch&count=true" height="30" width="118" frameborder="0" scrolling="0" style="width:118px; height: 30px;" allowTransparency="true"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&repo=Medium.js&type=fork&count=true" height="30" width="118" frameborder="0" scrolling="0" style="width:118px; height: 30px;" allowTransparency="true"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&type=follow&count=true" height="30" width="168" frameborder="0" scrolling="0" style="width:168px; height: 30px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="jakiestfu" data-text="Medium.js is a tiny JavaScript library for making HTML5's contenteditable beautiful.">Tweet</a>
<a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false">Follow @jakiestfu</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<hr />
<h3 style="text-align: center;">This is Medium.js</h3>
<h4>Easy</h4>
<p>Medium.js keeps HTML code within <code>contenteditable</code> semantic, simple, and clean. Medium.js also supports placeholders, automatic HR (or BR, or P) creation, events, hotkeys, simple & complex element injection, and more!</p>
<h4>Compliant</h4>
<p>Medium.js is html5 compliant and has been tested in Firefox, Chrome, Safari, Opera, & IE8+. Browser support is constantly improving!</p>
<div style="text-align: center; opacity: 0.75;">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, and Semantics" title="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, and Semantics">
<br />
<img src="img/firefox.gif"/>
<img src="img/chrome.gif"/>
<img src="img/safari.gif"/>
<img src="img/opera.gif"/>
<img src="img/ie.gif"/>
</div>
<h4>Inspired</h4>
<p>This script is inspired by <a href="http://mediFum.com" target="_blank">Medium's</a> beautiful content editor, something we have aspired to emulate since its inception.</p>
<h4>Authors</h4>
<p>This code is brought to you by:</p>
<ul class="list">
<li><a href="http://jakiestfu.com/" target="_blank">Jacob Kelly</a> <br>( author of <a href="http://github.com/jakiestfu/Snap.js/" target="_blank">Snap.js</a> and <a href="http://jakiestfu.github.io/Behave.js/" target="_blank">Behave.js</a> )</li>
<li><a href="http://visop-dev.com/" target="_blank">Robert Plummer</a> <br>( author of <a href="http://wikiLingoDOesThat.com/" target="_blank">wikiLingo</a> and <a href="http://github.com/Spreadsheets/jQuery.sheet" target="_blank">jQuery.sheet</a> )</li>
<li><a href="https://github.com/jakiestfu/Medium.js/graphs/contributors">All these amazing people!</a>.</li>
</ul>
<hr />
<h3 id="Features">Features</h3>
<ul>
<li>Free & Open Source</li>
<li>Modern browser compliant</li>
<li>Contributions Welcomes</li>
<li>WYSIWYG editor or Toolbar ready</li>
<li>Keeps HTML organized and semantic (even on paste events)</li>
<li>Rich text editing with hotkeys <code>(cmd/ctrl+[b,u,i])</code></li>
<li>Placeholders</li>
<li>Inline, partial, and rich editors</li>
<li>Automatics HR (or BR, or P) tag insertion on two empty paragraphs in succession</li>
<li>Great for writing titles, comments, or entire articles</li>
<li>Much more expressive and customizable than <code>input</code> or <code>textarea</code></li>
</ul>
<hr />
<h3 id="Usage">Usage</h3>
<pre data-src="usage.html" data-language="html"></pre>
<p>Simply include the dependencies, Medium.js library, CSS, and you are ready to rock.</p>
<hr />
<h3 id="Demos">Demos</h3>
<div class="demo-container">
<h4 id="inline"><a href="#inline">Inline</a></h4>
<div data-src="inline.js">
<div id="title" class="title demo"></div>
</div>
</div>
<div class="demo-container">
<h4 id="partial"><a href="#partial">Partial</a></h4>
<div data-src="partial.js">
<div id="comment" class="comment demo"></div>
</div>
</div>
<div class="demo-container">
<h4 id="rich"><a href="#rich">Rich</a></h4>
<div data-src="rich.js">
<div id="article" class="article demo"></div>
</div>
</div>
<div class="demo-container">
<h4 id="insert"><a href="#insert">Rich with Insert Html</a></h4>
<div data-src="rich_with_insert_html.js">
<div class="toolbar-top">
<span class="toolbar">
<span class="insert">INSERT</span>
</span>
</div>
<div id="rich_with_insert_html" class="article demo"></div>
</div>
</div>
<div class="demo-container">
<h4 id="insert_object"><a href="#insert_object">Rich with Insert <u>Html Object</u></a></h4>
<div data-src="rich_with_insert_html_object.js">
<div class="toolbar-top">
<span class="toolbar">
<span class="li">LI</span>
</span>
</div>
<div id="rich_with_insert_html_object" class="article demo"></div>
</div>
</div>
<div class="demo-container">
<h4 id="invoke"><a href="#invoke">Rich with Invoke Element</a></h4>
<div data-src="rich_with_invoke_element.js">
<div class="toolbar-top">
<span class="toolbar">
<span class="bold" style="font-weight: bold; color: #66d9ef">B</span>
<span class="underline" style="text-decoration: underline; color: #a6e22e">U</span>
<span class="italic" style="font-style: italic; color: #f92672">I</span>
<span class="strike" style="text-decoration: line-through; color: #e6db74">S</span>
</span>
</div>
<div id="rich_with_invoke_element" class="article demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum dapibus dictum. Etiam tempor a enim id sagittis. Donec sodales varius elementum. In iaculis consequat enim, et pellentesque erat accumsan ut. Nulla nec lacus nisi. Nullam id interdum risus, sit amet sollicitudin ipsum. Ut vitae rutrum nulla.<br />
<br />
Vivamus eget dolor est. Donec lobortis felis metus, vel placerat nunc iaculis id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eu neque dictum, pulvinar massa faucibus, accumsan diam. Vestibulum pharetra massa dolor, ut tincidunt nisl suscipit vitae.
</div>
</div>
</div>
<div class="demo-container">
<h4 id="widget-img"><a href="#widget-img">Rich with Widgets</a></h4>
<div data-src="rich_with_widget_img.js">
<div id="rich_with_widget_img" class="article demo">
<p>
<img contenteditable="false" alt="T" style="height: 50px;" src="//upload.wikimedia.org/wikipedia/commons/2/22/Fra_Luca_Pacioli_Letter_T_1509.png">his is Medium.j<img contenteditable="false" alt="s" style="height: 14px;" src="//upload.wikimedia.org/wikipedia/commons/4/42/Fra_Luca_Pacioli_Letter_S_1509.png">
</p>
<br />
</div>
</div>
</div>
<div class="demo-container">
<h4 id="invoke-drag"><a href="#invoke-drag">Rich with Widget & Invoke Element</a></h4>
<div data-src="rich_with_widget_invoke_element.js">
<div class="toolbar-top">
<span class="toolbar">
<span class="bold" style="font-weight: bold; color: #66d9ef">B</span>
<span class="underline" style="text-decoration: underline; color: #a6e22e">U</span>
<span class="italic" style="font-style: italic; color: #f92672">I</span>
<span class="strike" style="text-decoration: line-through; color: #e6db74">S</span>
</span>
</div>
<div id="rich_with_widget_invoke_element" class="article demo">
<p contenteditable="false">Widget</p>
<br />
</div>
</div>
</div>
<hr/>
<h3 id="Semantic">Semantic</h3>
<pre data-src="semantic.html"></pre>
<p>The code within Medium.js editors are very semantic and organized, giving you peace of mind with using <code>contenteditable</code>.</p>
<hr />
<h3 id="Options">Options</h3>
<pre data-src="options.js"></pre>
<p>All options (excluding <code>modifiers</code>, <code>tags</code>, and <code>cssClasses</code>) may be overridden with <code>data-medium-*</code> attributes on the element.</p>
<ul class="def">
<li>
<div> <code class="ref">element</code>: The element in which you want to apply Medium.js to.</div>
</li>
<li>
<div> <code class="ref">modifier</code>: The modifier you want for making things bold/italic etc. May be set to <code>'auto'</code>, <code>'cmd'</code>, or <code>'ctrl'</code>. </div>
</li>
<li>
<div> <code class="ref">placeholder</code>: An optional string that displays when the editor is empty </div>
</li>
<li>
<div> <code class="ref">autofocus</code>: Set the focus to the specified element automatically </div>
</li>
<li>
<div> <code class="ref">autoHR</code>: An HR tag will automatically be inserted if there are two empty paragraphs in succession </div>
</li>
<li>
<div> <code class="ref">mode</code>: Dictate the mode in which you want to allow editing. Currently there are three:
<ul>
<li><code class="ref">Medium.inlineMode</code> or <code>"inline"</code> allows for no rich text editing, and no newlines. Similar to an <code>input</code> element.</li>
<li><code class="ref">Medium.partialMode</code> or <code>"partial"</code> is like a <code>textarea</code>, but allows support for paragraphs.</li>
<li><code class="ref">Medium.richMode</code> or <code>"rich"</code> allows styling of the text, paragraphs, and hr tags.</li>
<li><code class="ref">Medium.inlineRichMode</code> or <code>"rich"</code> allows styling of the text, but no new lines.</li>
</ul>
</div>
</li>
<li>
<div> <code class="ref">maxLength</code>: The max size you want to allow for the editor </div>
</li>
<li>
<div>
<code class="ref">modifiers[{Number}|{String}] = function(event, element) {};</code>:
Key modifiers from <code>event.keyCode</code> that will be used to apply the respective styling changes or hook into events.
</div>
</li>
<li>
<div> <code class="ref">tags</code>: Dictates allowed tags. Can be set to <code>null</code> for extreme freedom.<br>
<br>
<ul>
<li><code>tags.break</code> is the element that will be created for line breaks.</li>
<li><code>tags.horizontalRule</code> is the element that will be created for a horizontal rule.</li>
<li><code>tags.paragraph</code> is the element that will be created for paragraphs.</li>
<li><code>tags.outerLevel</code> are the only elements allowed to replace a top-level tag.</li>
<li><code>tags.innerLevel</code> are the only tags allowed within the parent tags. No additional tags are allowed unless included here.</li>
</ul>
</div>
</li>
<li>
<div> <code class="ref">attributes</code>: Dictates attributes. Can be set to <code>null</code> for extreme freedom.<br>
<br>
<ul>
<li><code>attributes.remove</code> are attributes to be removed.</li>
</ul>
</div>
</li>
<li>
<div> <code class="ref">cssClasses</code>: Various classes used within Medium.js, customizable to your liking. </div>
</li>
<li>
<div>
<code class="ref">beforeInvokeElement()</code>:
Triggered just before an element is invoked.
An element is invoked over a highlighted area.
The <code>this</code> within the context of this function is <code>Medium.Element</code> that is about to be invoked.
</div>
</li>
<li>
<div>
<code class="ref">beforeInsertHtml()</code>:
Triggered just before html is added.
Inserted at cursor, but only if medium's element has focus.
The <code>this</code> within the context of this function is <code>Medium.Html</code> that is about to be inserted.
</div>
</li>
<li>
<div>
<code class="ref">beforeAddTag(tag, shouldFocus, isEditable, afterElement)</code>:
Triggered just before a tag is told to be created from a keyboard action.
</div>
</li>
<li>
<div>
<code class="ref">keyContext[{Number}|{String}] = function(event, element) {};</code>:
Triggered just before a keydown event.
Can return false or true to override existing functionality, or null to continue.
The <code>element</code> is the element where the caret currently resides.
</div>
</li>
</ul>
<hr />
<h3 id="Methods">Methods</h3>
<p>Methods provide functionality that can be used with buttons, toolbars, WYSIWYG editors, and the environment it is being used with.</p>
<ul class="def">
<li>
<div> <code class="ref">destroy()</code>: Destroy the instantiated medium.js </div>
</li>
<li>
<div> <code class="ref">invokeElement({String}tagName, {Object} [attributes])</code>: invokes an element.</div>
<div class="important">returns {Medium}</div>
</li>
<li>
<div> <code class="ref">insertHtml({String|HtmlElement} html, {Function} [callback])</code>: inserts html into the editor at the cursor.</div>
<div class="important">returns {Medium}</div>
<div class="important">callback's "this" is inserted/created HtmlElement</div>
</li>
<li>
<div> <code class="ref">makeUndoable()</code>: makes the current state of the editor undoable/redoable. </div>
</li>
<li>
<div> <code class="ref">redo()</code>: redo an edit. </div>
</li>
<li>
<div> <code class="ref">undo()</code>: undo an edit. </div>
</li>
<li>
<div> <code class="ref">value({String} [value])</code>: set or get value from medium.</div>
<div class="important">When value is defined, element's innerHTML is set, and {Medium} is returned.</div>
<div class="important">When value is undefined, will return element's innerHTML {String} value.</div>
</li>
</ul>
<hr/>
<div class="faq">
<h3 id="FAQ">FAQ</h3>
<h4>What is the purpose of Medium.js?</h4>
<p>Medium.js allows you to take total control over <code>contenteditable</code> elements. This means that you can use <code>contenteditable</code> without fearing your user is going to enter poor or invalid HTML. It keeps things tight, organized, and semantic.</p>
<h4>Does this give me the cool toolbar like Medium's editor?</h4>
<p>Yes... Coming soon. The focus of Medium.js has been to make introducing a toolbar, any toolbar, YOUR toolbar, ultra easy. Take a look at <a href="http://wikiLingoDoesThat.com/">wikiLingo</a> for example. More to come!</p>
<h4>Medium.js works in all browsers!?!</h4>
<p>Yup. This is because of you. But if you find a bug, please let us know or fork Medium.js and contribute so we can continue wide support!</p>
<h4>Who uses Medium.js</h4>
<ul class="list">
<li><a href="http://tiki.org">tiki Wiki CMS Groupware</a></li>
<li><a href="http://wikiLingoDoesThat.com/">wikiLingo</a></li>
<li>More to come</li>
</ul>
</div>
<hr />
<h4 id="Support">Support</h4>
<p>Need commercial support for Medium.js? Currently provided by <a href="//visop-dev.com/Contact+Us">Visual Interop Development llc.</a>, drop us a line, we can't wait to see what we can do together.</p>
<h4 id="Licensing">Licensing</h4>
<div class="license">
<p><b>MIT Licensing</b></p>
<p>Copyright (c) 2013 Jacob Kelley</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
</div>
</div>
<!--Navigation-->
<div id="menu">
<ul class="shadow">
<li class="catch"><a href="#ThisisMediumjs">This is Medium.js</a></li>
<li><a href="#Features">Features</a></li>
<li><a href="#Usage">Usage</a></li>
<li><a href="#Demos">Demos</a></li>
<li><a href="#Semantic">Semantic</a></li>
<li><a href="#Options">Options</a></li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="../test">Unit Testing</a></li>
<li><a href="#Support">Support</a></li>
<li><a href="#Licensing">Licensing</a></li>
</ul>
<div class="actuator"><a href="#">+</a></div>
</div>
<!--Make Forkable-->
<a href="//github.com/jakiestfu/Medium.js"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<a href="../test/" title="Testify.js Tested!"><img style="position: fixed; top: 0; right: 0; border: 0;" src="//robertleeplummerjr.github.io/testify.js/icon.svg" alt="Testify.js Tested!"></a>
<script>
window.Prism = {};
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../bower_components/undo/undo.js"></script>
<script src="../bower_components/rangy-official/rangy-core.js"></script>
<script src="../bower_components/rangy-official/rangy-classapplier.js"></script>
<script src="../medium.js"></script>
<script src="prism.js"></script>
<script src="docs.js"></script>
<script src="partials/inline.js"></script>
<script src="partials/partial.js"></script>
<script src="partials/rich.js"></script>
<script src="partials/rich_with_insert_html.js"></script>
<script src="partials/rich_with_insert_html_object.js"></script>
<script src="partials/rich_with_invoke_element.js"></script>
<script src="partials/rich_with_widget_img.js"></script>
<script src="partials/rich_with_widget_invoke_element.js"></script>
</body>
</html>