JavaScript Custom Text Editor Buttons Not working

Question

I would like to add this text editor to my website but when I click on the formatting buttons it doesnt work.

I have noticed if I add a plus line to the onclick attribute: $('#editor1').focus(); then the button will work, but when it focuses in the textarea, the caret will be placed to the start of the line not to the end which is frustrating. Any idea why this bug appears?

EDIT: Somewhy the undo and redo buttons work withoud the extra $(...).focus() function

 // If you enable this, the button will work, but put the text to the start of the line which should be at the end of the line.... /* $('#setbold').click(() => { $('#editor1').focus(); document.execCommand('bold'); }); */

 .flex { display: flex; }.flex-row { flex-direction: row; }.flex-col { flex-direction: column; }.gap-2 { gap: 2rem; }.gap-1 { gap: 1rem; }.gap-05 { gap: .5rem; }.w-50 { width: 50%; } [contentEditable=true]:empty:not(:focus):before{ content:attr(data-text) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex flex-col w-50"> <div class="flex flex-col border-soft" style="border: 1px solid #E4E6EF;"> <div id="te__con" class="flex flex-row flex-align-c gap-2 padding-05" style="border-bottom: 1px solid #E4E6EF;"> <div class="flex flex-row flex-align-c gap-05"> <span class="te__ftstyle italic" onclick="document.execCommand('italic');"> <span>I</span> </span> <span class="te__ftstyle bold" id="setbold" onclick="document.execCommand('bold');" > <span>B</span> </span> <span class="te__ftstyle underline" onclick="document.execCommand('underline');"> <span>U</span> </span> <span class="te__ftstyle strikethrough" onclick="document.execCommand( 'strikethrough',false,null);" > <span>S</span> </span> </div> <div class="flex flex-row flex-align-c gap-05"> <span class="te__ftstyle redo-apply" onclick="document.execCommand( 'redo',false,null);"> <span>Redo</span> </span> <span class="te__ftstyle undo-apply" onclick="document.execCommand( 'undo',false,null);"> <span>Undo</span> </span> </div> <div class="flex flex-row flex-align-c gap-05"> <span class="te__ftstyle orderedlist" onclick="document.execCommand('insertOrderedList', false, null);"> <span>OL</span> </span> <span class="te__ftstyle unorderedlist" onclick="document.execCommand('insertUnorderedList',false, null)"> <span>UL</span> </span> </div> </div> <div id="editor1" class="small te__editor padding-1 outline-none text-secondary" style="height: 8rem; max-height: 8rem; overflow-y: scroll" contenteditable="true" data-text="Write here...."></div> </div> </div>

Answer 1

That's how i would do it if I would use the deprecated execCommand

 $('button[data-func]').click(function(){ document.execCommand( $(this).data('func'), false); });

 .editor { border: 1px solid grey; height: 8rem; max-height: 8rem; overflow-y: scroll; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" data-func="bold">B</button> <button type="button" data-func="italic">I</button> <button type="button" data-func="underline">U</button> <div class="editor" contenteditable></div>