[ACCEPTED]-How to make clickable anchor in contentEditable div?-contenteditable

Accepted answer
Score: 27

Just wrap the link in another div, like 1 so:

<div contentEditable="true">

    <div contentEditable="false">
            Bla bla <a href="http://google.com">Google</a> Bla bla
Score: 19

Make the link itself uneditable (works at 1 least on HTML5):

<a contenteditable="false" href="http....... >

Score: 8

As far as I am aware, there is no way of 9 doing this without programming it yourself 8 using Javascript. The simple way to do this 7 is to disable and reenable contentEditable whenever the 6 Ctrl key is pressed. So when Ctrl is pressed, the 5 link is clickable, otherwise not. This means 4 you can still edit the content of the link. This 3 functionality is similar to that of Microsoft 2 Word, IIRC.

The code might look something 1 like this:

var content = document.getElementById('content');

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 17) {          // when ctrl is pressed
        content.contentEditable = false; // disable contentEditable
}, false);

document.addEventListener('keyup', function(event) {
    if (event.keyCode === 17) {          // when ctrl is released
        content.contentEditable = true;  // reenable contentEditable
}, false);

Updated fiddle

Score: 1

To get a clickable and editable link, I 4 put an onclick-command in the link. Example:

<a contenteditable="true" href="necessary?" onclick="document.location = 'www.xy.com';" ...>
    <img src="image.jpg" draggable="true" ...>

Disadvantages 3 have been: In IE the link had to be clicked 2 twice. In mobile Safari the keyboard was 1 shown (Could be hidden with Javascript).

More Related questions