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

Question

我想对选定的文本应用CSS样式。我尝试了以下方法，但它无效。我正在使用Firefox浏览器。

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

我也尝试过。

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

我可以使用contentEditable和execcommand实现这个功能，但execcommand应用html标签而不是内联样式。例如：<font/>而不是style="font.."。我需要应用内联样式而不是已弃用的html标记。我想使用jQuery的css()属性来应用样式。

- Pinkie

---

.css('color', 'red'); 应该能够正常工作。有没有更好的方法来获取所选文本？另外，您确定 savedRange 的格式正确吗？例如，它是否获取了 font 或 #font 等等。这可能会导致问题。 - Soatl

Answer 1

我建议使用我Rangy库中的CSS类应用器模块来完成此操作。它适用于所有主流浏览器和任何选择，并且可以切换CSS类的开关。

这里是另一个问题的示例：如何使用window.getSelection().getRangeAt(0)包装文本选择与html标记？ 示例：

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

jsFiddle是一个在线代码编辑器，可以用来分享、演示和测试HTML、CSS和JavaScript代码。上面的链接指向一个名为"z2mdw"的代码片段，其中包含HTML、CSS和JavaScript代码。

- Tim Down

---

@tim，我希望以内联样式的形式应用CSS属性，而不是CSS类。 - Pinkie

聪明的解决方案。真的很喜欢它。我们如何像您在rangy示例中所做的那样切换应用的CSS？ - Pinkie

我注意到，尽管您正在删除类，但我们仍然在span标签中看到空的class属性<span class="" style="color: red; ">Some </span>。在删除类之后，我们如何检测类是否为空并将其删除。否则，如果不进行清理，这可能会创建一堆空类的混乱。 - Pinkie

不错的库，运行良好。.toggleSelection()函数非常有用。记录一下，.css({"color", "red"})应该是.css({"color": "red"})。 - Andrew

@Andrew：谢谢，我已经在答案中修复了代码。 - Tim Down

Answer 2

这个关于处理保存的范围的问题线程可能会有所帮助。它没有具体告诉你如何添加CSS，但它将帮助您包装您的范围，然后您可能可以在其上链接一个.css()函数。

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

那么你应该可以对那个span应用CSS样式。

编辑:

要对选中范围应用CSS，可以进行以下操作。请参见在jsfiddle上的我的工作示例。

您可以直接使用JavaScript在span节点上设置CSS样式：

// 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); 

或者只需用 span 标签包围范围，然后使用 jQuery 选择该 span 标签以使用更好的 .css() 语法。

// 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"); 

显然，这个 JavaScript 并不适合重复使用，因为我在第二个示例中硬编码了一个 ID，但希望您能理解并根据自己的需求进行使用。

- Dan Sorensen

---

我接近了您提供的解决方案，但我需要能够应用CSS。 - Pinkie

好的，我会调整上面的代码，展示如何将CSS应用于选择内容。 - Dan Sorensen

surroundContents()在一般情况下无法正常工作。例如，如果所选范围的起始和结束位置位于不同的元素内，surroundContents()将会抛出错误。 - Tim Down

@Tim - 我同意，像你的 Rangy 这样的库会更加稳健。但是我认为这对于演示答案已经足够了。;-) - Dan Sorensen

@丹：哦，是的，我们前几天做过这个，对不起。 - Tim Down

Answer 3

你不能仅使用CSS来完成吗？

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

- janhartmann

---

这使用了 CSS3，没有直接回答问题。而且不跨浏览器兼容。 - Pinkie