JavaScript Custom Text Editor Buttons Not working-CodePudding

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 >
   <div  style="border: 1px solid #E4E6EF;">
    <div id="te__con"  style="border-bottom: 1px solid #E4E6EF;">
        <div >
            <span  onclick="document.execCommand('italic');">
                <span>I</span>
            </span>
            <span  id="setbold" onclick="document.execCommand('bold');" >
                <span>B</span>
            </span>
            <span  onclick="document.execCommand('underline');">
                <span>U</span>
            </span>
            <span  onclick="document.execCommand( 'strikethrough',false,null);" >
                <span>S</span>
            </span>
        </div>
        <div >
            <span  onclick="document.execCommand( 'redo',false,null);">
               <span>Redo</span>
            </span>
            <span  onclick="document.execCommand( 'undo',false,null);">
                <span>Undo</span>
            </span>
        </div>
        <div >
            <span  onclick="document.execCommand('insertOrderedList', false, null);">
                <span>OL</span>
            </span>
            <span  onclick="document.execCommand('insertUnorderedList',false, null)">
                <span>UL</span>
            </span>
        </div>
    </div>
    <div id="editor1"  style="height: 8rem; max-height: 8rem; overflow-y: scroll" contenteditable="true" data-text="Write here...."></div>
</div> 
        </div>

CodePudding user response：

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  contenteditable></div>