CODEWITHSUNDEEP
javascripthtmlcss
Justin Harris
Justin Harris

Reputation: 43

Capture selection inside contenteditable div after clicking bold button

I am trying to get the selected text inside a contenteditable div once a button is clicked and so far nothing I try is working. :( Here is the code I have thus far:

html

<html>
  <head>
  </head>
  <body>
    <div class="toolbar">
      <span class="tool bold" id="tool-bold">B</span>
    </div>
    <div id="my_textarea" contenteditable>
    </div>
  </body>
</html>

css

html, body {
  margin:0;
  padding:0;
}

#my_textarea {
  height:20rem;
  width:20rem;
  resize:none;
  border:1px solid #000;
}

.toolbar {
  display:flex;
  flex-direction:row;
  height:50px;
  align-items:center;
  border:1px solid #000;
  width:200px;
  padding:10px;
}

.tool {
  border:1px solid #000;
  width:1em;
  height:1em;
  line-height:1em;
  text-align:center;
  cursor:pointer;
}

.tool.bold {
  font-weight:bold;
}

javascript

function saveSelection() {
  if(window.getSelection) {
    sel = window.getSelection();
    if(sel.getRangeAt && sel.rangeCount){
      return sel.getRangeAt(0);
    }
  } else if (document.selection && document.selection.createRange) {
    return document.selection.createRange();
  }
  return null;

}

function restoreSelection(range) {
  if (range) {
    if(window.getSelection) {
      sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    } else if (document.selection && range.select) {
      range.select();
    }
  }
}

var selection;

window.addEventListener("load", function(){
  var textarea = document.getElementById("my_textarea");
  var boldTool = document.getElementById("tool-bold");
  textarea.addEventListener("blur", function(event){
  selection = saveSelection();
  });
  
  boldTool.addEventListener("click", function(event){
  console.log(selection);
  });
                            
  
});

I managed to only get the desired result if clicking inside an iframe.. If anyone could please help I would so much appreciate it. Thank you in advance and please go easy on me... :)

Upvotes: 0

Views: 242

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

You may use selectionchange event

var selection;

window.addEventListener("DOMContentLoaded", function(){
  var textarea = document.getElementById("my_textarea");
  var boldTool = document.getElementById("tool-bold");
  document.addEventListener("selectionchange", function(event){
      var sel = document.getSelection();
      if (sel.anchorNode.parentElement.id == 'my_textarea') {
          selection = sel.toString();
      }
  });

  boldTool.addEventListener("click", function(event){
      console.log(selection);
  });
});
html, body {
    margin:0;
    padding:0;
}

#my_textarea {
    height:20rem;
    width:20rem;
    resize:none;
    border:1px solid #000;
}

.toolbar {
    display:flex;
    flex-direction:row;
    height:50px;
    align-items:center;
    border:1px solid #000;
    width:200px;
    padding:10px;
}

.tool {
    border:1px solid #000;
    width:1em;
    height:1em;
    line-height:1em;
    text-align:center;
    cursor:pointer;
}

.tool.bold {
    font-weight:bold;
}
<div class="toolbar">
    <span class="tool bold" id="tool-bold">B</span>
</div>
<div id="my_textarea" contenteditable>
</div>

Upvotes: 2

Related Questions