⚠️ DEPRECATION WARNING

This repository is no longer actively maintained.

An Embeddable JavaScript Markdown Editor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.

Why

Because, WYSIWYGs suck. Markdown is quickly becoming the replacement. GitHub, Stackoverflow, and even blogging apps like Posterous are now supporting Markdown. EpicEditor allows you to create a Markdown editor with a single line of JavaScript:

var editor = new EpicEditor().load();

Quick Start

EpicEditor is easy to implement. Add the script and assets to your page, provide a target container and call load().

Step 1: Download

Download the latest release or clone the repo:

$ git clone git@github.com:OscarGodson/EpicEditor

Step 2: Install

Copy EpicEditor/epiceditor/ onto your webserver, for example to /static/lib/epiceditor.

$ scp -r EpicEditor/epiceditor you@webserver:public_html/static/lib/

You can of course customize this step for your directory layout.

Step 3: Create your container element

<div id="epiceditor"></div>

Alternately, wrap an existing textarea to load the contents into the EpicEditor instance.

<div id="epiceditor"><textarea id="my-edit-area"></textarea></div>

Step 4: Add the epiceditor.js file

<script src="/static/lib/epiceditor/js/epiceditor.min.js"></script>

Step 5: Init EpicEditor

EpicEditor needs to know where to find its themes, so it needs to be told its install directory at init.

var editor = new EpicEditor({basePath: '/static/lib/epiceditor'}).load();

API

EpicEditor([options])

The EpicEditor constructor creates a new editor instance. Customize the instance by passing the options parameter. The example below uses all options and their defaults:

var opts = {
  container: 'epiceditor',
  textarea: null,
  basePath: 'epiceditor',
  clientSideStorage: true,
  localStorageName: 'epiceditor',
  useNativeFullscreen: true,
  parser: marked,
  file: {
    name: 'epiceditor',
    defaultContent: '',
    autoSave: 100
  },
  theme: {
    base: '/themes/base/epiceditor.css',
    preview: '/themes/preview/preview-dark.css',
    editor: '/themes/editor/epic-dark.css'
  },
  button: {
    preview: true,
    fullscreen: true,
    bar: "auto"
  },
  focusOnLoad: false,
  shortcut: {
    modifier: 18,
    fullscreen: 70,
    preview: 80
  },
  string: {
    togglePreview: 'Toggle Preview Mode',
    toggleEdit: 'Toggle Edit Mode',
    toggleFullscreen: 'Enter Fullscreen'
  },
  autogrow: false
}
var editor = new EpicEditor(opts);

Options

load([callback])

Loads the editor by inserting it into the DOM by creating an iframe. Will trigger the load event, or you can provide a callback.

editor.load(function () {
  console.log("Editor loaded.")
});

unload([callback])

Unloads the editor by removing the iframe. Keeps any options and file contents so you can easily call .load() again. Will trigger the unload event, or you can provide a callback.

editor.unload(function () {
  console.log("Editor unloaded.")
});

getElement(element)

Grabs an editor element for easy DOM manipulation. See the Themes section below for more on the layout of EpicEditor elements.

• container: The element given at setup in the options.
• wrapper: The wrapping <div> containing the 2 editor and previewer iframes.
• wrapperIframe: The iframe containing the wrapper element.
• editor: The #document of the editor iframe (i.e. you could do editor.getElement('editor').body).
• editorIframe: The iframe containing the editor element.
• previewer: The #document of the previewer iframe (i.e. you could do editor.getElement('previewer').body).
• previewerIframe: The iframe containing the previewer element.

someBtn.onclick = function () {
  console.log(editor.getElement('editor').body.innerHTML); // Returns the editor's content
}

is(state)

Returns a boolean for the requested state. Useful when you need to know if the editor is loaded yet for example. Below is a list of supported states:

• loaded
• unloaded
• edit
• preview
• fullscreen

fullscreenBtn.onclick = function () {
  if (!editor.is('loaded')) { return; }
  editor.enterFullscreen();
}

open(filename)

Opens a client side storage file into the editor.

Note: This does not open files on your server or machine (yet). This simply looks in localStorage where EpicEditor stores drafts.

openFileBtn.onclick = function () {
  editor.open('some-file'); // Opens a file when the user clicks this button
}

importFile([filename],[content])

Imports a string of content into a client side storage file. If the file already exists, it will be overwritten. Useful if you want to inject a bunch of content via AJAX. Will also run .open() after import automatically.

Note: This does not import files on your server or machine (yet). This simply looks in localStorage where EpicEditor stores drafts.

importFileBtn.onclick = function () {
  editor.importFile('some-file',"#Imported markdown\nFancy, huh?"); //Imports a file when the user clicks this button
}

exportFile([filename],[type])

Returns the plain text of the client side storage file, or if given a type, will return the content in the specified type. If you leave both parameters null it will return the current document's content in plain text. The supported exp