Insert link in contenteditable element

Question

I'm working on a simple blog system and I'm using contenteditable so that users can format the text.

Up to now everything works like a charm.

Next thing i want is that users can add a hyperlink in the text.

The user have to select (part of) the text and click on the link button. After that a popup opens where users should enter the link address.

When the user clicks on the accept button I want to add the link to the text they selected in the contenteditable.

How can I implement this functionality, since I have no clue how to do this?

My site: http://82.170.147.49/blog/3/alpha-release

jsFiddle of my site: http://jsfiddle.net/qhN9j/

Tim Down · Accepted Answer · 2011-04-14T13:50:51.543

document.execCommand() does this for you in all major browsers:

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

To preserve the selection while your link dialog is displayed, you can use the following functions:

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 example: http://jsfiddle.net/JRKwH/1/

UPDATE

To get hold of the link(s) created (if any were created at all) is tricky. You could use my own Rangy library:

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

... or something like the following:

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/

Mr. Down. You're my all time hero! Finally I can get rid of that ugly javascript prompt window ;) Although I think clmarquart has a valid point. The next thing I want to do is create a link with a target (_blank) and I think I am going to need insertHTML (or something other) for this. Is it possible to make your code work with adding a target to the `a` tag? If you can you're not only my hero but I'll upgrade your status to God! :) — PeeHaa, Apr 12 '11 at 19:23
@PeeHaa: Good question. It's going to be tricky because the command handles multiple cases. Sometimes no link will be created at all (if the selected content is already inside a link with the same URL) or only content not already inside another link will be linked. I will add a bit to my answer. — Tim Down, Apr 14 '11 at 12:02
@TimDown Would it be possible to modify saveSelection so if the user hasn't clicked in the editable area yet the carret just goes at the end ? — Ced, Feb 26 '16 at 12:15
@SerhiiKalaida still working great in 2018 for me. i thikn document.selection was supported in old browsers. — lmiller1990, Mar 02 '18 at 12:44
@SerhiiKalaida `document.selection` is the old selection API in Internet Explorer (from version 4 or 5 to 10, I think). IE 9 and later have the standards-based `window.getSelection()`. — Tim Down, Mar 05 '18 at 09:54

Ali · Answer 2 · 2016-02-08T22:10:20.197

Better looking answer:

function link() {
  if (window.getSelection().toString()) {
    var a = document.createElement('a');
    a.href = 'http://www.google.com';
    a.title = 'GOOGLE';
    window.getSelection().getRangeAt(0).surroundContents(a);
  }
}

select some of text then click link button!
<button onclick='link()'>link text to google</button>

This method can be applied anywhere and does not require the element to be contenteidtable.

you can add any event or attributes to the new A element like other elements.

The window.getSelection().toString() checks if some text is actually selected. It works well in chrome, I don't have IE to test, anyway there are other methods to check it. But surroundContents() which is the key part is available in IE9 as suggested by MDN.

Finally I suggest to use an iFrame instead of contenteditable div so there will be no worry about preserving the selection.

This is simple and elegant. It should be the accept answer. Where can find a comprehensive list of all the `.execCommand()` interactions. They seem pretty awesome but I am hesitant to move from jQuery. — Alexander Dixon, Sep 27 '16 at 15:10
It is a good example but there will be problems when you need to remove the link from that selection. :D — Bogdan, May 17 '20 at 19:06

score 9 · Answer 3 · answered Apr 09 '11 at 15:13

9

As alfred said there are already well-developed editors, especially for the basic features. You can restrict it to use as few, or as many features, as you would like.

The difficult part in developing it from scratch, is that all browsers act slightly differently. The following should get you moving in the right direction in most browsers, other than IE:

var selected = document.getSelection();
document.execCommand("insertHTML",false,"<a href='"+href+"'>"+selected+"</a>");

answered Apr 09 '11 at 15:13

clmarquart

4,721
1
27
23

Thanks clmarquart. Works for most browsers. I didn't really expect it would work under IE by default. What else is new :) – PeeHaa Apr 09 '11 at 15:42
The only thing that happens now is that when I try to enter an URL the selection isn't set anymore on my text. So I cannot add the hyperlink. Is there a way to preserve / reset the selection before the execCommand? – PeeHaa Apr 09 '11 at 15:55
1

Since you are using a `
` for your contentEditable area, you are using the same document element, so what happens is when you click anywhere you will lose the previous selection. Try using the `Enter` key as the way to submit, rather than clicking the check icon. Otherwise, you can get more in-depth by preserving the range, reference the [Mozilla Docs](https://developer.mozilla.org/en/DOM/Selection) – clmarquart Apr 09 '11 at 16:52
1

@PeeHaa, @clmarquart: Using the "CreateLink" command of `document.execCommand()` does exactly what is required in all browsers. See my answer. – Tim Down Apr 11 '11 at 23:37
1

@Tim, you're correct. Although, I've preferred to use `insertHTML`, even if it requires a little extra work for IE. This way you can directly control the HTML that is inserted, like adding a `title` or `class` attribute. – clmarquart Apr 11 '11 at 23:52
@clmarquart sorry I need to make Tim's answer THE answer. Although you have made a good point I think with the extra attributes! +1 for that. – PeeHaa Apr 12 '11 at 19:25
The problem with using inserthtml with a full tag's markup is that it may break up an existing tag that you're inserting into. I am battling with content of e.g. "``Content goes here``".. selecting 'goes' and using insertHTML of an anchor causes Chrome to break the tag up, so I get "``Content goes here``". This means the content is styled differently. This seems quite a serious problem, is there a way around this while still using inserthtml? – Neek Mar 15 '13 at 09:50

score 2 · Answer 4 · edited Jun 20 '20 at 09:12

EDIT It is not possible in IE in Execcommand, because we cannot insert quotes in 'href', we must do it in pure javascript with range :

// IN DIV IN ONE 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 WITHOUT FRAMES

// 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);

score 0 · Answer 5 · answered Feb 08 '16 at 11:36

I would do it this way:

Create a link with a (possibly unique) initial bogus href attribute to identify it by.
Fetch that element using document.querySelector('a[href=<unique-href>]').
You now have a reference to the created element and can do with it as you please.

The benefit of this is that you don't have to work with Selection at all.

Insert link in contenteditable element

5 Answers5

Linked