trying to create a simple html editor
in the example below pls place cursor inside the word lorem and click button
the word becomes italic
two questions
<i></i> by clicking again ?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>