使用textangular在可編輯內容的div中記錄和恢復插入符號的位置

Question

我看過很多代碼片段，詳細介紹了如何在contenteditable div中獲取和設置插入符號的位置，但是在我的情況下，我無法使其正常工作：

我正在使用所見即所得的文本編輯器（textAngular）。 我提供了一些功能，供用戶在光標位置插入交叉引用。 他們單擊一個按鈕，這將打開一個對話框供他們進行選擇，然后將在當前光標位置插入一個html節點。

光標的位置可以在div內的子節點內，例如p標簽和/或其他格式標簽。

我的問題是，當對話框獲得焦點時，當前光標位置會丟失。 在打開對話框之前，我曾嘗試將插入符號的位置（節點和偏移量）存儲在內存中，但是無論我如何嘗試，插入符號的位置始終會返回到div的開頭。 我已經嘗試了所有可以在stackoverflow上找到的代碼段，但是它們都不起作用。 我想我缺少什么。

Answer 1

編輯：再三考慮，您的問題可能是當您單擊按鈕時，可編輯的內容失去了焦點，因此選擇丟失了。 我們在textAngular中這樣處理： toolElement.attr('unselectable', 'on');

最好的解決方案是使用rangy而不是roll-your-own（在textAngular ^ 1.3.0中要求）。

您可能被否決了，因為這與關於內容可編輯的“保存和恢復”插入符位置的SO問題非常相似，例如，為contentEditable div保存和還原插入符位置

對於textAngular，我們已多次處理此問題，並且在TA（textAngular）工具欄工具中內置了一些快捷方式和幫助程序。 在這里看看任何問題： https : //github.com/fraywing/textAngular/search?q=modal&type=Issues

如果您有特定於TA的問題，通常最好瀏覽github存儲庫中的500多個問題。 以前嘗試過類似的機會。

Answer 2

從這個答案： 保存和還原content的插入標記位置

修改為您的用例。 按下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>