jQuery How do i apply CSS to selected text

Question

I'm trying to apply CSS to selected text. I tried the following and it doesn't work. I'm using Firefox.

$(document).keyup(function(){
savedRange = selection.getRangeAt(0);
$(savedRange).wrap('<span style="color:red"></span>');
});

I also tried

savedRange = selection.getRangeAt(0);
$(savedRange).css('color', 'red');

I can do this with contentEditable using execcommand, but execcommand applies html tags rather then inline styles. ex: <font/> instead of style="font..". I need to apply inline style and not deprecated html tags. I would like to use the jQuery css() property to apply styles.

Answer 1

I'd recommend the CSS class applier module of my Rangy library for this. It works in all major browsers and for any selection. It will also toggle CSS classes on and off.

Here's an example from another question: How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?

Example:

<style type="text/css">
    span.red {
        color: red;
    }
</style>
<script type="text/javascript">
    var redApplier;

    window.onload = function() {
        rangy.init();
        redApplier = rangy.createCssClassApplier("red", true);
    };

    function makeSelectionRed() {
        redApplier.applyToSelection();
    }
</script>

UPDATE

If using classes isn't an option, you could still use a variation on this, although it's slightly roundabout: you could use Rangy to apply a class, and then use jQuery to find spans with this class and add your CSS to each. Here's an example:

function makeSelectionRed() {
    var randomCssClass = "rangyTemp_" + (+new Date());
    var classApplier = rangy.createCssClassApplier(randomCssClass, true);
    classApplier.applyToSelection();

    // Now use jQuery to add the CSS colour and remove the class
    $("." + randomCssClass).css({"color": "red"}).removeClass(randomCssClass);
}

jsFiddle: http://jsfiddle.net/z2mdw/2/

Answer 2

This question thread about handling saved ranges may help. It doesn't specifically tell you how to add CSS, but it will help you wrap your range, and then you can probably chain a .css() function on top of that.

var range = window.getSelection().getRangeAt(0);
var newNode = document.createElement("span");
range.surroundContents(newNode);

Then you should be able to apply css to that span.

EDIT:

To apply CSS to the range selection, you can do the following. See my working example on jsfiddle.

You can set the CSS style on the span node directly with Javascript:

// Get the selection range
var range = window.getSelection().getRangeAt(0);

// create a new DOM node and set it's style property to red
var newNode = document.createElement('span');
newNode.style.color = "red";

// surround the selection with the new span tag
range.surroundContents(newNode); 

Or just surround the range with a span tag, and select that span tag with jQuery to use a nicer .css() syntax.

// get the selection
var range = window.getSelection().getRangeAt(0);

// create a new span node and give it an id 'testing'.
var newNode = document.createElement('span');
newNode.id = "testing";

// wrap the selection range with the <span id="testing"></span> node.
range.surroundContents(newNode);

// select that new node with jquery and use the jQuery .css() method to apply styles.
$("#testing").css("color", "green"); 

Obviously this javascript is not ideal for reuse as I hard coded an ID into the 2nd example, but hopefully you get the idea for use for your own needs.