如何在contentEditable div中创建可单击的锚?

I have following code:

我有如下代码:

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

Fiddle

小提琴

Is there a way to make this a clickable, not editable, without moving anchor outside that div?

有没有一种方法可以让它成为可点击的，不可编辑的，不需要在div之外移动锚?

4 个解决方案

#1

Just wrap the link in another div, like so:

只需将链接放在另一个div中，如下所示:

<div contentEditable="true">

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

#2

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

让链接本身不可编辑(至少在HTML5上是这样):

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

#3

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

据我所知，没有任何方法可以不使用Javascript编程。这样做的简单方法是在按下Ctrl键时禁用和重新启用contentEditable。当按下Ctrl键时，链接就可以点击了，否则不会。这意味着您仍然可以编辑链接的内容。这个功能类似于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

更新的小提琴

#4

You can make a div contentEditable when it is clicked, and then set contentEditable to false on mouseout. This will make the links clickable whenever you aren't editing them:

当它被单击时，您可以创建一个div contentEditable，然后将contentEditable设置为mouseout的false。这将使链接可以在你不编辑的时候点击:

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>

#1