[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
    </div>
</div>

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" ...>
</a>

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).

Source: stackoverflow.com

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

HTML5 contentEditable with jQuery

Is it possible to disable or control "commands" in contentEditable elements?

How to edit a link within a contentEditable div

Get caret index in contenteditable div including tags

Make a <br> instead of <div></div> by pressing Enter on a contenteditable

How to add class or id or CSS style in execCommand formatBlock 'p' tag?

How to select all text in contenteditable div?

JavaScript document.execCommand remove formatBlock formatting?

How to save and retrieve contenteditable data

contenteditable div backspace and deleting text node problems