6

次のような属性で<a />タグを設定する方法を知っています：hrefcontenteditable

execCommand("CreateLink", false, "#jumpmark");

その結果、

<a href="#jumpmark">selection</a>

nameただし、の代わりにアンカーを設定する方法がわかりませんhref。
これは私の望ましい結果です：

<a name="jumpmark">selection</a>

誰でも私を助けることができますか？

補足:私は jQuery と Rangy をライブラリとして使用していますが、execCommand と直接連携するソリューションが望ましいと考えています。

更新:ここに jsfiddle があります: http://jsfiddle.net/fjYHr/テキストを選択してボタンをクリックします。私が望むのは、ボタンをクリックすると、href の代わりに name 属性が設定されたリンクが挿入されることだけです。

4

3 に答える 3

2

次のようなものを使用できます。これは、 this answer of minepasteHtmlAtCaret()の関数から適応されています。

デモ: http://jsfiddle.net/F8Zny/

コード：

function surroundSelectedText(element) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            element.appendChild( document.createTextNode(range.toString()) );
            range.deleteContents();
            range.insertNode(element);

            // Preserve the selection
            range = range.cloneRange();
            range.setStartAfter(element);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        var selRange = document.selection.createRange();
        element.appendChild( document.createTextNode(selRange.text) );
        selRange.pasteHTML(element.outerHTML);
    }
}

使用する必要がある場合は、 IE 以外のブラウザーでコマンドをdocument.execCommand()使用できます。InsertHTMLただし、IE はサポートしていません。

document.execCommand("InsertHTML", false, '<a name="jumpmark">selection</a>');
于 2012-12-19T12:29:38.067 に答える
2

Rangy を使っているようですが、使い方がまったくわかりません。Rangy が何であるかを理解する前に、現在の選択を取得する方法を調べました。それを取得して、渡された値に置き換える関数を見つけました。私はそれを修正しましたが、ここにあります：

http://jsfiddle.net/fjYHr/1/

$(document).ready(function () {
    $("#setlink").click(function () {
        replaceSelectedText("jumplink");
    });
});

function replaceSelectedText(nameValue) {
    var sel, sel2, range;
    if (window.getSelection) {
        sel = window.getSelection();
        sel2 = ""+sel;  // Copy selection value
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var newA = document.createElement("a");
            newA.name = nameValue;
            newA.innerHTML = sel2;
            range.insertNode(newA);
        }
    } else if (document.selection && document.selection.createRange) {
        // Not sure what to do here
        range = document.selection.createRange();
        var newA = "<a name='" + nameValue.replace(/'/g, "") + "'>" + range.text + "</a>";
        range.text = newA;
    }
}

元の現在の選択を保存する方法に注意してください。次に、渡された値でセットを<a>取得する要素に置き換えます。name

このdocument.selection部分 (IE < 9 で使用されているようです) については、私が提供したコードが機能するかどうかは 100% 確信が持てません (実際には、選択で HTML を許可し、エスケープしません)。しかし、それは私の試みです:)

于 2012-12-19T09:42:58.053 に答える
1

ご覧のとおり、設定できる属性はかなり制限されているため、それを使用して属性をexecCommand設定することはできません.namehref

タグとしてjQuery設定したので、代わりにそれを使用できます。

var $a = $('<a></a>').attr('name', 'jumpmark').appendTo('body');

アップデート

現在の選択に取り組む必要があります。具体的には、追加できる jQuery オブジェクトがありません。つまり、作業できる DOM ノードがありません。

この場合、Rangyなどのプラグインを使用して選択を取得し、必要に応じて jQuery で修正できます。

于 2012-12-19T09:10:32.803 に答える