注意如何在文本末尾集中注意力

Summernote how to focus at end of text

本文关键字：集中 注意力 文本      更新时间：2023-09-26

我目前使用的是summernote 0.8.2，我使用的是预装文本的笔记。当文本加载，我希望它的焦点，但重点在行结束。我尝试过基于API进行对焦。然而，我试着对焦，但它不是在线的末尾开始。下面是我基于这个问题尝试做的一个例子。请帮助。(我希望光标位于"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>

不要在初始化的Summernote编辑器上调用focus方法，而是尝试调用自定义的jQuery方法placeCursorAtEnd。

我自己也在这样做:

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

其中this.advancedEditor是一个options对象，传递给我们的summernote初始化方法

答案中推荐的placeCursorAtEnd()是问题中的自定义模块。

我们创建了一个基于Summernote的网页设计器，并集成了另一个功能。
Sommernote使用DIV元素而不是TEXTAREA，这限制了光标定位的其他可能解决方案。

请查看placeCursorAtEnd()

  1. 关注元素
  2. lastNode不能有childNodes。本例中使用lastNode的长度。
  3. 使用range.collapse(false)结束，不为true开始。
  4. 使用scrollTop = 999999让元素滚动到视图中。
相关文章：