I'm looking for a way to apply a CSS class to an arbitrary text range in an HTML document. I'm using MooTools and the the rangy library, and something like this works if there's only a single TextNode to deal with:
createRange: function(start, end) {
var node = this.textArea.childNodes[0]; // textArea is an HTML <span> element
var range = rangy.createRange();
range.setStart(node, start);
range.setStart(node, end);
return range;
}
This gives me a range I can then apply a CSS class to; However, if I have any HTML markup inside T开发者_开发百科extArea, I now have multiple TextNodes, and I need to set a range starting in one and ending in the other. I think I can do this if I can get an ordered list of all TextNodes inside textArea, but I'm not sure how (or if) I can get that list.
why not just style the ::select pseudo?
textarea::selection {
background: #abc;
color: #abc;
}
textarea::-moz-selection {
background: #abc;
color: #abc;
}
textarea::-webkit-selection {
background: #abc;
color: #abc;
}
Rangy has a CSS class applier module that I think will do what you want.
精彩评论