JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<link rel="stylesheet" href="https://raw.githubusercontent.com/toopay/bootstrap-markdown/master/css/bootstrap-markdown.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://toopay.github.io/bootstrap-markdown/js/markdown.js"></script>
<script src="http://toopay.github.io/bootstrap-markdown/js/to-markdown.js"></script>
<script src="http://toopay.github.io/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<div class="container">
    <form>
        <textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input">### Hello World *This* **is** the ***ultimate test***.</textarea>
    </form>
    <div class="button-group pull-right">
        <p class="counter">140</p> <a href="#" class="btn btn-primary btn-post">Post</a>

    </div>
    <ul class='rows'>
        <ul class="posts list-inline"></ul>
    </ul>
</div>

JavaScript

$(".status-box").markdown({
    savable: true,

    onSave: function (e) {
        console.log(e)
        $('<li class="col-xs-6 pull-left raw-markdown">').append(e.getContent()).prependTo('.posts');
        $('<li class="col-xs-6 pull-right end-markdown">').append(e.parseContent()).prependTo('.posts');
    }
});

var post;
$(".btn-post").click(function (e) {
    post = $('.status-box').data('markdown').parseContent();
    console.log(post)
});