jquery - 当插入符位于内容可编辑的 div 中时插入 html

Question

我想在内容可编辑的 div 中插入一些 html。

当编辑内容时，用户点击一个图标，弹出一个对话框，他在对话框中输入 url 和 anchor 文本。这导致可编辑的 div 失去焦点并且链接被插入到 div 的开头，而不是插入符号所在的位置。我尝试了很多东西，但还是卡住了。

我的可编辑内容 div 的“rte”id

对话框中按钮的“link_add”id

$('#link_add').click(function (e)
{       
    $('#rte').focus();                  
    document.execCommand('insertHTML', false, 'html content test');         
    close_modal ();
    e.preventDefault();

});

我还尝试了 set execcommand just for a div 中的解决方案，使用:

function execCommandOnElement(el, commandName, value)

但这会清空 div 并粘贴新内容。

Answer 1

我认为这是一个“内联”对话框(例如，很像 StackOverflow 的链接对话框)，它会移动焦点，从而移动选择。解决方案似乎是保存和恢复选择。调用 getSelection() 以获取对选择的引用并保存 anchorNode、anchorOffset、focusNode 和 focusOffset 属性然后使用 collapse(anchorNode, anchorOffset) 和 extend(focusNode, focusOffset) 在您聚焦 contenteditable div 后恢复选择。 (如果您对这两个节点都不感兴趣，您可以collapse(focusNode, focusOffset)。)