SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<script src="http://www.examplet.buss.hk/js/jquery.caret.min.js"></script>
<div id="main"> 
        <div> 
            <p style="font-size:16px;"> 
            Select some text here:<br /> 
            <textarea id="description" rows="8" cols="50">The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.</textarea> 
              <textarea id="description2" rows="5" cols="40">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</textarea> 
            </p> 
            Preview:
            <div id="preview">The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.</div> 
            <div id="menu"> 
                <a href="#" id="bold">b</a> 
                <a href="#" id="italic">i</a> 
                <a href="#" id="underline">u</a> 
                <a href="#" id="link">Link</a> 
            </div> 
        </div> 
    </div>

CSS

body { font-size:13px; font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; color:#666; margin:20px;}
#menu {padding:5px; background-color:#f5f5f5; display:none; 
       position:absolute; top:0px; left:0px; overflow:hidden;
       border:solid 1px #929292;}
#menu:hover {background-color:rgba(245, 245, 245, 1);}
#menu a { padding:3px 5px; border:solid 1px #f5f5f5; color:#000; text-decoration:none; font-size:14px;
    float:left; display:block; text-align:center; zoom:1;}
#menu a:hover { border:solid 1px #bea881; background-color:#fff2cb;}
#preview { width:400px; background-color:#f8f8f8; border:solid 1px #929292; padding:10px;}
#preview b, #preview u, #preview i {color:#c30;}

JavaScript

(function($){
  $.fn.minibar = function(options) {

    var defaults = { },
        settings = $.extend({}, defaults, options);

    this.each(function() {
      var $this = $(this);

      var mouseX = 0,
          mouseY = 0,
          selectionLength,
          activeElement;
 
      $this.mousemove(function(e) {
        // track mouse position
        mouseX = e.pageX;
        mouseY = e.pageY;
      });
    
      $this.select(function() {
        $("#menu").css("top", mouseY - 30).css("left", mouseX + 10).fadeIn("1000");
        $('textarea').removeClass('active');
        $(document.activeElement).addClass('active');
      });
    });
 
    var wrapText = function(startText, endText){
      // Get the text before the selection
      $this = $('textarea.active');
      var before = $this.val().substring(0, $this.caret().start);
      // Get the text after the selection
      var after = $this.val().substring($this.caret().end, $this.val().length);
      // merge text before the selection, a selection wrapped with inserted text and a text after the selection
      $this.val(before + startText + $this.caret().text + endText + after);
      // Update the preview
      $("#preview").html($this.val());
    }
            
    var emptySelection = function() {
      if (document.selection) {
        document.selection.empty();
      } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
      }
    };
            
    $(document).mousedown(function() {
      $("#menu").fadeOut();
    });

    $("#bold").unbind('click').click(function() {
        wrapText("<b>", "</b>");
        $("#menu").fadeOut();
        emptySelection();
    });

    $("#italic").unbind('click').click(function() {
        wrapText("<i>", "</i>");
        $("#menu").fadeOut();
        emptySelection();
    });
    
    $("#underline").unbind('click').click(function() {
        wrapText("<u>", "</u>");
        $("#menu").fadeOut();
        emptySelection();
    });
  ...