Set binding name using execCommand

Question

I know how to set the <a /> tag with the href attribute to contenteditable as follows:

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

leading to

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

However, I cannot figure out how to set the name binding instead of href .
This is my desired result:

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

Can anybody help me?

Side notes: I use jQuery and Rangy as libraries, however I would prefer a solution that works directly with execCommand.

Update: Here's jsfiddle: http://jsfiddle.net/fjYHr/ Select the text and click the button. All I want is that when a button is clicked, the link is inserted with the attribute attribute name instead of href.

Answer 1

You can use something like the following, which is adapted from the pasteHtmlAtCaret() function from this my answer :

Demo: http://jsfiddle.net/F8Zny/

code:

 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); } } 

If you must use document.execCommand() , then you can use the InsertHTML command in browsers other than IE. However, IE does not support it.

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

Answer 2

I see that you are using Rangy, but I am not using it at all. Before I realized what Ranks were, I looked at how to get the current selection. I found a function that receives it and replaces it with the passed value. I finished modifying it, but here it is:

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; } } 

Notice how I save the original current selection and then replace it with the <a> element, which gets its name with the passed value.

As for the document.selection part (which is apparently used by IE and 9), I am not 100% sure that the code I provided will work (actually allow the HTML in the selection and not escape from it), But this my attempt :)

Answer 3

As you saw, execCommand pretty limited in the attributes you can set, so you cannot set the name attribute using it - only href .

Since you have jQuery installed as a tag, you can use this as an alternative:

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

Update

I need to work with the current selection. In particular, I do not have a jQuery object to which I can add, which means that I do not have a DOM node that I can work on

In this case, use a plugin like Rangy to get a selection, which you can then modify with jQuery if necessary.