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/
Share Improve this question edited Feb 2, 2016 at 18:24 Mad-Chemist asked Feb 2, 2016 at 18:10 Mad-ChemistMad-Chemist 4871 gold badge6 silver badges18 bronze badges1 Answer
Reset to default 6Here 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.