Javascript - Check highlighted text within Contenteditable has link tags

Question

Im currently building a very simple inline-editor, for content editable areas within a website. I have managed to do the basics (Bold, Italic etc) and now I have hit a pitfall.

I'm allowing the user to create links, by highlighting text and creating the link via text input. My problem is if the highlighted/selected text is already wrapped in tags I wish the text input to display the current link. Thus giving the user the ability to terminate the link or update/edit it.

My code for creating a link by highlighting selected text 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";
}

The saveSelection and restoreSelection saves the currently selected text and allows me to create the link within doneUrl() via the execCommand.

This all works fine, all i need is to be able check and get the if it is present. Any guidance would be appreciated.

Answer 1

Try : Grande.js

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

Look like this when you selected texts

Live : http://mattduvall.com/grande.js/

Answer 2

Here is a function to check if the current selection is a link.

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

Then you can run something like

var isLink = itemIsLinked();

If it is linked it will return :

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

To then get the HREF from that selection use:

isLink[1].startContainer.parentNode.href

That's worked really well for me. Good luck.