Get new jQuery plugins just once a week

×

Markdownify

FavoriteLoadingAdd to favorites

April 15, 2015

Markdownify | the simplest markdown editor with built in cloudinary image upload.

Markdownify is a jQuery plugin for the simplest markdown editor with built in cloudinary image upload.

Created by Thibaut Assus

Download

Example

Markdownify jQuery plugin

preview


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

Markdownify

Related posts:

editable-table
focusable
simple-calendar
Markdownify jQuery plugin

http://jquer.in/wp-content/uploads/2015/04/Markdownify.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever