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