Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tibastral/markdownify
The simplest markdown editor with built in cloudinary image upload.
https://github.com/tibastral/markdownify
Last synced: 3 days ago
JSON representation
The simplest markdown editor with built in cloudinary image upload.
- Host: GitHub
- URL: https://github.com/tibastral/markdownify
- Owner: tibastral
- License: mit
- Created: 2014-08-01T15:02:40.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2021-10-07T04:01:06.000Z (about 3 years ago)
- Last Synced: 2024-09-22T21:28:33.150Z (about 1 month ago)
- Language: JavaScript
- Size: 132 KB
- Stars: 886
- Watchers: 23
- Forks: 36
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- starred-awesome - markdownify - The simplest markdown editor with built in cloudinary image upload. (JavaScript)
README
# 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](http://tibastral.github.io/markdownify/)
# Usage:
Lets say you have a textarea you want to markdownify.
# Install with bower:
```sh
bower install jquery.markdownify
```
```html
```
```js
$('.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.
```html
```
To upload an image directly to cloudinary, you can add add a param to markdownify :
```js
$('.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:
```html
preview
```
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:
```html
data-toggle-text='edit-non-default-text'
```
_Change Preview button text:_
Modify the default text that's within the tag:
```html
edit me here
```
The code is extracted from [mipise.com](https://mipise.com) and extensively used in [jobboardmaker.com](https://jobboardmaker.com)