Как сделать clickable anchor в contentEditable div?

У меня есть следующий код:

<div contentEditable="true">
    Blah blah <a href="#" onclick="location.href='http://google.com'; return false;">Google</a> Blah blah
</div>

Fiddle

Есть ли способ сделать этот a доступным, недоступным для редактирования, без перемещения якоря вне этого div?

Ответы

Ответ 1

Просто оберните ссылку в другом div, например:

<div contentEditable="true">

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

Ответ 2

Сделать ссылку самой недействительной (работает хотя бы на HTML5):

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

Ответ 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);

Обновлена скрипка

Ответ 4

Вы можете сделать div contentEditable, когда он щелкнут, а затем установить contentEditable в false на mouseout. Это сделает ссылки кликабельными, когда вы их не редактируете:

http://jsfiddle.net/GeVpe/22/

   <div id="content" contentEditable="true" onclick = "this.contentEditable = true;" onmouseout = "this.contentEditable = false;">
    <a href="#" onclick="location.href='http://google.com'; return false;" target = "blank">Try clicking this link.</a> It works now!
</div>