Сохранять положение курсора при переключении между обычным режимом и видом - PullRequest
Новая
       29

Сохранять положение курсора при переключении между обычным режимом и видом

7 голосов
/ 02 апреля 2020

При переключении в режим просмотра кода в Summernote курсор всегда перемещается до конца документа. Есть ли способ сохранить положение курсора при переключении? Иногда люди, которые его используют, хотят написать какой-то пользовательский HTML, потому что это быстрее, чем использование кнопок редактора, но после переключения в режим просмотра кода им приходится прокручивать вверх и пытаться найти то, где они были раньше. Это не очень практично.

Вот простой stackblitz для этого.

По сути, мне нужно достичь: когда курсор находится здесь enter image description here

Я хочу нажать кнопку «Просмотр кода» и go здесь: enter image description here

1 Ответ

3 голосов
/ 06 апреля 2020

Я публикую неполное и грязное ответ на ваш вопрос, как вы просили его в комментариях: 

 function getCaretCharacterOffsetWithin(element) {
     var caretOffset = 0;
     var doc = element.ownerDocument || element.document;
     var win = doc.defaultView || doc.parentWindow;
     var sel;
     if (typeof win.getSelection != "undefined") {
         sel = win.getSelection();
         if (sel.rangeCount > 0) {
             var range = win.getSelection().getRangeAt(0);
             var preCaretRange = range.cloneRange();
             preCaretRange.selectNodeContents(element);
             preCaretRange.setEnd(range.endContainer, range.endOffset);
             caretOffset = preCaretRange.toString().length;
         }
     } else if ( (sel = doc.selection) && sel.type != "Control") {
         var textRange = sel.createRange();
         var preCaretTextRange = doc.body.createTextRange();
         preCaretTextRange.moveToElementText(element);
         preCaretTextRange.setEndPoint("EndToEnd", textRange);
         caretOffset = preCaretTextRange.text.length;
     }
     return caretOffset;
 }

 $(document).ready(function() {
   $('#summernote').summernote({
       callbacks: {
         onKeydown: function(e) {
           const editable = document.getElementsByClassName('note-editable')[0]
           const pos = getCaretCharacterOffsetWithin(editable)
           console.log(pos)
           const codable = document.getElementsByClassName('note-codable')[0]
           codable.setSelectionRange(pos,pos)
         }
       }
   })
   $('#summernote').summernote('fullscreen.toggle');
 });

Кредиты для getCaretCharacterOffsetWithin переходит к Tim Down

getCaretCharacterOffsetWithin() получает позицию каретки в .note-editable, но не совсем верно, и значение даже не соответствует, когда вы перемещаетесь по границам абзаца взад и вперед (как Тим предупреждает в своем первоначальном сообщении).

setSelectionRange(pos,pos) отражает положение в .note-editable до .note-codable.

Также

  1. Вам необходимо переключиться на code view и обратно, прежде чем он начнет работать. И каким-то образом решить эту проблему.
  2. Вам нужно будет установить обратные вызовы мыши и Ко для отражения положения каретки при щелчках мыши и т. Д. c. Теперь он работает только на onKeydown.
  3. . Вам нужно будет прокрутить до позиции каретки в textarea

Здесь https://js-pvbgkh.stackblitz.io

...