createlink and unlink in contenteditable div

Question

I am trying to create a text/html editor in javascript/Angular in which I am trying to create link and unlink a selected text from the contenteditable div.

here is my JSFiddle

function saveSelection() {
  if (window.getSelection) {
    const sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      var ranges = [];
      for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        ranges.push(sel.getRangeAt(i));
      }
      return ranges;
    }
    return null;
  }
}

function restoreSelection(savedSel) {
  if (savedSel) {
    if (window.getSelection) {
      const sel = window.getSelection();
      sel.removeAllRanges();
      for (var i = 0, len = savedSel.length; i < len; ++i) {
        sel.addRange(savedSel[i]);
      }
    }
  }
}

function insertLink() {
  var savedSel = saveSelection();
  var url = document.getElementById("url").value;
  restoreSelection(savedSel);
  document.execCommand("createLink", false, url);
}

.editor {
  border: 2px solid black;
  width: 200px;
  height: 50px;
}

<div contenteditable="true" class="editor"></div>
<input type="text" id="url" style="border: solid blue 1px" value=" http://" onblur="insertLink()" />

I am trying to createlink on blur of input but document.execCommand not running in the input .

Answer 1

let savedSel=''
function saveSelection() {
  if (window.getSelection) {
    const sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      var ranges = [];
      for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        ranges.push(sel.getRangeAt(i));
      }
      savedSel=ranges;
      return;
    }
    savedSel=null;
  }
}

function restoreSelection() {
  if (savedSel) {
    if (window.getSelection) {
      const sel = window.getSelection();
      sel.removeAllRanges();
      for (var i = 0, len = savedSel.length; i < len; ++i) {
        sel.addRange(savedSel[i]);
      }
    }
  }
}
function insertLink(){
  var url = document.getElementById("url").value;
  restoreSelection(savedSel);
  document.execCommand("createLink", false, url);
}

.editor {
  border: 2px solid black;
  width: 200px;
  height: 50px;
}

<div contenteditable="true" class="editor" onblur="saveSelection()"></div>
<input type="text" id="url" style="border: solid blue 1px" value=" http://" onblur="insertLink()" />