Summernote how to focus at end of text

Question

I'm currently using summernote 0.8.2, and I'm using a note which is preloaded with text. When the text loads, I would like it to focus but focus at the end of the line. I tried doing focusing based on the API. However, I tried focusing but it doesn't start at the end of the line. Below is an example of what I tried doing based on this question. Please help. (I would like the cursor to be after "item 2")

$("#myNote").summernote({
            toolbar: [
                ['para', ['ul']] 
            ],
            focus: true
        });
$('.note-editor [data-event="insertUnorderedList"]').tooltip('disable');

$('.note-btn.btn.btn-default.btn-sm').attr('data-original-title','');


var html = "<ul><li>item 1</li><li>item 2<br></li></ul>";
$("#myNote").summernote('code',html);
$("#myNote").focus();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script>
$(document).ready(function () {
    $.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;
        }
    });
});
</script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>


<div id="myNote"></div>

score 0 · Answer 1 · answered Sep 26 '16 at 14:58

0

Instead of calling the focus method on the initialized Summernote editor, try calling the custom jQuery method placeCursorAtEnd instead.

I'm doing something along these lines myself:

var $el = this.$el;
$el.find('.inline-preview .component-text-editor')
    .summernote(this.advancedEditor)

$el.find('[contenteditable]').placeCursorAtEnd();

Where this.advancedEditor is an options object which is passed to our summernote initialization method.

answered Sep 26 '16 at 14:58

Mad-Chemist

487
6
18

1

I'm trying to use `placeCursorAtEnd` for my summernote instance but I'm getting "Cannot manipulate an element if there is no element", can you please explain above code and how ca we use it. Thanks – Anupam Sep 16 '18 at 09:55
This answer is incomplete, because it doesn't say what `$el` is. Something like this appears to work: `$("#your-summernote-element").closest(".note-editing-area").find('[contenteditable]').placeCursorAtEnd();` – Skeets Sep 23 '19 at 05:33

score 0 · Answer 2 · edited Aug 15 '19 at 17:02

placeCursorAtEnd() as recommended in the answers is the custom module in the question.

We created a webdesigner based on Summernote with another integration of the functionality.
Sommernote uses a DIV element instead of a TEXTAREA and this restricts otherwise possible solutions for the cursor positioning.

For placeCursorAtEnd() please

Focus on the element.
lastNode may not have childNodes. In this case use the length of lastNode.
Use range.collapse(false) for end and not true for start.
Use scrollTop = 999999 for the element to scroll the end into view.

Summernote how to focus at end of text

2 Answers2

Linked