如何使CONTENTEDITABLE DIV可点击锚？如何使CONTENTEDITABLE DIV可

我有下面的代码：

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

小提琴

有没有办法让这个a点击，不可编辑，而不该专区外移动锚？

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键 ，链接点击，否则不是。 这意味着你仍然可以编辑该链接的内容。 此功能类似于微软的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);

更新小提琴

Answer 4:

为了得到一个可以点击的链接编辑，我的链接放在一个onclick命令。 例：

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

缺点一直：在IE浏览器的链接必须点击了两次。 在移动Safari中的键盘被证明（可能使用JavaScript隐藏）。

文章来源: How to make clickable anchor in contentEditable div?