Jquery события выделения

@Николай16 · Регистрация: 13.12.2015

Author24 — интернет-сервис помощи студентам

У меня есть тег textarea в которому я пишу текст. Как сделать чтобы когда я выделял слово, а потом кликал на кнопку, именно это слово становилось жирным.
Любая помощь мне очень поможет
Сейчас у меня можно делать только содержимое тега (все текста) жирным. А мне надо отловить события и кинуть его в переменную и при клике делать его жирным

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
</head>
<body>
    <header class="header">
        <h4>Когда-то мы не можут установить MS Office, потому-что у нас эго нету...</h4><br>
        <p class="p_2">Конечно мы можем попросить друга, но он нам откажет. Все мы столкаемся с такой проблемой</p><br><br>
        <p>Только наш веб-сервис поможет Вам создать полноценный веб документ</p>
 
 
    </header>
    
 
    <main><button class="bold_text">Bold</button><br><br>
        <textarea rows="10" cols="45" name="text" class="pole_text"></textarea>
        <p class="out"></p>
    </main>
    
 
    
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js.js"></script>
 
</html>

Javascript

$(document).ready(function() {
    $('.bold_text').click(function() {
        var $pole=$('.pole_text').css('fontWeight','bold').val();
        var $out=$('.out');
    });
});

CSS

body {
    background: url(img/crossword.png), center, no-repeat;
    margin: 20px 40px;
    font-size: 22px;
}
 
* {
    // font-family: 'PT Sans', sans-serif;
    margin: 0;
    padding: 0;
}
 
.pole_text {
    border-radius: 5px;
    border: 1px solid #7FB2F0;
    max-width: 300px;
    max-height: 100px;
}
 
.bold_text {
    font-weight: bold;
    background: #ccc;
    width: 80px;
    height: 30px;
    border-radius:3px;
    border: 1px solid #7FB2F0;
    background: #ADD5F7;
}
.header {
    margin: 20px 5px;
    // font-size: 18px;
 
}
.p_2 {
    margin-left: 20px;
    font-size: 16px;
}

	14.10.2017, 12:47