Mad-Chemist Mad-Chemist - 4 months ago 184
Javascript Question

Summernote - On focus, insert cursor at the end of editor

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.net/madChemist/gvy3po4L/1/

Answer

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: http://stackoverflow.com/a/6249440/2921200 and then I modified to work with jQuery & specifically against Summernote.