JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="contAiner">
<input class="buttOn" type="button" value="B">
<div class="contEd" contenteditable="true" spellcheck="false" autocomplete="off"></div>
</div>
CSS
[contenteditable="true"]
{
display:inline;
white-space: nowrap;
overflow:hidden !important;
text-overflow: inherit;
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
[contenteditable="true"] br{
display:none;
}
.contAiner{
display:flex;
}
.buttOn{
width:24px;
height:24px;
border:none;
background: #666;
color:white;
}
.contEd{
height:22px;
text-align:center;
width:100px;
line-height:23px;
color:black;
font-size:10.5px;
font-family:arial;
border:1px solid black;
}
.icOn{
width:9px;
height:13px;
top:1px;
position:relative;
}
JavaScript
function pasteIcon(html){
var sel, range;
if (window.getSelection){
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount){
range = sel.getRangeAt(0);range.deleteContents();
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ((node = el.firstChild)){lastNode = frag.appendChild(node);}
range.insertNode(frag);
if (lastNode){
range =range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
else if (document.selection && document.selection.type != "Control"){
document.selection.createRange().pasteIcon(html);
}
}
$(document).ready(function() {
$('.buttOn').click(function(){
$('.contEd').focus();
var e = jQuery.Event("keydown");
e.which = 39; // # Some key code value
$("#tested").trigger(e);
pasteIcon('<img class="icOn" src="http://www.bmgstuff.com/files/interface/generator_frame/text_blood.png">');
})
});