如何在所选文本上切换课程？

Question

我正在尝试创建一个相当简单的文本编辑器（粗体、斜体、缩进），并且需要能够在单击时切换与按钮关联的类。我有这个代码：

var selected = function ()
{
  var text = '';
  if (window.getSelection) {
    text = window.getSelection();
  }
  return text;
}

$('textarea').select(function(eventObject)
{
  console.log(selected().toString());
  var selectedtext = selected().toString();
    $('#bold-button').click(function () { 
      $(selectedtext).addClass('bold-text');
    });
});

我可以打印选定的文本，但无法添加类。我见过其他解决方案将点击类添加到整个文本区域，但我不需要。有什么帮助吗？

Answer 1

您可以使用surroundContents()，如下所示。演示之前在这里http://jsfiddle.net/jwRG8/3/

    function surroundSelection() {
        var span = document.createElement("span");
        span.style.fontWeight = "bold";
        span.style.color = "green";

        if (window.getSelection) {
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var range = sel.getRangeAt(0).cloneRange();
                range.surroundContents(span);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    }

但不支持低于 IE9。我之前处理过文本选择，我发现它们是一致的。 Tim Down 在选择方面非常有经验，SO 中与选择相关的大部分答案都是我给他的。他编写了一个名为rangy 的插件。你可以试试https://code.google.com/p/rangy/

Answer 2

因为您是直接选择文本，所以没有添加类的元素。 textNodes 不能有类。相反，请尝试将文本包装在一个元素中：

$('textarea').select(function(eventObject) {
    console.log(selected().toString());
    var selectedtext = selected().toString();
    $(selectedtext).wrap('<span />').parent().addClass('bold-text');
})

或者您可以将其包装在 b 标记中，而不使用 class：

$(selectedtext).wrap('<b/>');