window.getSelection добавить класс к выделению с помощью jquery

Question

Я хочу выбрать изображение и добавить имя класса к выбору. используя window.getSelection.

function addClassName() {
     var sel = window.getSelection();
     //what goes here???
}


<input type='button' onclick='addClassName();' value='addClassName'/>

Answer 1

Чтобы добавить класс в выделение, вам нужно обернуть его <span>, иначе он не будет работать.Вот решение.

    function addClassToSelection(){
    var sel = window.getSelection ? window.getSelection() : document.selection.createRange(); // FF : IE
    if(sel.getRangeAt){ // thats for FF
    var range = sel.getRangeAt(0);
    var newNode = document.createElement("span");
    newNode.setAttribute('class', 'someclass');
    range.surroundContents(newNode);
    } else { //and thats for IE7
    sel.pasteHTML('<span class="someclass">'+sel.htmlText+'</span>');

    }
    }

Это должно направить вас в правильном направлении.Измените его по своему усмотрению.

Проверьте рабочий пример на http://jsfiddle.net/wP8w9/2/

Answer 2

$(sel).find('img').addClass('myClass');

Это займет выделение, превратит его в объект jQuery, найдет изображение и добавит к нему класс.

Я не проверял это.

Answer 3

var sel= window.getSelection().getRangeAt(0);

$(sel).addClass("someClass");

window.getSelection() даст вам выбор, но не текущий (или выделенный) выбор.Для этого вам нужно использовать метод getRangeAt выбора

Answer 4

если вы хотите использовать javascript, вы можете сделать:

function addClassName() {
     $('img').addClass('newClass') // adds the class 'newClass' to all image objects
}


<input type='button' onclick='addClassName();' value='addClassName'/>

вы также можете использовать любой селектор, кроме 'img' в этой функции