JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.framezero.com/work/wikia/rangy/rangy-core.js"></script>
<script src="http://www.framezero.com/work/wikia/rangy/rangy-export.js"></script>
<script src="http://www.framezero.com/work/wikia/rangy/rangy-position.js"></script>
<div id="editor" contenteditable="true">
Pressing "Enter" in this editor should log the cursor x position, but will error in IE.
</div>
<div id="console"></div>
CSS
#editor {
border: 1px solid #666;
padding: 10px;
}
#console {
background: #EEE;
border: 1px solid #AAA;
margin-top: 10px;
min-height: 1em;
padding: 10px;
}
JavaScript
$(document).ready(function(){
$( '#editor' ).on('keypress click', function( e ) {
var rangySel = rangy.getSelection();
try {
rangySel.getStartDocumentPos();
}
catch( e ) {
$( '#console' ).text( e );
return false;
}
$( '#console' ).text( rangySel.getStartDocumentPos().x );
return false;
});
});