html - 如何在 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);

更新的小提琴

Answer 4

为了获得可点击和可编辑的链接，我在链接中放置了一个 onclick-command。例子：

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

缺点是：在 IE 中，链接必须点击两次。在移动 Safari 中显示了键盘（可以用 Javascript 隐藏）。