Question

I need to know if there is a “span” in my extracted content.

Simple js part, getting selection from textarea:

...
selection = this.getWin().getSelection().getRangeAt(0);
content = selection.extractContents();
alert(content)// this gets documentFragment
alert(content.firstChild)//null
fontEl = document.createElement ("span")
fontEl.appendChild(content);
alert(fontEl.outerHTML)// works ok. but now i have 2 spans if there was one before append

there is my jsfiddle. i test changing the font-size. it works, but it is spamming spans because of this problem.
http://jsfiddle.net/DCGRg/73/

Answer 1

Your code isn’t far off. Here’s an updated demo:

http://jsfiddle.net/DCGRg/73/

Here’s the relevant piece of code:

var font_size = combo.getValue();
var selection = this.getWin().getSelection();
if (selection.rangeCount > 0) {
    var range = selection.getRangeAt(0);
    var content = range.extractContents();
    var fontEl = this.getWin().document.createElement("span");
    fontEl.style.fontSize = font_size + 'px';
    fontEl.appendChild(content);
    range.insertNode(fontEl);
    selection.selectAllChildren(fontEl);
}