bold content editable

by Bharadwaj Kopparthi

HTML

<p contenteditable="true">

</p>
<button id="btn" >
click here
</button>

<p contenteditable="true">

</p>

CSS

p{
  background-color:grey;
}
b{
  background-color:blue;
}

JavaScript

p=document.getElementsByTagName("p")[0];

//console.log(p)

// adding eventlistener for keydown
p.addEventListener("keydown",listener);

// eventlistenerr callback function
function listener(){
  e=window.event;
  if(e.ctrlKey && e.keyCode==66)
    {
      console.log("CTRL+B");
      
      // creating bold element
      belm=document.createElement("strong");
      belm.setAttribute("contenteditable","true")
      p.appendChild(belm);
      
      //bug below
      // setting focus inside bold element
      setfocus(belm,0);
      e.preventDefault();
    }

}



///////////// code written for validating setfocus function

/// adding event listener to button for calling btnclick function
p2=document.getElementsByTagName("p")[1]
document.getElementById("btn").addEventListener("click",btnclick)

function btnclick(){
 setfocus(p2);
}


// function to set focus
function setfocus(context, position){
    var range = document.createRange();
    position =position || 0;
    var sel = window.getSelection();
    range.setStart(context, position);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    context.focus();
}