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

<div contentEditable="true">

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

使链接本身不可编辑（至少适用于HTML5）：
<a contenteditable="false" href="http....... >

据我所知，要做到这一点，你必须自己用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

为了得到一个可点击和可编辑的链接，我在链接里放了一个onclick-command。

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

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

contenteditable元素内的链接可以更改为与mousedown事件而不是click事件一起使用，因为click事件正在等待mouseup事件触发，而到那时，字段已经具有焦点，因此链接将不会"工作"（因为字段现在处于特殊的"编辑"模式）。

内联onmousedown：

<div contentEditable>
    Blah blah <a onmousedown="window.location.href=this.href" href="http://google.com">Google</a> Blah blah
</div>

委托事件：

当然，这是一个粗糙的实现，您可以通过区分鼠标左键单击和右键单击来增强它，还可以提取并完全删除内联事件并使用委托事件：
x一个一个一个一个x一个一个二个x