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.
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 .
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()" />