<input id="strk" type="button" onclick="document.getElementById('pbody').value+='[S][/S]'; return false;" value = " S " />

,,,

I understand that +

 .value+='[S][/S]'

inserts text (BB code) at the end of the text. And how to make the insertion take place at the current cursor position?

How to make the insert "framed" the selected text in the form?

More: When writing text in the form, the user clicks on the button and need:

  1. insert the BB code into the cursor position
  2. If the user selected the text to enter it into the BB code, you need to insert the beginning of the code - before the selected text, the end of the code - at the end of the selected text. That is, insert the selected text in the BB code.

1 and 2 do not need to be made in one decision (it is easier for me to understand).

    1 answer 1

    Here is a simple script. I wrote all the comments for you inside.

     function ShowSelection(bb) { var textComponent = document.getElementById('text'); var selectedText; if(textComponent.selectionStart != undefined) { var startPos = textComponent.selectionStart; // Положение начала выделения var endPos = textComponent.selectionEnd; // Положение конца выделения }; if(startPos == endPos){ // Если текст не выделен (т.е. начальное и конечное положение равны) /* Берём текст от начала до начала положения курсора, добавляем BB тег, добавляем текст от конца положения курсора до конца строки */ var val = textComponent.value.substring(0, startPos) + '['+bb+'][/'+bb+']' + textComponent.value.substring(endPos, textComponent.value.length); textComponent.value = val; // Устанавливаем выделение textComponent.focus(); textComponent.setSelectionRange(startPos, endPos + (bb.length * 2) + 5); // В конце учитываем два содержимого BB и дополнительные символы [] и [/] }else{ /* Берём текст от начала до начала веделния, добавляем BB тег, вставляем выделенный текст, добавляем закрытие BB, добавляем текст от конца выделения до конца строки */ var val = textComponent.value.substring(0, startPos) + '['+bb+']'+textComponent.value.substring(startPos, endPos)+'[/'+bb+']' + textComponent.value.substring(endPos, textComponent.value.length); textComponent.value = val; // Устанавливаем выделение textComponent.focus(); textComponent.setSelectionRange(startPos, endPos + (bb.length * 2) + 5); // В конце учитываем два содержимого BB и дополнительные символы [] и [/] }; } $(function() { $('button').click(function() { ShowSelection($(this).attr('data-bb')); }); }); 
     textarea {width: 300px;height: 140px;} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <button data-bb="b">Жирный</button> <button data-bb="i">Курсивый</button> </p> <textarea id="text">Не отведать ли вам чаю?</textarea>

    • "I assumed something like that, but did not think it would be so terrible" (H j Simpson + my editorial board). Just copy-paste and substitute my names, I will not. @Yuri, recommend a good paper book on js. - root_x Povierennyy
    • @root_xPovierennyy, unfortunately, the books are not for me) But the answer is not terrible, everything looks pretty simple if you look at it - Yuri