5

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

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

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

4

2 回答 2

4

你可以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/尝试一下

于 2013-10-16T11:21:46.160 回答
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/>');
于 2013-10-16T11:16:16.510 回答