在普通视图和代码视图之间切换时保持光标位置

Question

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

这是一个简单的stackblitz。

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

我想单击“代码查看”按钮并转到此处：

Answer 1

我发布了一个不完整和肮脏回答您的问题，正如您在 cmets 中要求的那样：

 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. 您需要设置鼠标回调 & Co. 以反映鼠标单击时的插入符号位置等。现在它仅适用于 onKeydown。
3. 您需要滚动到textarea 中的插入符号位置

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