Estoy tratando de crear un editor de texto/html en javascript/Angular en el que estoy tratando de crear un enlace y desvincular un texto seleccionado del div contenteditable.
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()" />Estoy tratando de crear un enlace en el desenfoque de la entrada, pero document.execCommand no se ejecuta en la entrada.
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()" />