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。

4

3 回答 3

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 回答
2

你可以使用类似下面的东西，它改编自我的这个答案pasteHtmlAtCaret()的函数：

演示：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);
    }
}

如果必须使用document.execCommand()，则可以InsertHTML在非 IE 浏览器中使用该命令。但是，IE 不支持它。

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

正如您所见execCommand，您可以设置的属性相当有限，因此您无法name使用它设置属性 - 只有href.

由于您已jQuery设置为标签，您可以使用它作为替代方案：

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

更新

我需要处理当前的选择。具体来说，我没有可以附加到的 jQuery 对象，这意味着我没有可以处理的 DOM 节点

在这种情况下，使用诸如Rangy之类的插件来获取选择，然后您可以根据需要使用 jQuery 进行修改。

于 2012-12-19T09:10:32.803 回答