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.
Visit Site
| Option | Description | Default |
|---|---|---|
container |
The ID (string) or element (object) of the target container in which you want the editor to appear. | epiceditor |
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 |
parser |
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. | |
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 |
shortcut.modifier |
The key to hold while holding the other shortcut keys to trigger a key combo. | 18 (alt key) |
shortcut.fullscreen |
The shortcut to open fullscreen. | 70 (f key) |
shortcut.preview |
The shortcut to open the previewer. | 80 (p key) |
shortcut.edit |
The shortcut to open the editor. | 79 (o key) |
Events
You can hook into specific events in EpicEditor with on() such as when a file is created, removed, or updated. Below is a complete list of currently supported events and their description.
| Event Name | Description |
|---|---|
create |
Fires whenever a new file is created. |
read |
Fires whenever a file is read. |
update |
Fires whenever a file is updated. |
remove |
Fires whenever a file is deleted. |
load |
Fires when the editor loads via load(). |
unload |
Fires whenever the editor is unloaded via unload() |
preview |
Fires whenever the previewer is opened (excluding fullscreen) via preview() or the preview button. |
edit |
Fires whenever the editor is opened (excluding fullscreen) via edit() or the edit button. |
save |
Fires whenever the file is saved whether by EpicEditor automatically or when save() is called. |
open |
Fires whenever a file is opened or loads automatically by EpicEditor or when open() is called. |
Step To setup
Following step are follow to develope simple example.
Step 1: Download
Download
Download the latest release (0.1.1) or clone the repo:
1
$ git clone git@github.com:OscarGodson/EpicEditor
Step 2: Create your container element
1
<div id="epiceditor"></div>
Step 3: Add the epiceditor.js file
1
<script src="epiceditor.min.js"></script>
Step 4: Init EpicEditor
1
var editor = new EpicEditor().load();
