When the Summernote text editor initializes with the focus property set to true, the editor gains focus but places the cursor at the beginning of the editor.

My preference would be to have the cursor placed where the user had clicked initially. At a bare minimum I would just need to place the cursor at the end of the editor.

The Summernote API doesn't seem to directly support this and I've tried various hacky looking solutions; Such as emptying the text area, creating the editor, then inserting the HTML nodes. The cursor remains at the beginning of the line still.

Forgot to include my fiddle: /

When the Summernote text editor initializes with the focus property set to true, the editor gains focus but places the cursor at the beginning of the editor.

My preference would be to have the cursor placed where the user had clicked initially. At a bare minimum I would just need to place the cursor at the end of the editor.

The Summernote API doesn't seem to directly support this and I've tried various hacky looking solutions; Such as emptying the text area, creating the editor, then inserting the HTML nodes. The cursor remains at the beginning of the line still.

Forgot to include my fiddle: http://jsfiddle/madChemist/gvy3po4L/1/

• javascript
• cursor-position
• summernote

1 Answer 1

Here is the solution I've modified to work for me:

$.fn.extend({
    placeCursorAtEnd: function() {
        // Places the cursor at the end of a contenteditable container (should also work for textarea / input)
        if (this.length === 0) {
            throw new Error("Cannot manipulate an element if there is no element!");
        }
        var el = this[0];
        var range = document.createRange();
        var sel = window.getSelection();
        var childLength = el.childNodes.length;
        if (childLength > 0) {
            var lastNode = el.childNodes[childLength - 1];
            var lastNodeChildren = lastNode.childNodes.length;
            range.setStart(lastNode, lastNodeChildren);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
        return this;
    }
});

Which originally came from this post: https://stackoverflow./a/6249440/2921200 and then I modified to work with jQuery & specifically against Summernote.