Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="textEditorTab">
    <span data-cmd="bold"><b>B</b></span>
    <span data-cmd="italic"><i>I</i></span>
    <select id="fonts">
        <option value="Arial">Arial</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
        <option value="Courier New">Courier New</option>
        <option value="Monotype Corsiva">Monotype</option>
        <option value="Tahoma">Tahoma</option>
        <option value="Times">Times</option>
    </select>
</div>
<div id="textEditor"></div>
</body>
</html>
 
*{margin:0; padding:0;}
#textEditorTab span {
  cursor: pointer;
  display: inline-block;
  padding: 0px 10px 0px 10px;
}
#textEditorTab span:hover{
  background: #eee;
}
#textEditorTab span.selected {
  background-color: orange;
}
#textEditor {
  width:500px;
  height:170px;
  border:1px solid #ddd;
  padding:5px;
}
 
$(function() {
  
  var $editor = $('#textEditor').prop('contenteditable', true);
  var $btn = $('span[data-cmd]');
  // EXECUTE COMMAND
  function execCmd(cmd, arg){      
    document.execCommand(cmd,false,arg);
  }
  $btn.mousedown(function(e) {
    e.preventDefault();
    $(this).toggleClass("selected");
    execCmd(this.dataset.cmd);
  });
  
  $("#fonts").change(function() {
    execCmd("FontName", this.value);       
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers