Запись и восстановление положения каретки в контентном div с использованием textangular

Question

Я видел много фрагментов кода, в которых подробно описывается, как получить и установить позицию каретки в контентном div, но я не могу заставить его работать в моем случае:

Я использую текстовый редактор WYSIWYG (textAngular). Я включил функцию для пользователя, чтобы вставить перекрестную ссылку в позицию курсора. Они нажимают кнопку, которая открывает диалоговое окно для их выбора, которое, в свою очередь, вставляет узел html в текущую позицию курсора.

Местоположение курсора может находиться внутри дочерних узлов в пределах div, таких как p-теги и/или другие теги форматирования.

Моя проблема заключается в том, что текущая позиция курсора теряется, когда диалог получает фокус. Я попытался сохранить позицию каретки (узел и смещение) в памяти перед открытием диалогового окна, но все, что я пробовал, позиция каретки всегда возвращается к началу div. Я пробовал все фрагменты кода, которые можно найти в stackoverflow, но ни один из них не работает. Я предполагаю, что у меня что-то не хватает.

Answer 1

РЕДАКТИРОВАТЬ: Во-вторых, ваша проблема, вероятно, заключается в том, что при нажатии кнопки редактируемый контент теряет фокус и, следовательно, выбор теряется. Мы обрабатываем это как таковое в textAngular: toolElement.attr('unselectable', 'on');

Лучшим решением для этого является использование rangy вместо roll-your-own (требуется в 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, часто бывает лучше просмотреть более 500 вопросов в репозитории github. Скорее всего, что-то подобное было предпринято раньше.

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>