javascript - jQuery 如何将 CSS 应用于选定的文本

Question

我正在尝试将 CSS 应用于选定的文本。我尝试了以下但它不起作用。我正在使用火狐。

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

我也试过

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

我可以使用 execcommand 对 contentEditable 执行此操作，但 execcommand 应用 html 标签而不是内联样式。例如:<font/>而不是 style="font.." .我需要应用内联样式而不是弃用的 html 标签。我想使用 jQuery css()应用样式的属性。

Answer 1

我推荐 CSS class applier我的模块 Rangy为此的图书馆。它适用于所有主要浏览器和任何选择。它还将打开和关闭 CSS 类。

这是另一个问题的示例:How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?

例子:

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

更新

如果使用类不是一个选项，你仍然可以使用这个变体，尽管它有点迂回:你可以使用 Rangy 来应用一个类，然后使用 jQuery 来找到这个类的跨度并将你的 CSS 添加到每个。这是一个例子:

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/