Using EpicEditor In Drupal 7

EpicEditor is an awesome light weight JavaScript Markdown editor. If you love to write using Markdown, then seriously have a look at EpicEditor. When you think of editors for websites CKEditor or TinyMCE come to mind. These editors have their place in the world, however sometimes you can spend more time fighting against an editor. The two biggest features that I like about EpicEditor is the preview and the split fullscreen editing. Check out the EpicEditor homepage for more details and have a play around with the editor.

In this tutorial, we’ll configure EpicEditor using Wysiwyg and Markdown filter for Drupal.

Getting Started

Go download and install Wysiwyg and Markdown filter.

If you prefer Drush, run the following command:

$ drush dl wysiwyg markdown

Install EpicEditor

Download EpicEditor and extract the zip file into sites/all/libraries/epiceditor.

If you have installed the Wysiwyg module, you can go to Configuration -> “Wysiwyg profiles” (admin/config/content/wysiwyg) and click on the “Installation instructions” link to see instructions on how to install EpicEditor as well as a bunch of other editors.

Fig 1.0

Configure EpicEditor

The first thing we need to do is configure EpicEditor to work with the “Filtered HTML” text format and then setup Markdown as well.

1. Go to Configuration -> “Wysiwyg profiles” (admin/config/content/wysiwyg).

2. Select “EpicEditor 0.2.0” from the editor drop-down within the “Filtered HTML” row then click on Save.

Fig 1.1

3. Go to Configuration -> “Text formats” (admin/config/content/formats) and click on the configure link within the “Filtered HTML” row.

4. Remove the “Convert line breaks into HTML” and “Convert URLs into links” filters.

5. Add the Markdown filter and make sure that the filter is above the “Limit allowed HTML tags” filter.

Fig 1.2

6. For Markdown to work properly, we need to add a few more tags to the “Allowed HTML tags” text field in the “Limit allowed HTML tags” filter settings.

Copy the tags below into the “Allowed HTML tags” text field.

<a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br> <img> <table> <tr> <td> <th> <tbody>

7. Now go and create a test piece of content to see the editor in action.

Fig 1.3

The preview and fullscreen buttons appear in the right corner when you hover over the text area.

Fig 1.4

Markdown filter module uses the Markdown Extra library for additional syntax and features that are not part of the standard Markdown. For example, if you preview a Markdown Extra table in EpicEditor the table will not render properly. Currently the editor only supports standard Markdown syntax.

If you have any questions, please leave a comment.

10 thoughts on “Using EpicEditor In Drupal 7”

  1. This is much more appealing than bloated Wysywigs. What is the best way to get something like IMCE into EpicEditor?

  2. What’s the best way you’ve found to pass in the config object for EpicEditor? Lets you do things like change the theme, etc.

    Any luck getting the text field to be resizable? (dragging within the form like the default one, the fullscreen mode works out of the box)

  3. It doesn’t seem to work with panels!
    When we submit a form containing epic in a panels popup, it freezes all js events in the page. We need to reload the page.. 🙁

Leave a Comment

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.