Markedit
Markedit is a simple JavaScript only markdown widget.
Features
- Small and simple
- Not jQuery dependent
- Easy Image upload
- Easy to customize
- Works with any browser above IE9
Getting Started
- Add Markedit to your project using NPM or bower by running either of the following:
# NPM npm install markedit # Bower bower install markedit
CDN coming soon
- Include Markedit to your code
var Markedit = ; var markedit = options;
Or
Include the css file:
markedit.css
references the font files which is available in the dist folder. If you plan to go custom, see Custom Styles
- Configure Options
var options = container: 'md' width: '400px' height: '400px' resize: 'both' ;
- Load
Configuration
Option | Description | Default |
---|---|---|
height | Widget height | 400px |
width | Widget width | 400px |
imageUrl | Endpoint for handling image upload | null |
marked | Marked's configuration object | null |
markedHandler | Marked's callback | null |
resizeable | Determines if widget should be resizeable or not (both , horizontal , vertical , none ) |
none |
Markedit uses Marked to parse markdown.
options.marked
andoptions.markedHandler
are passed as argument to Marked when parsing.
## Events
You can also pass in some callbacks to the config to handle the events. Supported events are:
- onFocus: Called when the editor has focus:
var options = { console; };
- onBlur: Called when the editor looses focus:
var options = { console; };
- onPreview: Called when the preview button is clicked:
var options = { console; };
- onFullscreen: Called when the full screen button is clicked:
var options = { console; };
Image Upload
Markedit supports image upload. To enable this feature, set the imageUrl
to the url upload endpoint
var options = imageUrl: 'http://localhost:3000/images/upload'
The normal behavior of clicking the image button is to insert markdown image template at the cursor position but with image upload enabled, a file upload dialogue will be opened.
The end point provided should return a response that has an image property:
image: 'http://localhost:3000/uploads/just-uploaded.jpg'
An example handler using express and multer:
// Importsvar express = ;var bodyParser = ;var multer = ;var app = ;var upload = ; app;app; app; app;
Custom Style
You can override the provided style. To do so, you need to understand the DOM hierachy. Below is how the DOM looks under the hood:
<!-- ... more icons but truncated for brevity --> a
What you can then do is use the classes to target each item and add your custom style::
Examples
See the examples folder in this repository for a working demo
Contributing
- Fork the repository
- Clone to your workspace
- Run
npm install
- Create a feature or bug fix branch
- Make changes
- Run
grunt
to:- Lint
- Test
- Build
- Push and send in PR.