Markdown button for a textarea using Twitter Bootstarp 3 icons, haml, and javascript https://www.dropbox.com/s/nmt0yrwlohdx80g/form-with-markdown-button.png

markdown-buttons

.form-group
  = f.label :text, :class => "control-label"
  .row
    .col-xs-12
      #markdown-tools
        .tool
          %span.glyphicon.glyphicon-bold(title="Bold")
        .tool
          %span.glyphicon.glyphicon-italic(title="Italics")
        .tool
          %span.glyphicon.glyphicon-header(title="Heading")
        .tool
          %span.glyphicon.glyphicon-list(title="Bulleted List")
        .tool
          %span.glyphicon.glyphicon-link(title="Insert Link")
        .tool
          %span.glyphicon.glyphicon-picture(title="Insert Image")
        = link_to "Markdown", "http://www.whatismarkdown.com", target: "_new", title: "What is Markdown?", class: "markdown_link"
      = f.text_area :text, class: "form-control", rows: "10"

:javascript
  jQuery.fn.extend({
    insertAtCaret: function(myValue){
      return this.each(function(i) {
        if (document.selection) {
          //For browsers like Internet Explorer
          this.focus();
          var sel = document.selection.createRange();
          sel.text = myValue;
          this.focus();
        }
        else if (this.selectionStart || this.selectionStart == '0') {
          //For browsers like Firefox and Webkit based
          var startPos = this.selectionStart;
          var endPos = this.selectionEnd;
          var scrollTop = this.scrollTop;
          this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
          this.focus();
          this.selectionStart = startPos + myValue.length;
          this.selectionEnd = startPos + myValue.length;
          this.scrollTop = scrollTop;
        } else {
          this.value += myValue;
          this.focus();
        }
      });
    }
  });

  (function( app, $, undefined ) {
    app.markdown_tools = {
      init: function() {
        $('#markdown-tools .tool').click(function(e){
          $button = $(e.delegateTarget).find('span')
          if ($button.hasClass('glyphicon-bold')) {
            $('textarea').val($('textarea').val()+'**')
            $('textarea').insertAtCaret('**')
          } else if ($button.hasClass('glyphicon-italic')) {
            $('textarea').val($('textarea').val()+'_')
            $('textarea').insertAtCaret('_')
          } else if ($button.hasClass('glyphicon-header')) {
            $('textarea').val($('textarea').val()+'\n### Headline')
          } else if ($button.hasClass('glyphicon-list')) {
            $('textarea').val($('textarea').val()+'\n* ')
          } else if ($button.hasClass('glyphicon-link')) {
            $('textarea').val($('textarea').val()+' [Link Text](url) ')
          } else if ($button.hasClass('glyphicon-picture')) {
            $('textarea').val($('textarea').val()+'\n\n ![Alt Text](image url) ')
          }
        })
      }
    }
  }( window.app = window.ebcc || {}, jQuery ));

  $(document).ready(function(){
    app.markdown_tools.init();
  })


## styles sass format

#markdown-tools
  margin-bottom: 6px
  a.markdown_link
    background-image: image-url('markdown-icon.png')
    width: 32px
    height: 20px
    text-indent: -2000px
    display: inline-block
    line-height: 20px
    margin-left: 3px
    
  .tool
    display: inline-block
    border: 1px solid $black
    padding: 1px 4px
    margin-right: 3px
    @include border-radius(4px)