Editor

by Tega Oke

HTML

<div id="editor" contentEditable="true" onkeyup="resetPosition(this)">

</div>

<input type="text" onkeyup="resetPosition(this)" />

CSS

#editor {
  width: "100%";
  background: "#fff";
  height: 400px;
}

JavaScript

function getPos(e) {
        // for contentedit field
   if (e.isContentEditable) {
            e.focus()
            let _range = document.getSelection().getRangeAt(0)
            let range = _range.cloneRange()
            range.selectNodeContents(e)
            range.setEnd(_range.endContainer, _range.endOffset)
            return range.toString().length;
        }
        // for texterea/input element
        return e.target.selectionStart
    }
    
    
function setPos(pos, e) {
        // for contentedit field
        if (e.isContentEditable) {
            e.focus()
            document.getSelection().collapse(e, pos);
            return
        }
        e.setSelectionRange(pos, pos)
    }
function resetPosition(e) {
if(e.isContentEditable) {
let currentPosition = getPos(e);
  e.innerHTML=e.innerHTML.replace(/[0-9]/g, "a");
  setPos(currentPosition, e);
  //alert(currentPosition);
  return;
}

e.value = e.value.replace(/[0-9]/g, "a");
  setPos(currentPosition, e);

	
}