JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.appmalt.info/CodeMirror/lib/codemirror.js"></script>
<script src="http://www.appmalt.info/CodeMirror/mode/xml/xml.js"></script>
<script src="http://www.appmalt.info/CodeMirror/mode/javascript/javascript.js"></script>
<script src="http://www.appmalt.info/CodeMirror/mode/css/css.js"></script>
<script src="http://www.appmalt.info/CodeMirror/mode/htmlmixed/htmlmixed.js"></script>
<link rel="stylesheet" href="http://www.appmalt.info/CodeMirror/lib/codemirror.css">
<link rel="stylesheet" href="http://www.appmalt.info/CodeMirror/doc/docs.css">
<select id='sel'>
<option data-val='2'>Move Two Spaces from End</option>
<option data-val='5'>Move Five Spaces from End</option>
<option data-val='8'>Move Eight Spaces from End</option>
</select>
<br/><br/>
<textarea id='theZone'></textarea>
JavaScript
$(document).ready(function() {
//Changing the textarea to a CodeMirror rich text editor
var editor = CodeMirror.fromTextArea(document.getElementById('theZone'), {
mode: 'text/html',
lineWrapping : true,
lineNumbers : true,
extraKeys : {
"Tab": "indentMore",
"Shift-Tab": "indentLess",
"'>'": function(cm) { cm.closeTag(cm, '>'); },
"'/'": function(cm) { cm.closeTag(cm, '/'); }
} ,
onCursorActivity: function(cm) {
cm.setLineClass(hlLine, null, null);
hlLine = cm.setLineClass(cm.getCursor().line, null, "activeline");
}
});
//When SELECT changes - insert the value into the CM editor, set focus, get cursor position, move cursor back [x] amount of spaces.
$('#sel').change(function() {
var selected = $(this).find('option:selected');
var mynum = selected.data('val');
editor.replaceSelection($(this).val(), focus);
editor.focus();
var start_cursor = editor.getCursor(); //I need to get the cursor position
alert(start_cursor); //Cursor position always comes up [object Object]
//write code to move cursor back [x] amount of spaces. [x] is the data-val value.
});
});