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

【问题标题】：How to make clickable anchor in contentEditable div?如何在 contentEditable div 中制作可点击的锚点？
【发布时间】：2012-08-17 01:19:44
【问题描述】：

我有以下代码：

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

Fiddle

有没有办法让这个a 可点击，不可编辑，无需将锚点移到该 div 之外？

【问题讨论】：

标签： html contenteditable

【解决方案1】：

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

<div contentEditable="true">

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

【讨论】：

我希望当我在锚点外部和 div 内部单击时锚点是可编辑的，但这种方式就足够了。谢谢
锚文本在此处不可编辑。是否可以在允许编辑锚文本的同时使链接可点击？
将 contentEditable="false" 添加到更好。 <a href="http://google.com" contentEditable="false">Google</a>

【解决方案2】：

使链接本身不可编辑（至少在 HTML5 上有效）：

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

【讨论】：

【解决方案3】：

据我所知，如果不使用 Javascript 自己编程，就无法做到这一点。执行此操作的简单方法是在按下 Ctrl 键时禁用和重新启用contentEditable。所以当 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);

Updated fiddle

【讨论】：

在您的示例中， contentEditable div 内的链接不可点击。我希望有可能解决这个问题。
这个例子对我来说效果很好，虽然我使用的是 SeaMonkey 并且 IE 可能无法正确处理这些事件......
对我也有用（维瓦尔第）。
这会破坏 Ctrl+C、Ctrl+V

【解决方案4】：

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

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

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

【讨论】：