How to make clickable anchor in contentEditable div?

Question

I have the following code:

<div contentEditable="true"> Blah blah <a href="http://google.com">Google</a> Blah blah </div> 

Fiddle

Is there any way to make this a accessible, not editable, without moving the anchor outside this div?

Answer 1

Just wrap the link in another div, for example:

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

Answer 2

Make the link most invalid (works at least on HTML5):

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

Answer 3

As far as I know, there is no way to do this without programming it yourself using Javascript. An easy way to do this is to disable and re-enable contentEditable whenever the Ctrl key is pressed . Therefore, when the Ctrl button is pressed , the link can be pressed, otherwise not. This means that you can still edit the contents of the link. This functionality is similar to Microsoft Word, IIRC.

The code might look something 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

Answer 4

You can make the div contentEditable when it is clicked, and then set contentEditable to false on mouseout. This will make the links clickable when you do not edit them:

http://jsfiddle.net/GeVpe/22/

  <div id="content" contentEditable="true" onclick = "this.contentEditable = true;" onmouseout = "this.contentEditable = false;"> <a href="http://google.com" target = "blank">Try clicking this link.</a> It works now! </div>