I am trying to add a span tag dynamically with some styling using editor.insertContent method

editor.insertContent('<span style="color: red;">hello</span> ');

I am adding   in the end because if I don’t add it and if I type new text after that it is going inside that span and getting styled as per that.

But if I want to add a comma or fullstop just after “hello” without space I am not able to do it since as soon as I delete space after hello it gets styled red.

Example link – https://fiddle.tiny.cloud/fPbaab/0

Please replace the code with below code

<script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        
});
$(function(){
$('.insertcontent').click(function(){
tinyMCE.execCommand('mceInsertContent',false,'<span style="color:red;">hello</span> ');
});
});
</script>
<div class='insertcontent'>Click this to insert content</div>

<form method="post" action="dump.php">
        <textarea name="content">
        </textarea>
</form>
<style>
.insertcontent{
    padding:10px;
    background:grey;
    color:white;
    width:200px;
}

Solutions Tried –

• tried adding  
• tried adding new span tag after that

Expected Outcome – after inserting content dynamically new text should go outside the block which was inserted and editor styling should be resetted back to default.

TinyMCE version – v7.3.0