javascript - 如何切换选定文本的类？

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