Editando texto seleccionado

Edita el texto que has seleccionado

HTML

<div id="editor" cols="30" rows="10" contenteditable="true">
Esto es un texto de ejemplo que puedo ir seleccionando para despues modificarlo esto es solo el inicio...
</div>

<br>
<button id="bold">B</button >

<br>
Texto seleccionado:
<br>
<textarea id="seleccionado"></textarea>

CSS

#bold{
    font-weight: bold;
    cursor:pointer;
}

JavaScript

var sel = ""; //inicializo la variable de seleccion global
$(document).on("mouseup","#editor",function(e){
    sel = document.getSelection();
    //esto es solo para que veas el texto..
    $("#seleccionado").val(sel);
    
});

//una vez me he guardado el texto seleccionado lo puedo modificar a mi gusto
$(document).on("click","#bold",function(){
    //compruebo si ya es bold
    $("#editor").find("b").each(function(){
        if($(this).html().search(sel) > -1){
            alert("1");
        }
    });
    var donde = $("#editor").html();
    $("#editor").html(donde.replace(sel,"<b>"+sel+"</b>"));
});