2016-09-08 3 views
2

Ich benutze derzeit Summernote 0.8.2, und ich verwende eine Notiz, die mit Text vorinstalliert ist. Wenn der Text geladen wird, möchte ich ihn fokussieren, aber am Ende der Zeile fokussieren. Ich habe versucht, basierend auf der API Fokussierung zu tun. Ich habe versucht, mich zu konzentrieren, aber es beginnt nicht am Ende der Zeile. Unten ist ein Beispiel von dem, was ich versuchte, basierend auf this Frage. Bitte helfen Sie. (Ich möchte den Cursor nach "Punkt 2" sein) auf dem initialisierten Summernote EditorSummernote wie am Ende des Textes zu konzentrieren

$("#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>

Antwort

0

Anstatt den Aufruf der Fokusmethode, versuchen die benutzerdefinierte jQuery-Methode aufrufen placeCursorAtEnd statt.

Ich mache etwas in dieser Richtung selbst:

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

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

Wo this.advancedEditor ein Optionen-Objekt, das auf unsere summernote Initialisierung Methode übergeben wird.

Verwandte Themen