Markdownify

The simplest markdown editor with built in cloudinary image upload.

Based on CodeMirror for the editor and Marked for the preview.

Demo:

tibastral.github.io/markdownify

Usage:

Lets say you have a textarea you want to markdownify.

Install with bower:

bower install jquery.markdownify

<textarea class='markdown' id="markdown"></textarea>

$('.markdown').markdownify();

You can then add buttons for convenience of your users. You need to encapsulate your links (or buttons) in a item with the 'markdownify-menu' class. The data-target attribute is the id of the textarea you want to control.

<div class='markdownify-menu' data-target='markdown'>
  <a class='btn--insert' data-prefix='*' data-suffix='*' href='javascript:void(0)'>i</a>
  <a class='btn--insert' data-prefix='**' data-suffix='**' href='javascript:void(0)'>b</a>
  <a class='btn--insert' data-prefix='# ' href='javascript:void(0)'>h1</a>
  <a class='btn--insert' data-prefix='## ' href='javascript:void(0)'>h2</a>
  <a class='btn--insert' data-prefix='> ' href='javascript:void(0)'>quote</a>
  <a class='btn--insert' data-prefix='* ' href='javascript:void(0)'>list</a>
  <a class='btn--insert' data-prefix='1. ' href='javascript:void(0)'>1.</a>
  <a class='btn--insert' data-type='link' href='javascript:void(0)'>link</a>
</div>

To upload an image directly to cloudinary, you can add add a param to markdownify :

$('.markdown').markdownify(
  cloudinary: {
    // create an account on cloudinary and put here your cloud name
    cloudName: 'YOUR_CLOUD_NAME',
    // get your unsigned uploading key
    // http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud)
    unsignedUploadingKey: 'YOUR_UNSIGNED_UPLOADING_KEY'
  }
);

Options

If you want the preview toggle, add this after your markdown editor HTML:

<div class='markdown-preview'></div>
<a class='btn--preview' href='javascript:void(0)' data-target='markdown'>preview</a>

If you want the edit/preview button text to be different, modify the following:

Change Edit button text: Add the following attribute to the preview button:

data-toggle-text='edit-non-default-text'

Change Preview button text: Modify the default text that's within the tag:

<a class='btn--preview' href='javascript:void(0)' data-target='markdown'>edit me here</a>

The code is extracted from mipise.com and extensively used in jobboardmaker.com