我知道如何在<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。
答案 0 :(得分:2)
我看到你正在使用Rangy,但我根本不知道如何使用它。在我意识到Rangy是什么之前,我查看了如何获得当前的选择。我找到了一个获取它的函数,并用传入的值替换它。我最终修改了它,但它在这里:
$(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()
函数:
代码:
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进行修改。