JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at enim justo. Phasellus at nulla pharetra, lacinia metus ut, varius purus. Aliquam ligula enim, sagittis vitae volutpat vel, dictum vel dui. Nulla facilisi. Proin lacinia nunc ex, ac elementum velit vestibulum sit amet. Praesent facilisis, neque sed vehicula fermentum, justo nisl aliquet risus, facilisis lacinia ligula nibh eu dui. Sed eros ex, aliquam ac elit pretium, facilisis eleifend mi. Curabitur augue quam, facilisis in semper pulvinar, faucibus vitae nisl. Ut finibus fringilla magna vehicula sodales. Phasellus laoreet urna et lorem ultricies, sit amet porta dui placerat.</p>

<button type="text">Add Text</button>

CSS

body {
  padding: 20px;
}
textarea {
  border-radius: 4px;
  display: block;
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}

JavaScript

!(function($,c,d,e){$.fn.insertAtCaret=function(b){return this.each(function(){var a=this,scrollPos,strPosStart=0,strPosEnd=0,isModernBrowser=("selectionStart"in a&&"selectionEnd"in a),before,after,range,selection;if(!((a.tagName&&a.tagName.toLowerCase()==="textarea")||(a.tagName&&a.tagName.toLowerCase()==="input"&&a.type.toLowerCase()==="text"))){if(a.contentEditable){a.focus();selection=c.getSelection();if(selection.getRangeAt&&selection.rangeCount){range=selection.getRangeAt(0);range.deleteContents();range.insertNode(c.createTextNode(b));selection.collapseToEnd()}}return}scrollPos=a.scrollTop;a.focus();if(isModernBrowser){strPosStart=a.selectionStart;strPosEnd=a.selectionEnd}else{range=a.createTextRange();range.moveStart('character',-a.value.length);strPosStart=range.text.length}if(strPosEnd<strPosStart){strPosEnd=strPosStart}before=(a.value).substring(0,strPosStart);after=(a.value).substring(strPosEnd,a.value.length);a.value=before+b+after;strPosStart=strPosStart+b.length;if(isModernBrowser){a.setSelectionRange(strPosStart,strPosStart)}else{range=a.createTextRange();range.move('character',strPosStart);range.select()}a.scrollTop=scrollPos;a.blur()})}})(jQuery,document,window);
jQuery(function($) {
  $(document).on('click', 'button', function(e) {
  	$('p').insertAtCaret('---test---');
  });
});