web-dev-qa-db-ja.com

contentEditable divでクリック可能なアンカーを作成するにはどうすればよいですか？

私は次のコードを持っています：

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

フィドル

アンカーをそのdivの外に移動せずに、このaをクリック可能にし、編集できないようにする方法はありますか？

htmlcontenteditable
23
Infinity

次のように、リンクを別のdivでラップするだけです。

<div contentEditable="true">

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

リンク自体を編集不可にします（少なくともHTML5で機能します）。

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

14
Shmulika

私の知る限り、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);

更新されたフィドル

6
lonesomeday

クリック可能で編集可能なリンクを取得するために、リンクにonclick-commandを配置します。例：

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

短所は次のとおりです。IEリンクを2回クリックする必要がありました。モバイルSafariでは、キーボードが表示されていました（Javascriptで非表示にできます）。

0
C. Ecker