Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

282 lines (239 sloc) 16.096 kB
<!DOCTYPE html>
<html>
<head>
<title>EpicEditor - An embeddable JavaScript Markdown editor</title>
<style>
body {background:#FEED79;}
#wrapper { width:600px;margin:0 auto;font-family:helvetica,arial,sans-serif;line-height:1.4em; }
#example-1 { height:349px;border:1px solid #000; }
h1 { border-bottom:2px solid #000; padding:0 0 15px 0; font-size:38px; position:relative; }
h3,h4,h5,h6 { margin-bottom:0; }
h3 { font-size:20px; }
h4 { font-size:18px; }
h5 { font-size:16px; }
h6 { font-size:14px; padding:10px 0; border-top:1px solid #000; }
h1 span { opacity:0.25; font-weight:normal; font-size:20px; background:#000; color:#fff; padding:0 5px; border-radius:3px; position:absolute; top:0; right:0; }
pre { border:1px solid #000; overflow-x:auto; background:#000; }
.offline-mode pre { padding:5px; background:#000; color:#fff; }
p { font-size:13px; margin:5px 0; }
a { background:#000;color:#fff;text-decoration:none; }
.example { font-weight:bold; font-size:12px; }
</style>
<link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles//sunburst.min.css">
</head>
<body>
<div id="wrapper">
<h1>EpicEditor <span>alpha 0.0.3</span></h1>
<h2>An Embeddable JavaScript Markdown Editor</h2>
<p>EpicEditor is an embeddable JavaScript <a href="http://daringfireball.net/projects/markdown/">Markdown</a> editor with some minor Markdown enhancements such as automatic link creation and code fencing.</p>
<div id="example-1"></div>
<h3>Why</h3>
<p>WYSIWYGs suck and they suck hard. Markdown is quickly becoming the replacement. <a href="http://github.com">GitHub</a>, <a href="http://stackoverflow.com">Stackoverflow</a>, and even blogging apps like <a href="http://posterous.com">Posterous</a> support Markdown now. This allows you to generate a Markdown editor with a preview, fullscreen editing, full CSS theming, and offline support with a simple:</p>
<pre><code class="javascript">var editor = new EpicEditor(element).load();</code></pre>
<h3>How</h3>
<p>EpicEditor allows for all kinds of customization. For simple drop-in-and-go support see the <a href="#quick-start">quick start</a> right below, otherwise checkout the full <a href="#api">API</a>.</p>
<h4 id="quick-start">Quick Start</h4>
<p>EpicEditor is easy to implement simply clone the repo and then it only needs an element to add the editor to and then you call <code>load()</code> when you're ready.</p>
<h5>Step 1: Clone the repo</h5>
<pre><code class="bash">$ git clone git@github.com:OscarGodson/EpicEditor</code></pre>
<h5>Step 2: Load the script</h5>
<pre><code ="html">&lt;script src="epiceditor.js"&gt;&lt;/script&gt;</code></pre>
<h5>Step 3: Init EpicEditor</h5>
<pre><code class="javascript">var element = document.getElementById('editor-wrapper');
var editor = new EpicEditor(element).load();</code></pre>
<h4 id="api">API</h4>
<p><strong>API Notes:</strong><br>
The constructor is first (<code>EpicEditor()</code>), but everything after are methods of that constructor. Any parameter inside wrapped in square brackets like <code>load([<em>callback</em>])</code> below means the parameter optional.</p>
<p><strong>Table of Contents:</strong></p>
<ol>
<li><a href="#api-epiceditor"><code>EpicEditor()</code></a></li>
<li><a href="#api-load"><code>load()</code></a></li>
<li><a href="#api-unload"><code>unload()</code></a></li>
<li><a href="#api-options"><code>options()</code></a></li>
<li><a href="#api-get"><code>get()</code></a></li>
<li><a href="#api-open"><code>open()</code></a></li>
<li><a href="#api-import"><code>import()</code></a></li>
<li><a href="#api-rename"><code>rename()</code></a></li>
<li><a href="#api-save"><code>save()</code></a></li>
<li><a href="#api-remove"><code>remove()</code></a></li>
<li><a href="#api-on"><code>on()</code></a></li>
<li><a href="#api-emit"><code>emit()</code></a></li>
<li><a href="#api-removeListener"><code>removeListener()</code></a></li>
<li><a href="#api-preview"><code>preview()</code></a></li>
<li><a href="#api-edit"><code>edit()</code></a></li>
<li><a href="#api-exportHTML"><code>exportHTML()</code></a></li>
</ol>
<h5>Constructor</h5>
<h6 id="api-epiceditor">EpicEditor(<em>element</em>)</h6>
<p>Creates a new EpicEditor instance. Give it an element you want to insert the editor into.</p>
<p class="example">Example:</p>
<pre><code class="javascript">var editor = new EpicEditor(element);</code></pre>
<p>Note: all the examples below will continue to use this same constructor.</p>
<h5>Methods</h5>
<h6 id="api-load">load([<em>callback</em>])</h6>
<p>Loads the editor by inserting it into the DOM by creating an <code>&lt;iframe&gt;</code>. Will trigger the <code>load</code> event, or you can use the callback instead.</p>
<p class="example">Example:</p>
<pre><code class="javascript">editor.load();</code></pre>
<h6 id="api-unload">unload([<em>callback</em>])</h6>
<p>Unloads the editor by removing the <code>&lt;iframe&gt;</code>, but will keep any options you set and file contents so you can easily call <code>.load()</code> again. Will trigger the <code>unload</code> event, or you can use the callback instead.</p>
<p class="example">Example:</p>
<pre><code class="javascript">editor.unload();</code></pre>
<h6 id="api-options">options(<em>options</em>)</h6>
<p>Lets you set options for the editor. The example below has all the options available currently.</p>
<ul>
<li><code>basePath</code>: The base path of the directory containing the <code>/themes</code>, <code>/images</code>, etc. It's <code>epiceditor</code> by default. <em>Don't add a trailing slash!</em></li>
<li><code>file.name</code>: If no file exists with this name a new one will be made, otherwise the existing will be opened.</li>
<li><code>file.defaultContent</code>: The content to show if no content exists for that file.</li>
<li><code>themes.editor</code>: The theme for the editor which is a textarea inside of an iframe.</li>
<li><code>themes.preview</code>: The theme for the previewer which is a div of content inside of an iframe.</li>
<li><code>focusOnLoad</code>: Will focus on the editor on load. It's <code>false</code> by default.</li>
<li><code>shortcuts.modifier</code>: The modifying key for shortcuts. It's <code>18</code> (the <kbd>alt</kbd> key) by default, to reduce default browser shortcut conflicts.</li>
<li><code>shortcuts.fullscreen</code>: The fullscreen shortcut key. It's <code>70</code> (<kbd>f</kbd> key) by default.</li>
<li><code>shortcuts.preview</code>: The preview shortcut key. It's <code>80</code> (<kbd>p</kbd> key) by default.</li>
<li><code>shortcuts.edit</code>: The edit mode shortcut key. It's <code>79</code> (<kbd>o</kbd> key) by default.</li>
</ul>
<p class="example">Example:</p>
<pre><code class="javascript">editor.options({
file:{
name:'example',
defaultContent:'Write text in here!'
},
themes:{
editor:'/css/epiceditor/editor-custom.css',
preview:'/css/epiceditor/preview-custom.css'
},
focusOnLoad:true,
shortcuts: {
preview: 77 //M
}
}).load();</code></pre>
<h6 id="api-get">get(<em>element</em>)</h6>
<p>Will grab an element of the editor for easy DOM manipulation inside of the editor.</p>
<ul>
<li><code>'document'</code>: Returns the iframe element.</li>
<li><code>'body'</code>: Returns the iframe's inner &lt;body&gt; element.</li>
<li><code>'editor'</code>: Returns the editor which is a &lt;textarea&gt;.</li>
<li><code>'previewer'</code>: Returns the previewer element which is a &lt;div&gt;.</li>
<li><code>'wrapper'</code>: Returns the wrapping &lt;div&gt; containing everything inside the &lt;iframe&gt;.</li>
</ul>
<p class="example">Example:</p>
<pre><code class="javascript">someBtn.onclick = function(){
console.log(ee.get('editor').value); //Would return the editor's content
}</code></pre>
<h6 id="api-open">open(<em>filename</em>)</h6>
<p>Opens a file into the editor.</p>
<p class="example">Example:</p>
<pre><code class="javascript">openFileBtn.onclick = function(){
ee.open('some-file'); //Open a file when the user clicks this button
}</code></pre>
<h6 id="api-import">import(<em>filename</em>,[<em>content</em>])</h6>
<p>Imports a string of markdown into a file. If the file already exists, it will be overwritten. Useful if you want to inject a bunch of content via AJAX.</p>
<p class="example">Example:</p>
<pre><code class="javascript">importFileBtn.onclick = function(){
ee.import('some-file',"#Imported markdown\nFancy, huh?"); //Imports a file when the user clicks this button
}</code></pre>
<h6 id="api-rename">rename(<em>oldName</em>,<em>newName</em>)</h6>
<p>Renames a file.</p>
<p class="example">Example:</p>
<pre><code class="javascript">renameFileBtn.onclick = function(){
var newName = prompt('What do you want to rename this file to?');
ee.rename('old-filename',newName); //Prompts a user and renames a file on button click
}</code></pre>
<h6 id="api-save">save()</h6>
<p>Manually save a file. EpicEditor will save on keyup by default but if you are inserting content via ajax for example, this is useful.</p>
<p class="example">Example:</p>
<pre><code class="javascript">saveFileBtn.onclick = function(){
ee.save();
}</code></pre>
<h6 id="api-remove">remove(<em>name</em>)</h6>
<p>Deletes a file.</p>
<p class="example">Example:</p>
<pre><code class="javascript">removeFileBtn.onclick = function(){
ee.remove('some-file');
}</code></pre>
<h6 id="api-on">on(<em>event</em>,<em>handler</em>)</h6>
<p>Sets up an event handler (callback) for a specified event. For all event types, see the <a href="#events">Events</a> section below.</p>
<p class="example">Example:</p>
<pre><code class="javascript">ee.on('unload',function(){
console.log('Editor was removed');
});</code></pre>
<h6 id="api-emit">emit(<em>event</em>)</h6>
<p>Sets off an event manually. Like jQuery's <code>.trigger()</code></p>
<p class="example">Example:</p>
<pre><code class="javascript">ee.emit('unload'); //Would trigger the above handler</code></pre>
<h6 id="api-removeListener">removeListener(<em>event</em>,[<em>handler</em>])</h6>
<p>Allows you to remove all listeners for an event, or just the specified one.</p>
<p class="example">Example:</p>
<pre><code class="javascript">ee.removeListener('unload'); //The handler above would no longer fire</code></pre>
<h6 id="api-preview">preview()</h6>
<p>Will put the editor into preview mode.</p>
<p class="example">Example:</p>
<pre><code class="javascript">previewBtn.onclick = function(){
ee.preview();
}</code></pre>
<h6 id="api-edit">edit()</h6>
<p>Will put the editor into edit mode.</p>
<p class="example">Example:</p>
<pre><code class="javascript">editBtn.onclick = function(){
ee.edit();
}</code></pre>
<h6 id="api-exportHTML">exportHTML()</h6>
<p>Will return the generated HTML from the Markdown that you see in the preview mode. Useful to saving content to a database.</p>
<p class="example">Example:</p>
<pre><code class="javascript">syncWithServerBtn.onclick = function(){
var theHTML = ee.exportHTML();
saveToServerAjaxCall('/save',{data:theHTML},function(){
console.log('data was saved to a db');
});
}</code></pre>
<h5 id="events">Events</h5>
<h6 id="">load</h6>
<p>Fires when the editor is loaded via <code>.load()</code>.</p>
<h6 id="">unload</h6>
<p>Fires when the editor is unloaded via <code>.unload()</code>.</p>
<h6 id="">preview</h6>
<p>Fires when the user clicks the preview button, or when <code>.preview()</code> is called.</p>
<h6 id="">edit</h6>
<p>Fires when the user clicks the edit button, or when <code>.edit()</code> is called.</p>
<h6 id="">save</h6>
<p>Fires when the file is saved automatically by EpicEditor, or when <code>.save()</code> is called.</p>
<h6 id="">open</h6>
<p>Fires when the file is opened on load automatically by EpicEditor, or when <code>.open()</code> is called.
<h4>Theming</h4>
<p>Theming involves two parts; each are optional. There is an <code>editor</code> and <code>preview</code> theme for each instance of an editor and these themes reside in <code>/themes/editor</code> and <code>/themes/preview</code>. The editor involves just a <code>&lt;textarea&gt;</code> and the <code>#utilbar</code> (the thing with the preview/edit andn fullscreen buttons). The preview is just a <code>&lt;div&gt;</code> with the generated HTML inside. All HTML for each editor is in an &lt;iframe&gt; so there is no need to worry about breaking the page you're embedding this on with similar class names or anything.</p>
<p>The HTML of a generated editor (excluding any content) looks like this:</p>
<pre><code class="html">&lt;div class=&quot;epiceditor-wrapper epiceditor-edit-mode&quot;&gt;
&lt;div class=&quot;epiceditor-utilbar&quot;&gt;
&lt;img width=&quot;16&quot; src=&quot;epiceditor/images/preview.png&quot; class=&quot;epiceditor-toggle-btn&quot;&gt;
&lt;img width=&quot;16&quot; src=&quot;epiceditor/images/fullscreen.png&quot; class=&quot;epiceditor-fullscreen-btn&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;epiceditor-editor&quot;&gt;
&lt;textarea class=&quot;epiceditor-textarea&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;div class=&quot;epiceditor-preview&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h3>Who</h3>
<p><a href="http://twitter.com/oscargodson">Oscar Godson</a> (me!), created EpicEditor with help from <a href="http://twitter.com/adam_bickford">Adam Bickford</a>. With many thanks to John Fraser (<em>site is no longer up</em>) for his <a href="https://github.com/coreyti/showdown">Showdown.js</a> script and <a href="http://daringfireball.net/">John Gruber</a> for <a href="http://daringfireball.net/projects/markdown/">Markdown</a>. Also, <a href="http://blog.izs.me">Isaac Z. Schlueter</a> for his port of <a href="https://github.com/isaacs/github-flavored-markdown">GitHub Flavored Markdown</a> which I <a href="https://github.com/oscargodson/github-flavored-markdown">forked</a>.</p>
</div>
<a href="https://github.com/OscarGodson/EpicEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
<script src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<script src="epiceditor.js"></script>
<script>
try{
hljs.initHighlightingOnLoad();
} catch(e){
document.body.className += " " + 'offline-mode';
console.log('Code highlighting will be disabled because yandex.st isn\'t loading or there is an error in the linked script.')
}
var examples = [document.getElementById('example-1')];
var ee1 = new EpicEditor(examples[0]);
ee1.options({
file:{
defaultContent:"#EpicEditor\nThis is some default content. Go ahead, _change me_. "
}
, focusOnLoad:true
})
.load();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.