Cacher is the code snippet organizer for pro developers

/**
 * @license Rangy Inputs, a jQuery plug-in for selection and caret manipulation within textareas and text inputs.
 * 
 * https://github.com/timdown/rangyinputs
 *
 * For range and selection features for contenteditable, see Rangy.
 * http://code.google.com/p/rangy/
 *
 * Depends on jQuery 1.0 or later.
 *
 * Copyright 2014, Tim Down
 * Licensed under the MIT license.
 * Version: 1.2.0
 * Build date: 30 November 2014
 */

// Add the $ to start the first line of code... 
$(function($) {
    // Lots of other nifty code between the curly braces you can find here: https://github.com/timdown/rangyinputs
});

// FILE: app/assets/javascripts/application.js

// Notice below that jquery, jquery_ujs, and bootstrap are included, as is the whole folder (require_tree).
// That's why dropping the rangyinputs file into the same folder works. :)

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

var $textBox;

// Due to turbolinks, it's necessary to reload on document ready and page load.
// Set 'ready' here, and call it on either document ready or page load (see last two lines of code)
var ready = (function () {
  var theButtons = [
    { id: "#add_strong", before: "**", after: "**"},
    { id: "#add_em", before: "*", after: "*"},
    { id: "#add_h1", before: "\n# ", after: "\n"},
    { id: "#add_h2", before: "\n## ", after: "\n"},
    { id: "#add_h3", before: "\n### ", after: "\n"},
    { id: "#add_h4", before: "\n#### ", after: "\n"},
    { id: "#add_h5", before: "\n##### ", after: "\n"},
    { id: "#add_h6", before: "\n###### ", after: "\n"},
    { id: "#add_paragraph", before: "\n", after: "\n\n"},
    { id: "#add_blockquote", before: "\n> ", after: "\n"},
    { id: "#add_unord_list", before: "\n* ", after: "\n"},
    { id: "#add_ord_list", before: "\n1 ", after: "\n"},
    { id: "#add_link", before: "[", after: "](link_url)"},
    { id: "#add_url_link", before: "<", after: ">"},
    { id: "#add_img", before: "![", after: "](image_url)"},
    { id: "#add_inline_code", before: "```", after: "```"},
    { id: "#add_fenced_code", before: "\n~~~ ruby\n", after: "\n~~~\n"}
  ];

  theButtons.forEach( function (button) {
    $(button.id).on('click', function (e) {
      e.preventDefault();
      insertText(button.before, button.after);
    });
  });

  $textBox = $("#article_body");

  function saveSelection() {
      $textBox.data("lastSelection", $textBox.getSelection());
  }

  $textBox.focusout(saveSelection);

  $textBox.bind("beforedeactivate", function () {
      saveSelection();
      $textBox.unbind("focusout");
  });
});

function insertText(before_text, after_text) {
    $textBox.focus();
    if(typeof $textBox.data('lastSelection') == "undefined") {
      $textBox.data("lastSelection", $textBox.getSelection());
    }
    var selection = $textBox.data("lastSelection");
    console.log(selection);
    $textBox.setSelection(selection.start, selection.end);
    $textBox.surroundSelectedText(before_text, after_text);
}

$(document).ready(ready);
$(document).on('page:load', ready);

<div class="md_editor btn-toolbar" role="toolbar">

  <div class="btn-group" role="group">    
    <button class="btn btn-default" id="add_strong" title="Bold Text">
      <strong>B</strong>
    </button>  
    <button class="btn btn-default" id="add_em" title="Italic Text">
      <em>I</em>
    </button>
  </div>

  <div class="btn-group" role="group">
    <button class="btn btn-default" id="add_h1" title="Heading 1">H1</button>
    <button class="btn btn-default" id="add_h2" title="Heading 2">H2</button>
    <button class="btn btn-default" id="add_h3" title="Heading 2">H3</button>
    <button class="btn btn-default" id="add_h4" title="Heading 2">H4</button>
    <button class="btn btn-default" id="add_h5" title="Heading 2">H5</button>
    <button class="btn btn-default" id="add_h6" title="Heading 2">H6</button>
  </div>

  <div class="btn-group" role="group">
    <button class="btn btn-default" id="add_paragraph" title="New Paragraph">
      <span>P</span>
    </button> 
    <button class="btn btn-default" id="add_blockquote" title="Blockquote">
      <strong>"-"</strong>
    </button>
    <button class="btn btn-default" id="add_unord_list" title="Unordered (bulleted) list">
      <span class="glyphicon glyphicon-list"></span>
    </button>
    <button class="btn btn-default" id="add_ord_list" title="Ordered (numbered) list">
      <span class="glyphicon glyphicon-list-alt"></span>
    </button>
  </div>

  <div class="btn-group" role="group">
    <button class="btn btn-default" id="add_link" title="Text Link">
      <span class="glyphicon glyphicon-link"></span>
    </button>
    <button class="btn btn-default" id="add_url_link" title="Clickable URL Link">&#x3C;url&#x3E;</button>
    <button class="btn btn-default" id="add_img" title="Insert Picture from URL">
      <span class="glyphicon glyphicon-picture"></span>    
    </button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-default" id="add_inline_code" title="Inline Code Snippet">&#x3C;/&#x3E;</button>
    <button class="btn btn-default" id="add_fenced_code" title="Fenced Code Block">&#x3C;/.&#x3E;</button>
  </div>

</div>

  <div class="article_form">
    <%= render 'shared/error_messages', target: @article %>

    <%= f.label :title %>
    <%= f.text_field :title, class: 'form-control' %>

    <%= f.label :body %>
    <%= render 'toolbar' %> <!-- Render toolbar between label and target textarea -->
    <%= f.text_area :body, class: 'form-control' %>

    <%= f.label :tag_list %><br />
    <%= f.text_field :tag_list %>
  </div>