Javascript - 检查Contenteditable中的突出显示文本是否有链接标记

Question

我目前正在为网站中的内容可编辑区域构建一个非常简单的内联编辑器。我已经设法做了基础知识（粗体，斜体等），现在我遇到了陷阱。

我允许用户通过突出显示文本并通过文本输入创建链接来创建链接。我的问题是如果突出显示/选定的文本已经包装在标签中我希望文本输入显示当前链接。从而使用户能够终止链接或更新/编辑链接。

我通过突出显示所选文本HTML来创建链接的代码：

<div contenteditable='TRUE' class="editable">This Contenteditable text</div>
<!-- Add Url to Highlighted Text -->
<div class="text-button" unselectable="on" onmousedown="event.preventDefault();" onclick="displayUrlInserter();">Add Url</div>
<!-- Show URL Input and Submit -->
<div class="text-button-panel" id="text-button-panel">
    <input type="text" id="url" placeholder="Paste or Type your link">
    <div class="text-panel-done" onmousedown="event.preventDefault();" onclick="doneUrl()">Done</div>
    <div class="text-panel-cancel" onmousedown="event.preventDefault();" onclick="cancelUrl()">Cancel</div>
</div>

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 selRange;

function displayUrlInserter() {
    selRange = saveSelection();
    // Display
    document.getElementById("text-button-panel").style.display = "block";
    // Focus
    document.getElementById("url").focus();

}   



function doneUrl() {

    var url = document.getElementById("url").value;

    // No Url
    if (url === "") {
        return false;
    }

    // Check for HTTP
    if (!url.match("^(http|https)://")) {
        url = "http://" + url;
    }

    restoreSelection(selRange);

    **// THIS IS WHERE I NEED TO CHECK FOR EXISTING A TAGS**

    document.execCommand("CreateLink", false, url);
    // Hide Panel
    document.getElementById("text-button-panel").style.display = "none";
    // Reset Input
    document.getElementById("url").value = "";    
}

function cancelUrl() {
    document.getElementById("text-button-panel").style.display = "none";
}

saveSelection和restoreSelection保存当前选定的文本，并允许我通过execCommand在doneUrl（）中创建链接。

这一切都很好，我需要的是能够检查并获得它是否存在。任何指导将不胜感激。

Answer 1

尝试：Grande.js

https://github.com/mduvall/grande.js

选择文本时看起来像这样

直播： http://mattduvall.com/grande.js/

Answer 2

这是一个检查当前选择是否为链接的函数。

function itemIsLinked(){
    if(window.getSelection().toString() != ""){
        var selection = window.getSelection().getRangeAt(0);
        if(selection){
            if (selection.startContainer.parentNode.tagName === 'A' || selection.endContainer.parentNode.tagName === 'A') {
                return [true, selection];
            } else { return false; }
        } else { return false; }
    }
}

然后你可以运行像

这样的东西

var isLink = itemIsLinked();

如果已关联，则会返回：

isLink[0] -> true
isLink[1] -> the link object.

然后从该选择中获取HREF：

isLink[1].startContainer.parentNode.href

这对我来说非常有用。祝你好运。