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.
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.
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.
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.
The preview and fullscreen buttons appear in the right corner when you hover over the text area.
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.
Too bad it doesn’t seem to work with Android?
Thanks for the information, I haven’t tested EpicEditor on an Android device.
This is much more appealing than bloated Wysywigs. What is the best way to get something like IMCE into EpicEditor?
I don’t think there is out-of-the-box support for IMCE and EpicEditor.
I would keep an eye on the “IMCE Wysiwyg bridge” module (http://drupal.org/project/imce_wysiwyg).
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)
I’m not sure. I used Wysiwyg API to implement EpicEditor and never had to touch EpicEditor directly.
Have a look at the epiceditor.js file in the Wysiwyg API module (http://drupalcode.org/project/wysiwyg.git/blob/HEAD:/editors/js/epiceditor.js).
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.. 🙁
Thanks that’s good to know.
What about Drupal 8 — what’s the best module / approach for using Markdown there?
Hi Vacilando,
Not sure about Drupal 8.
Markdown module has been updated for Drupal 8, but it looks like EpicEditor is no longer supported.
Cheers,
Ivan