使用execCommand设置锚名称

时间:2012-12-19 09:02:12

标签: javascript jquery contenteditable execcommand rangy

我知道如何在<a />中使用href属性设置contenteditable标记,如下所示:

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。

3 个答案:

答案 0 :(得分: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&lt; 9似乎使用它),我不是100%确定我提供的代码是可行的(实际上在选择中允许HTML,而不是转义它)。但这是我的尝试:))

答案 1 :(得分:2)

您可以使用以下内容,该内容改编自this answer of mine中的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(),则可以在非IE浏览器中使用InsertHTML命令。但是,IE不支持它。

document.execCommand("InsertHTML", false, '<a name="jumpmark">selection</a>');

答案 2 :(得分:1)

正如您所看到的execCommand在您可以设置的属性中相当有限,因此您无法使用name设置href属性。只有jQuery

当您将var $a = $('<a></a>').attr('name', 'jumpmark').appendTo('body'); 设置为标记时,您可以将其用作替代方法:

{{1}}

<强>更新

  

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

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