tibastral / markdownify Goto Github PK

View Code? Open in Web Editor NEW

887.0 23.0 36.0 135 KB

The simplest markdown editor with built in cloudinary image upload.

License: MIT License

CSS 12.48% JavaScript 87.52%

markdownify's Introduction

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's People

Contributors

Stargazers

Watchers

markdownify's Issues

Odd scrolling on mobile

Great tool! However the scrolling behaves very strangely if I open it on my iPhone 6

On blur the editor should put the content back in the textarea

Code block support

Would be great to have code support on this. Using syntax ```.

Table support

Would be nice to have ability to add a table through a button

Without jQuery?

What about a version without jQuery? I can only see jQuery being used for the selector. What about markdownify a standalone module?

Video tag inserts null

In your demo, click the "Video" link then hit "Cancel" on the popup dialog and it inserts "null" into the window.

Also not sure what the point of the video link is? When I inserted a Youtube link via the video tag, it just inserted the actual link I'd pasted into the textarea and did nothing else.

can't get integration tests to pass through Markdownify

Hi @tibastral!

We're currently integrating Markdownify into our rails application for ComplianceChimp.

My developer @adamico is currently facing an issue,

I'm facing a worrying issue with markdownify. All is working fine and I've managed to style the buttons toolbar with bootstrap and fontawesome and restore the write/preview tabs. What is bothering me is I cannot seem to find out how to interact with the editor through javascript in order for the integration specs to pass... This is a blocking issue for us. I'll contact the markdownify library creator to ask if he knows how to fill in the editor contents programmatically and let you know.

What do you think? Let me know.

Cheers!
Akshat

Web component support

It would be perfect if we can use markdownify as a web component.

<markdownify></markdownify>

Bower component?

It would be nice to be able to bower install this as a package.

Blockquotes don't work

> quoted text renders in a normal <p> tag.

It should render in a <blockquote> block.

Syntax highlighting

It would be nice to see what is special syntax in a line and what isn't.
For example, when a line is a title line (with #), the whole line is bigger. If the line ends with the wrong number off #'s, one can't see it before full preview mode. In this case, maybe the #'s could have a different size or color to indicate they are special syntax and be with the title style if they are literal and not a part of the title syntax (# foo ##)