Question

我已经看过很多代码片段，详细说明了如何在一个可疑的div中获取和设置插入位置，但我不能让它在我的情况下工作：

我正在使用WYSIWYG文本编辑器（textAngular）。我已经为用户提供了在光标位置插入交叉引用的功能。他们点击一个按钮，打开一个对话框供他们进行选择，然后在当前光标位置插入一个html节点。

光标的位置可能位于div内的子节点内，例如p标签和/或其他格式化标签。

我的问题是当对话框获得焦点时，当前光标位置会丢失。我已经尝试在打开对话框之前将插入符号位置（节点和偏移量）存储在内存中但是无论我尝试插入位置总是返回到div的开头。我已经尝试了所有可以在stackoverflow上找到的代码片段，但没有一个能够正常工作。我想我错过了什么。

Answer 1

编辑：再想一想，你的问题可能就是当你点击按钮时，内容可编辑会失去焦点，因此选择就会丢失。我们在textAngular中处理此问题：toolElement.attr('unselectable', 'on');

最佳解决方案是使用rangy而不是自己滚动（textAngular ^ 1.3.0中需要）。

你可能因为与内容可编辑中的“保存和恢复”插入符号位置的SO问题非常类似而被投票否决，例如Saving and Restoring caret position for contentEditable div

在textAngular的情况下，我们已多次处理此问题，并且我们在TA（textAngular）工具栏工具中内置了一些快捷方式和帮助程序。请查看此处的任何问题：https://github.com/fraywing/textAngular/search?q=modal&type=Issues

如果您有TA特定问题，通常最好查看github存储库中的500多个问题。以前曾尝试过类似的机会。

Answer 2

从这个回答：Saving and Restoring caret position for contentEditable div

修改为您的用例。按下组合ctrl + i时会出现一个弹出窗口。您与弹出窗口交互并按下关闭按钮，然后光标位置将返回到原始位置。

没有任何其他代码，这就是我必须继续下去的事我使用jquery来使编码示例更简洁，但这也可以在没有jquery的情况下工作。

  function getRestorePosition(context) {
      var selection = window.getSelection();
      var range = selection.getRangeAt(0);
      range.setStart(  context, 0 );
      var len = range.toString().length;
      
      return function restore(){
          var pos = getTextNodeAtPosition(context, len);
          selection.removeAllRanges();
          var range = new Range();
          range.setStart(pos.node, pos.position);
          selection.addRange(range);

      }
  }
  function getTextNodeAtPosition(root, index){
      var lastNode = null;

      var treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT,function next(elem) {
          if(index > elem.textContent.length){
              index -= elem.textContent.length;
              lastNode = elem;
              return NodeFilter.FILTER_REJECT
          }
          return NodeFilter.FILTER_ACCEPT;
      });
      var c = treeWalker.nextNode();
      return {
          node: c ? c: root,
          position: c? index:  0
      };
  }
  $('[contenteditable="true"]').on('keydown',function(e) {
     if(e.ctrlKey && e.which == 73) {
        
        var popup = $('#popup');
        var restore = getRestorePosition(e.target);
        popup.show();
        popup.find('button').one('click',function() {
           popup.hide();
           restore();
        });
        e.preventDefault();
        return false;
     }
  });

#popup {
   position:absolute;
   background-color:rgba(100,100,100,0.8);
   left:0px;
   right:0px;
   bottom:0px;
   top:0px;
   display:none;
   color:white;
   text-align:center;
   padding:0px;200px;
   font-size:3em;
}
[contenteditable="true"] {
  border:1px solid gray;
  padding:20px;
  font-size:2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true">
   How much wood could a woodchuck chuck if a woodchuck could chuck wood
</div>
<div id="popup">
   A wood chuck could chuck as much wood as a woodchuck could chuck!<BR/>
   <button>close</button>
</div>

使用textangular在可知的div中记录和恢复插入符号的位置

2 个答案: