<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="marked@*" data-semver="0.3.1" src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.1/marked.js"></script>
<script src="https://cdn.rawgit.com/toopay/bootstrap-markdown/master/js/bootstrap-markdown.js
"></script>
<script src="https://rawgit.com/lodev09/jquery-filedrop/master/jquery.filedrop.js
"></script>
<script src="https://rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link data-require="fontawesome@4.1.0" data-semver="4.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/toopay/bootstrap-markdown/master/css/bootstrap-markdown.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<h1>Bootstrap Markdown DEMO</h1>
<textarea id="comment-md" name="comment" placeholder="Say something..."></textarea>
<br />
<div id="comment-md-preview-container">
<div class="well well-sm well-light md-preview margin-top-10" id="comment-md-preview"></div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
$(function() {
var $previewContainer = $('#comment-md-preview-container');
$previewContainer.hide();
var $md = $("#comment-md").markdown({
autofocus: false,
height: 270,
iconlibrary: 'fa',
onShow: function(e) {
//e.hideButtons('cmdPreview');
e.change(e);
},
onChange: function(e) {
var content = e.parseContent();
if (content === '') $previewContainer.hide();
else $previewContainer.show().find('#comment-md-preview').html(content).find('table').addClass('table table-bordered table-striped table-hover');
},
footer: function(e) {
return '\
<span class="text-muted">\
<span data-md-footer-message="err">\
</span>\
<span data-md-footer-message="default">\
Add images by dragging & dropping or \
<a class="btn-input">\
selecting them\
<input type="file" multiple="" id="comment-images" />\
</a>\
</span>\
<span data-md-footer-message="loading">\
Uploading your images...\
</span>\
</span>';
}
});
var $mdEditor = $('.md-editor'),
msgs = {};
$mdEditor.find('[data-md-footer-message]').each(function() {
msgs[$(this).data('md-footer-message')] = $(this).hide();
});
msgs.
default.show();
$mdEditor.filedrop({
binded_input: $('#comment-images'),
url: "static-uploads.php",
fallbackClick: false,
beforeSend: function(file, i, done) {
msgs.
default.hide();
msgs.err.hide();
msgs.loading.show();
done();
},
//maxfilesize: 15,
error: function(err, file) {
switch (err) {
case 'BrowserNotSupported':
alert('browser does not support HTML5 drag and drop')
break;
case 'FileExtensionNotAllowed':
// The file extension is not in the specified list 'allowedfileextensions'
break;
default:
break;
}
var filename = typeof file !== 'undefined' ? file.name : '';
msgs.loading.hide();
msgs.err.show().html('<span class="text-danger"><i class="fa fa-times"></i> Error uploading ' + filename + ' - ' + err + '</span><br />');
},
dragOver: function() {
$(this).addClass('active');
},
dragLeave: function() {
$(this).removeClass('active');
},
progressUpdated: function(i, file, progress) {
msgs.loading.html('<i class="fa fa-refresh fa-spin"></i> Uploading <span class="text-info">' + file.name + '</span>... ' + progress + '%');
},
afterAll: function() {
msgs.
default.show();
msgs.loading.hide();
msgs.err.hide();
},
uploadFinished: function(i, file, response, time) {
$md.val($md.val() + "\n").trigger('change');
// response is the data you got back from server in JSON format.
}
});
})
/* Styles go here */
.md-editor.active {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.md-editor {
display: block;
border: 1px solid #ddd;
}
.md-editor>textarea {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 13px;
outline: 0;
margin: 0;
display: block;
width: 100%;
border: 0;
padding: 10px;
border-top: 1px dashed #ddd;
border-bottom: 1px dashed #ddd;
border-radius: 0;
box-shadow: none;
background: #eee;
}
.md-editor .md-footer,
.md-editor>.md-header {
display: block;
padding: 6px 4px;
background: #f5f5f5;
margin: 0;
}
.btn-input {
overflow: hidden;
position: relative;
cursor: pointer;
}
.btn-input input[type="file"] {
height: 30px;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
opacity: 0.0;
/* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=0);
/* IE lt 8 */
-ms-filter: "alpha(opacity=0)";
/* IE 8 */
-khtml-opacity: 0.0;
/* Safari 1.x */
-moz-opacity: 0.0;
/* FF lt 1.5, Netscape */
}
#Info
I've added some options, methods and events that fixes some issues submitted by other users and also enhances the plugin.
**Added events:**
- ***onChange*** - This will trigger every time you typed in anything on the ```textarea```. The event is triggered by ```keyup```, ```callbacks``` from each menu buttons and native ```textarea.on('change', ... )``` event
**Added methods:**
- ***hideButtons(name)*** - Completely hide the specified ```buttons``` by name. Using ```hidden``` class in boostrap.
- ***showButtons(name)*** - Opposite to ```hideButtons()```
- ***parseContent()*** - Parsing the content is now separated, so you can always call this function to parse the ```textarea``` content.
**Enhancement:**
- On ```showButtons```, ```hideButtons```, ```disableButtons``` and ```enableButtons``` methods, the ```name``` parameter can now be either an ```array``` or ```string```
**Fixes:**
- I've noticed on the current version, ```keyup``` is triggering ***3x*** because of ```keypress``` and ```keydown``` events. I've commented these lines to avoid redundancy of ```keyup``` trigger.
##Update 2##
Few additional options and [jquery hotkeys](https://github.com/jeresig/jquery.hotkeys) support too.
**New Options:**
- **footer** - You can now write your own footer content together with the `save` button (if available)
- **hiddenButtons** - `array` or `string` of button names to be hidden (called via `hideButtons(...)` method)
- **disabledButtons** - `array` or `string` of button names to be disabled (called via `disableButtons(...)` method
**New Buttons**
- **Ordered List `cmdListO (Ctrl+O)`** - Using numeric instead of hyphen `-`
- **Code `cmdCode (Ctrl+K)`** - Button for `code` block
- **Quote `cmdQuote (Ctrl+Q)`** - Button for `quote` block
**jquery hotkeys support**
[https://github.com/jeresig/jquery.hotkeys](https://github.com/jeresig/jquery.hotkeys)
I've added the support for jquery hotkeys so user can assign a hotkey for each buttons (new property `hotkey` in the buttons object). Default buttons has already default hotkeys.