Summernote how to focus at end of text

问题

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>

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/39396888/summernote-how-to-focus-at-end-of-text

标签

javascript

jquery

summernote