1

document.execCommand("unlink", false, false);自分のHTMLエディタでハイパーリンクとアンカーを削除するために使用しています。Firefoxのアンカーを削除しないという1つの場合を除いて、正常に動作します。これはFirefoxでサポートされていませんか、それともこれを解決する別の方法がありますか？

これが私の例です：

<div contenteditable="true">This is an <a name="anker">anchor</a>. And this is a <a href="#">normal hyperlink</a>. Please try to select them and then press the "Unlink" button.</div>

<input type="button" id="btn" value="Unlink">

$(document).ready(function() {    
    $('#btn').click(function() {
        document.execCommand("unlink", false, false);
    });
});

フィドルでそれをチェックしてください

4

1 に答える 1

4

代替案があるかどうかについての質問に答えるには、次を呼び出す前に、問題を強制し、a要素の属性を設定することができます。hrefunlink

$(document).ready(function() {    
    var $editable = $('[contenteditable]');

    $('#btn').click(function() {
        $editable.find('a:not([href])').attr('href', '#');
        document.execCommand("unlink", false, false);
    });
});

http://jsfiddle.net/Bz7pR/7/

もちろん、問題を「解決」する方法はおそらく複数あります。$.unwrap()おそらくうまくいくと思います。私はそれほど精通していないdocument.execCommandリッチテキストエディタですが、注意深く、正確に、テストテストテストを行う必要があると思います。

これは単なるデモンストレーションであることに注意してください。あなたは本当にそれについて考え、その問題をどのように処理するのかを正確に考えなければなりません。たとえば、Firefoxがブラウザである場合にのみそれを検出して実行できます。これにより、予期しない損傷や結果が制限されます。

編集

そして、これが選択されたテキスト範囲にのみ影響するより完全なバージョンです：

$(document).ready(function() {    
    $('#btn').click(function unlink() {
        var holder,
            frag,
            range,
            child;

        if (window.getSelection && window.getSelection().getRangeAt) {
            holder = document.createElement('div');
            frag = document.createDocumentFragment();
            range = window.getSelection().getRangeAt(0);

            $(holder)
                .append(range.cloneContents())
                .find('a:not([href])')
                .attr('href', '#');

            while ((child = holder.firstChild)) {
                frag.appendChild(child);
            }

            range.deleteContents();
            range.insertNode(frag);
        }

        document.execCommand("unlink", false, false);
    });    
});

http://jsfiddle.net/Bz7pR/12/

テキストの範囲と選択に関しては天才ではないので、この回答にあるコードを変更しました。

https://stackoverflow.com/a/6252893/451969

上記のものを思い付くために。誰かが間違っているか一貫性のないものを見た場合は、下にコメントを残してください。

于 2012-12-27T10:12:30.597 に答える