Блог

Я пытаюсь использовать javascript и css для создания небольшого инструмента, который позволит пользователю выделить область текста (целое слово, часть слова, отдельный символ) с помощью мыши, а затем нажать кнопку, которая выделит выделение жирным шрифтом.

У меня работают 2 части: я могу выделить жирным шрифтом всю область, и я могу записать выделение мышью на консоль.

Но я не могу понять, как выделить жирным шрифтом только ту часть текста, которая была выделена с помощью мыши.

У меня есть jsfiddle здесь: http://jsfiddle.net/75EwZ/4 /

Вот код:

 $(".boldtrigger").click(function() {
    var selection = getSelText();
    console.log('selected value', selection);
    //only bold text that is selected
    //get contents of .text
    //replace selected section with <span class="selectedText"></span>
    //ex:  user selects the word "the" with the mouse:
    //<div class="text">Testing the waters</div> becomes:
    //<div class="text">Testing <span class="selectedText">the</span> waters</div>
    //then bold contents of .selectedText
    $(".text").toggleClass("bold");
});

function getSelText()
{
    var txt = '';
    if (window.getSelection)
      { txt = window.getSelection(); }
      else if (document.getSelection)
      { txt = document.getSelection(); }
      else if (document.selection)
     { txt = document.selection.createRange().text; }
     else return;
     return txt;
}
 

Спасибо!

Вам нужно использовать метод surroundContents для диапазона выделения. К сожалению, эта функция поддерживается не во всех браузерах, поэтому вам нужно будет позаботиться об этом.

  var range = selection.getRangeAt(0);
 if(selection.toString().length > 2){
        var newNode = document.createElement("span");
        newNode.setAttribute("class", "selectedText");
        range.surroundContents(newNode);       
 }
 

Рабочая демонстрация здесь.

Смотрите документацию здесь.

Вы должны увидеть метод document.execCommand : https://developer.mozilla.org/fr/docs/Rich-Text_Editing_in_Mozilla

Пройдите этот урок, чтобы получить выделенный текст с помощью jquery. используйте тот же код, чтобы получить выбранный раздел, затем при нажатии кнопки замените его на <b>"selected text"</b> .