Inserting a new text at given cursor position

Question

I am working on customizing the codemirror for my new language mode. As part of this new mode implementation, I am writing a new tool bar where user can select some text and

Answer 1

To add the new line at the end -

function updateCodeMirror(data){
    var cm = $('.CodeMirror')[0].CodeMirror;
    var doc = cm.getDoc();
    var cursor = doc.getCursor(); // gets the line number in the cursor position
    var line = doc.getLine(cursor.line); // get the line contents
    var pos = { // create a new object to avoid mutation of the original selection
        line: cursor.line,
        ch: line.length - 1 // set the character position to the end of the line
    }
    doc.replaceRange('\n'+data+'\n', pos); // adds a new line
}

Call function

updateCodeMirror("This is new line");

Answer 2

You want to use the replaceRange function. Even though the name says "replace", it also serves as "insert" depending on the arguments. From the documentation at the time I write this:

Replace the part of the document between from and to with the given string. from and to must be {line, ch} objects. to can be left off to simply insert the string at position from. When origin is given, it will be passed on to "change" events, and its first letter will be used to determine whether this change can be merged with previous history events, in the way described for selection origins.

Answer 3

How about replaceSelection (http://codemirror.net/doc/manual.html#replaceSelection)?

doc.replaceSelection(replacement: string, ?select: string) Replace the selection(s) with the given string. By default, the new selection ends up after the inserted text. The optional select argument can be used to change this—passing "around" will cause the new text to be selected, passing "start" will collapse the selection to the start of the inserted text.

Answer 4

Here's how I did it:

function insertTextAtCursor(editor, text) {
    var doc = editor.getDoc();
    var cursor = doc.getCursor();
    doc.replaceRange(text, cursor);
}

Answer 5

Improved function that, if selection present, replaces the text, if not, inserts in current cursor position

function insertString(editor,str){

        var selection = editor.getSelection();

        if(selection.length>0){
            editor.replaceSelection(str);
        }
        else{

            var doc = editor.getDoc();
            var cursor = doc.getCursor();

            var pos = {
               line: cursor.line,
               ch: cursor.ch
            }

            doc.replaceRange(str, pos);

        }

    }

Answer 6

Final function to insert text at current cursor position in a performant way. Hope it helps.

function insertStringInTemplate(str)
{
    var doc = editor_template.getDoc();
    var cursor = doc.getCursor();

    var pos = {
        line: cursor.line,
        ch: cursor.ch
    }

    doc.replaceRange(str, pos);
}