jQuery如何将CSS应用于所选文本

Question

我正在尝试将CS​​S应用于选定的文本。我尝试了以下操作，但不起作用。我正在使用Firefox。

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

为此，我建议使用我的Rangy库的CSS类applier模块。它适用于所有主要浏览器以及任何选择。它还将打开和关闭CSS类。

这是另一个问题的示例：[如何包装带有html标签的window.getSelection（）。getRangeAt（0）中的文本选择？

例：

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

更新

如果没有选择使用类，则仍然可以使用它的变体，尽管它有点round回绕：您可以使用Rangy应用一个类，然后使用jQuery查找此类的span并将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);
}