Javascript 如何插入指向选定文本的链接

我正在尝试编写一个函数来添加链接，这样我的用户就可以选择文本并将链接附加到文本。（我试图模仿gmail如何让我们轻松地添加、删除或编辑电子邮件中选定文本的链接）

下面是我在Google'ng之后提出的解决方案代码

var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            var temp = range;
            var link =prompt("Please enter the link for this selection \n "+range+"","");
               range.insertNode(document.createTextNode("<a href='"+link+"' target='_blank'>"+temp+"</a>"));
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        var link =prompt("Please enter the link for this selection \n "+range.text+"","");
        range.text = "<a href='"+link+"' target='_blank' onClick='changeLink()'>"+range.text+"</a>";
    }

var选择，范围；
if（window.getSelection）{
sel=window.getSelection（）；
如果（选择范围计数）{
范围=选择范围（0）；
var-temp=范围；
var link=prompt（“请输入此选择的链接\n”+范围+”，“”）；
range.insertNode（document.createTextNode（“”）；
}
}else if（document.selection&&document.selection.createRange）{
range=document.selection.createRange（）；
var link=prompt（“请输入此选择的链接\n”+范围.text+”，“”）；
range.text=“”；
}

代码没有像我想象的那样工作，链接被添加到内容中，但它也在内容中显示

标记，而不是显示带有下划线的默认蓝色文本。如何隐藏

标记？另外，我将如何允许他们删除或编辑链接

（更新）解决方案：

function addFormat(type) {
    var savedSel = saveSelection();
    if(savedSel != '') {
        var link =prompt("Please enter the link for this selection \n "+savedSel+"","");
        restoreSelection(savedSel);
        document.execCommand("CreateLink", false, link);
        var links = getLinksInSelection();
        for (var i = 0; i < links.length; ++i) {
            links[i].setAttribute('target','_blank');
        }
    } else { alert("Please select some text to insert the link"); }
}

 function getLinksInSelection() {
        var selectedLinks = [];
        var range, containerEl, links, linkRange;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                linkRange = document.createRange();
                for (var r = 0; r < sel.rangeCount; ++r) {
                    range = sel.getRangeAt(r);
                    containerEl = range.commonAncestorContainer;
                    if (containerEl.nodeType != 1) {
                        containerEl = containerEl.parentNode;
                    }
                    if (containerEl.nodeName.toLowerCase() == "a") {
                        selectedLinks.push(containerEl);
                    } else {
                        links = containerEl.getElementsByTagName("a");
                        for (var i = 0; i < links.length; ++i) {
                            linkRange.selectNodeContents(links[i]);
                            if (linkRange.compareBoundaryPoints(range.END_TO_START, range) < 1 && linkRange.compareBoundaryPoints(range.START_TO_END, range) > -1) {
                                selectedLinks.push(links[i]);
                            }
                        }
                    }
                }
                linkRange.detach();
            }
        } else if (document.selection && document.selection.type != "Control") {
            range = document.selection.createRange();
            containerEl = range.parentElement();
            if (containerEl.nodeName.toLowerCase() == "a") {
                selectedLinks.push(containerEl);
            } else {
                links = containerEl.getElementsByTagName("a");
                linkRange = document.body.createTextRange();
                for (var i = 0; i < links.length; ++i) {
                    linkRange.moveToElementText(links[i]);
                    if (linkRange.compareEndPoints("StartToEnd", range) > -1 && linkRange.compareEndPoints("EndToStart", range) < 1) {
                        selectedLinks.push(links[i]);
                    } 
                }
            }
        }
        return selectedLinks;
    }

function saveSelection() {
    if (window.getSelection) {
        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;
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

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

函数addFormat（类型）{
var savedSel=saveSelection（）；
如果（savedSel！=''）{
var link=prompt（“请为此选择输入链接”\n“+savedSel+”，”）；
恢复选择（savedSel）；
document.execCommand（“CreateLink”，false，link）；
var links=getLinksInSelection（）；
对于（变量i=0；i-1）{
selectedLinks.push（links[i]）；
}
}
}
}
linkRange.detach（）；
}
}else if（document.selection&&document.selection.type！=“控制”）{
range=document.selection.createRange（）；
containerell=range.parentElement（）；
if（containerell.nodeName.toLowerCase（）=“a”）{
选择链接。推送（ContaineReel）；
}否则{
links=containerEl.getElementsByTagName（“a”）；
linkRange=document.body.createTextRange（）；
对于（变量i=0；i-1和&linkRange.compareEndPoints（“结束到开始，范围）<1）{
selectedLinks.push（links[i]）；
} 
}
}
}
返回所选链接；
}
函数saveSelection（）{
if（window.getSelection）{
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
var范围=[]；
对于（变量i=0，len=sel.rangeCount；i

---

谢谢。

你知道现在已经有开源编辑器了吗？是的，但我想做自己的。我在这里找到了一个解决方案，但现在我正在挠头为链接添加一个属性，我想在一个新的选项卡或窗口中打开链接我找到了答案，多亏了Tim