Link einfügen in contenteditable-element

document.execCommand() macht dies für Sie in allen gängigen Browsern:

document.execCommand("CreateLink", false, "http://stackoverflow.com/");

Zur Erhaltung der Auswahl, während Ihr link-Dialogfeld angezeigt wird, können Sie die folgenden Funktionen verwenden:

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

jsFiddle Beispiel: http://jsfiddle.net/JRKwH/1/

UPDATE

Auf die link(s) erstellt (wenn alle erstellt wurden), ist heikel. Sie könnte meine eigenen Feingliedrig Bibliothek:

var sel = rangy.getSelection();
if (sel.rangeCount) {
    var links = sel.getRangeAt(0).getNodes([1], function(el) {
        return el.nodeName.toLowerCase() == "a";
    });
    alert(links.length);
}

... oder so etwas wie die folgenden:

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

jsFiddle: http://jsfiddle.net/JRKwH/3/

InformationsquelleAutor der Antwort Tim Down

BEARBEITEN, Es ist nicht möglich im IE in Execcommand, weil wir uns nicht einfügen Anführungszeichen bei 'href', wir müssen es tun, in reinem javascript mit Bereich :

//IN DEN DIV IN EINEM IFRAME

//Get the frame
var iframe = document.getElementById('myframe');

//Selection object in the frame
theSelection = iframe.contentWindow.getSelection();

//position of the selection to insert
theRange = theSelection.getRangeAt(0);

//get content inside the original selection (and delete content in)
var fragment = theRange.extractContents();

//Create a new link in frame
var newLink = iframe.contentWindow.document.createElement('a');

//Create a text element with the fragment to put in the link
var theText = document.createTextNode(fragment.textContent);

//URL 
theLink.href = '#';

//Title
theLink.title = 'title';

//Attribute 'onclick'
theLink.setAttribute('onclick', thelink);

//Target
theLink.target = '_blank';

//Add the text in the link
theLink.appendChild(theText);

//Insert the link at the range
theRange.insertNode(newLink);

//DIV-ELEMENT OHNE RAHMEN

//Selection object in the window
theSelection = window.getSelection();

//begin of the selection to insert
theRange = theSelection.getRangeAt(0);

//get content inside the original selection (and delete content in)
var fragment = theRange.extractContents();

//Create a new link in the document
var newLink = document.createElement('a');

//Create a text element with the fragment to put in the link
var theText = document.createTextNode(fragment.textContent);

//URL 
theLink.href = '#';

//Title
theLink.title = 'title';

//Attribute 'onclick'
theLink.setAttribute('onclick', thelink);

//Target
theLink.target = '_blank';

//Add the text in the link
theLink.appendChild(theText);

//Insert the link at the range
theRange.insertNode(newLink);

InformationsquelleAutor der Antwort antibug