Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <div id = "t" contenteditable='true'>Some text here for you to bold</div>
  <br /><br />
  <textarea>Click bold and the html of the div will appear here.</textarea>
  <br /><br />
  <input type='button' value='bold' id='bold'/>
  
</body>
</html>
 
$(window).load(function() {
  console.clear();
  
  $('#bold').live('click', function () {
       
      console.log("bold");      
      var sel = window.getSelection();
      console.log(sel.toString());
    
      var mainDiv = document.getElementById("t");
      var range = document.createRange();
          console.log(mainDiv.firstChild.toString().length);
      range.setStart(mainDiv.firstChild, 12);
      range.setEnd(mainDiv.firstChild, 20);
      sel.removeAllRanges();
      sel.addRange(range);
      
      document.execCommand("styleWithCSS", true, null);
      document.execCommand("bold", false, null);
      $('textarea').val($('div').html());
    });
  
});
Output

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

Dismiss x
public
Bin info
MemoNickpro
0viewers