JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btnNegritas"><b>b</b></button>
<button id="btnCursiva"><i>i</i></button>
<button id="btnSubrayado"><u>u</u></button>
<br/>
<textarea id="campo"></textarea>

CSS

textarea { width:400px; height:200px; }

JavaScript

window.onload=function(){
    var Editor={
        textarea:document.getElementById("campo"),
        negritas:document.getElementById("btnNegritas"),
        cursiva:document.getElementById("btnCursiva"),
        subrayado:document.getElementById("btnSubrayado"),
        insertar:function(bbcode){
            var texto=Editor.textarea.value,
                inicio=Editor.textarea.selectionStart,
                fin=Editor.textarea.selectionEnd;
            
            texto=texto.slice(0,inicio)+"["+bbcode+"]"+texto.slice(inicio,fin)+"[\\"+bbcode+"]"+texto.slice(fin);
            Editor.textarea.value=texto;
        }
    };
    Editor.negritas.onclick=function(){
        Editor.insertar("b");
    };
    Editor.cursiva.onclick=function(){
        Editor.insertar("i");
    };
    Editor.subrayado.onclick=function(){
        Editor.insertar("u");
    };
};