如何在所選文字上切換課程？

我想創建一個相當簡單的文本編輯器（粗體，斜體，縮進），並且需要能夠在點擊時切換與按鈕相關的類。我有這樣的代碼：如何在所選文字上切換課程？

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的類，但我不需要。任何幫助？

來源

2013-10-16 Nubby

您必須將類添加到不是'var'的對象 –

所選文本是來自節點類型的值。您必須首先將所選文本更改爲DOM節點，然後才能對其進行格式化。 – reporter

由於您直接選擇文本，因此沒有要添加該類的元素。 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-16 11:16:16

我無法得到任何解決方案爲我工作。我不知道它是我還是代碼。 – Nubby

@Nubby查看我在答案中提供的演示。 – Exception

你可以使用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-16 11:21:46 Exception

這在textarea中似乎不起作用。我想我必須使用標籤環繞而不是實際更改文本 – Nubby

HTMl如何在textarea內工作而無需輔助DIV？ – Exception

如何在所選文字上切換課程？

回答

相關問題