tratando de crear un editor html simple
en el siguiente ejemplo, coloque el cursor dentro de la palabra lorem y haga clic en el botón
la palabra se pone en cursiva
Dos preguntas
<i></i> haciendo clic de nuevo? var ed = $('#ed'); $('.btnitalic').on('click', function(){ var sel = window.getSelection(); sel.modify('move', 'backward', 'word'); sel.modify('extend', 'right', 'word'); var str = sel.toString(); var rn = sel.getRangeAt(0); var tx = rn.extractContents(); var i = document.createElement('i'); i.appendChild(tx); rn.insertNode(i); console.clear(); console.log(ed.html()); }); .ed{display:inline-block; width:100%; min-height:99px; background:orange;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class='btnitalic'>ITALIC</button> <br><br> <div class='ed' id='ed' contenteditable> lorem ipsum dolor sit </div>