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');
    });
});

我可以将所选文本打印出来，但无法添加该类。我已经看到其他解决方案将点击类添加到整个textarea，但我不需要。有什么帮助吗？

Answer 1

因为您直接选择文本，所以没有要添加类的元素。 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/>');

Answer 2

您可以使用下面的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/

尝试

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

2 个答案: