javascript - 在普通 View 和代码 View 之间切换时保持光标位置

Question

在 Summernote 中切换到代码 View 时，光标始终会一直移动到文档末尾。有什么办法可以在切换时保持光标位置吗？有时，使用它的人想要编写一些自定义 HTML，因为它比使用编辑器按钮更快，但切换到代码 View 后，他们必须向上滚动并尝试找到之前的位置。不太实用。

这是一个简单的 stackblitz为此。

基本上，我需要实现的是:当光标在这里时

我想单击“代码 View ”按钮并转到此处:

Answer 1

正如您在评论中所要求的那样，我对您的问题发布了一个不完整且肮脏的答案:

 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. 您需要切换到代码 View 并返回，然后才能开始工作。并以某种方式解决这个问题。
2. 您需要设置鼠标回调等来镜像鼠标点击时的插入符位置等。现在它仅适用于 onKeydown。
3. 您需要滚动到 textarea 中的插入符位置

这里是https://js-pvbgkh.stackblitz.io