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.

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:

The ID (string) or element (object) of the target container in which you want the editor to appear.

epiceditor

textarea

The ID (string) or element (object) of a textarea you would like to sync the editor's content with. On page load if there is content in the textarea, the editor will use that as it's content.

basePath

The base path of the directory containing the /themes, /images, etc.

epiceditor

clientSideStorage

Setting this to false will disable localStorage.

true

localStorageName

The name to use for the localStorage object.

epiceditor

useNativeFullscreen

Set to false to always use faux fullscreen (the same as what is used for unsupported browsers).

true

parser

[Marked](https://github.com/chjj/marked) is the only parser built into EpicEditor, but you can customize or toggle this by passing a parsing function to this option. For example:parser: MyCustomParser.parse

marked

focusOnLoad

If true, editor will focus on load.

false

file.name

If no file exists with this name a new one will be made, otherwise the existing will be opened.

container ID

file.defaultContent

The content to show if no content exists for a file. NOTE: if the textarea option is used, the textarea's value will take precedence over defaultContent.

file.autoSave

How often to auto save the file in milliseconds. Set to false to turn it off.

100

theme.base

The base styles such as the utility bar with the buttons.

themes/base/epiceditor.css

theme.editor

The theme for the editor which is the area you type into.

themes/editor/epic-dark.css

theme.preview

The theme for the previewer.

themes/preview/github.css

button

If set to false will remove all buttons.

All buttons set to true.

button.preview

If set to false will remove the preview button.

true

button.fullscreen

If set to false will remove the fullscreen button.

true

shortcut.modifier

The key to hold while holding the other shortcut keys to trigger a key combo.

Returns the raw content of the file by default, or if given a type will return the content converted into that type. If you leave both parameters null it will return the current document's raw content.

Note: due to browser security restrictions, calling enterFullscreen programmatically
like this will not trigger native fullscreen. Native fullscreen can only be triggered by a user interaction like mousedown or keyup.

reflow() allows you to "reflow" the editor in it's container. For example, let's say you increased
the height of your wrapping element and want the editor to resize too. You could call reflow
and the editor will resize to fit. You can pass it one of two strings as the first parameter to
constrain the reflow to either width or height.

It also provides you with a callback parameter if you'd like to do something after the resize is finished.
The callback will return the new width and/or height in an object. Additionally, you can also listen for
the reflow event. This will also give you back the new size.

Note: If you call reflow() or reflow('width') and you have a fluid width container
EpicEditor will no longer be fluid because doing a reflow on the width sets an inline style on the editor.

Theming is easy in EpicEditor. There are three different <iframe>s which means styles wont leak between the "chrome" of
EpicEditor, previewer, or editor. Each one is like it's own web page. In the themes directory you'll see base, preview, and
editor. The base styles are for the "chrome" of the editor which contains elements such as the utility bar containing the icons.
The editor is the styles for the contents of editor <iframe> and the preview styles are applied to the preview <iframe>.

EpicEditor is set up to allow you to use any parser that accepts and returns a string. This means you can use any flavor of Markdown, process Textile, or even create a simple HTML editor/previewer (parser: false). The possibilities are endless. Just make the parser available and pass its parsing function to the EpicEditor setting and you should be all set.

For even more customization/optimization you can replace the default built-in processor on build. Running jake build parser=path/to/parser.js will override the default Marked build and replace it with your custom script.