The simplest markdown editor with built in cloudinary image upload.
JavaScript CSS
Latest commit 792f9ee Feb 23, 2017 @tibastral committed on GitHub Merge pull request #27 from noyesno/master
toggle 'markdownify-menu' buttons visibility
Permalink
Failed to load latest commit information.
demo Fixing example text Apr 19, 2015
lib toggle 'markdownify-menu' buttons visibility Jan 4, 2017
vendor Jquery normal version Apr 11, 2015
.gitattributes Linguist Apr 11, 2015
.gitignore basic bower.json file May 20, 2015
LICENSE Initial commit Aug 1, 2014
README.md Update README.md Jul 5, 2015
bower.json Bump version Mar 9, 2016

README.md

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