document.execCommand('unlink') doesn't work for anchors in Firefox

Question

I'm using document.execCommand("unlink", false, false); to remove hyperlinks and anchors in my own html editor. It works fine except in one case: it doesn't remove anchors in Firefox. Is this not supported in Firefox or is there another way to solve this?

Here's my example:

<div contenteditable="true">This is an <a name="anker">anchor</a>. And this is a <a href="#">normal hyperlink</a>. Please try to select them and then press the "Unlink" button.</div>

<input type="button" id="btn" value="Unlink">

$(document).ready(function() {    
    $('#btn').click(function() {
        document.execCommand("unlink", false, false);
    });
});

Check it out on Fiddle

Why do you still have the `onclick` Handler in the `` Element? Does it do something different or is it just redundant? It is not considered good style anyway, better ONLY use jQuery to bind event handlers. — grssnbchr, Dec 27 '12 at 09:47
Sorry, this was just redundant... I forgot to remove it but now it's gone. — vso, Dec 27 '12 at 09:54
@jared: This is an interesting question. [w3schools](http://www.w3schools.com/html/html_links.asp) says: "The HTML tag defines a hyperlink." This (and the fact that it does work in all other main browsers) let me assume that the execCommand method mentioned above should work in Firefox too. If not - what would be the alternative? — vso, Dec 27 '12 at 10:04
Yeah, I probably would not cite w3schools on SO. See: http://w3fools.com It appears that Firefox looks for actual *links*, whereas other browsers are less circumspect. Personally, I would agree with how Firefox does in lieu of what the W3C HTML specs specifies. There does not seem to be a whole lot of documentation on `document.execCommand('unlink')` as it stands. — Jared Farrish, Dec 27 '12 at 10:07
I also posted a possible "failsafe" workaround (?) for your edited question. — Jared Farrish, Dec 27 '12 at 10:13
Also, here is the [HTML5 specification for *hyperlinks*](http://www.w3.org/TR/html5/links.html#hyperlink). Note the green text under **4.12.2**, e.g., *The `href` attribute on `a` and `area` elements is not required; when those elements do not have `href` attributes they do not create hyperlinks.* I interpret that to mean Firefox, at least with HTML5, implements this correctly. — Jared Farrish, Dec 27 '12 at 13:18
@jared: Thanks once again! And sorry for my w3schools quotation... I've learned a lot in this posting. :-) — vso, Dec 27 '12 at 13:42

score 4 · Accepted Answer · edited May 23 '17 at 12:22

To answer your question about what alternatives there are, you could force the issue and set any a element's href attribute before calling unlink:

$(document).ready(function() {    
    var $editable = $('[contenteditable]');

    $('#btn').click(function() {
        $editable.find('a:not([href])').attr('href', '#');
        document.execCommand("unlink", false, false);
    });
});

http://jsfiddle.net/Bz7pR/7/

There are, of course, probably multiple ways to "solve" the problem. I figure $.unwrap() would probably work as well. I'm not that versed on document.execCommand and rich text editors, but I imagine you need to be careful, precise, and test test test.

Note, that is just a demonstration; you've really got to think about that and consider exactly how you're going to handle that problem. For instance, you could detect and only run that if Firefox is the browser, which would limit any unexpected damage or outcomes you might have.

EDIT

And here is a more complete version that only affects the selected text range:

$(document).ready(function() {    
    $('#btn').click(function unlink() {
        var holder,
            frag,
            range,
            child;

        if (window.getSelection && window.getSelection().getRangeAt) {
            holder = document.createElement('div');
            frag = document.createDocumentFragment();
            range = window.getSelection().getRangeAt(0);

            $(holder)
                .append(range.cloneContents())
                .find('a:not([href])')
                .attr('href', '#');

            while ((child = holder.firstChild)) {
                frag.appendChild(child);
            }

            range.deleteContents();
            range.insertNode(frag);
        }

        document.execCommand("unlink", false, false);
    });    
});

http://jsfiddle.net/Bz7pR/12/

I'm no genius when it comes to text ranges and selections, so I modified the code found in this answer:

https://stackoverflow.com/a/6252893/451969

To come up with what is above. If someone sees something that's either wrong or incoherent, leave me a comment below.

This is a nice idea! Now there's only one thing to think about. I'd like to remove only those anchors which are inside a user selection. Your suggested solution provides this but as a little side effect all anchors inside this div get the href attr. Would it be possible not to change the code of the unselected text? Unfortunately it's not so simple to handle the selected text (edit just the included elements) via jQuery. http://jsfiddle.net/Bz7pR/8/ — vso, Dec 27 '12 at 10:33
@vso - See my edit. Not quite sure if it will work with multiple selections. What is above does work in IE, Firefox and Chrome, but not Opera for some reason. — Jared Farrish, Dec 27 '12 at 11:59
Thank you very much! The last one works fine and is exactly what I needed - combined with a browser detection to be executed in Firefox only. — vso, Dec 27 '12 at 13:24

document.execCommand('unlink') doesn't work for anchors in Firefox

1 Answers1