如何在contentEditable div中制作可点击锚点？

Question

我有以下代码:

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

小提琴

有没有办法使这个a可点击,不可编辑,而不移动该div之外的锚？

Answer 1

只需将链接包装在另一个div中,如下所示:

<div contentEditable="true">

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

Answer 2

使链接本身不可编辑(至少在HTML5上有效):

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

Answer 3

据我所知,如果不使用Javascript自己编程,就无法做到这一点.执行此操作的简单方法是在按下键contentEditable时禁用并重新启用Ctrl.因此,Ctrl按下时,链接是可点击的,否则不是.这意味着您仍然可以编辑链接的内容.此功能类似于Microsoft Word,IIRC.

代码可能如下所示:

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

更新了小提琴