Using CodeMirror. I cannot get the getCursor() function to work. I have a jsFiddle with codemirror sources attached.

----> see here JSfiddle <----

I'm trying to insert text into the editor, then force the cursor to move back a specified number of spaces. I'm just trying to get the cursor location with getCursor() but I can't seem to get it to work. Any thoughts?

$(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 es up [object Object]

    //write code to move cursor back [x] amount of spaces. [x] is the data-val value.


});






});

Using CodeMirror. I cannot get the getCursor() function to work. I have a jsFiddle with codemirror sources attached.

----> see here JSfiddle <----

I'm trying to insert text into the editor, then force the cursor to move back a specified number of spaces. I'm just trying to get the cursor location with getCursor() but I can't seem to get it to work. Any thoughts?

$(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 es up [object Object]

    //write code to move cursor back [x] amount of spaces. [x] is the data-val value.


});






});

• javascript
• jquery
• cursor
• codemirror

2 Answers 2

The code seems to work just fine. alert() will not display objects. use console.log() instead. I added the rest of the code.

    $('#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
    console.log(start_cursor);  //Cursor position 
    var cursorLine = start_cursor.line;
    var cursorCh = start_cursor.ch;

    //Code to move cursor back [x] amount of spaces. [x] is the data-val value.
    editor.setCursor({line: cursorLine , ch : cursorCh -mynum });

});

The onCursorActivity was not working for me. This is what worked for me:

let myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
    lineNumbers: true,
});

CodeMirror.on(myCodeMirror, "cursorActivity", (instance, obj)=>{        
    console.log(instance.doc.getCursor())
}

This will log an object every time the cursor changes it's position which contains line number and a ch number.