如何在ContentEditable元素文本末尾插入HTML并聚焦光标？

问题根源分析 #

1. .val()方法无效：你用了$('#quickreply').val(' ')，但contenteditable的div不是表单控件（比如input/textarea），.val()方法对它完全不起作用，这步操作根本没改变内容，反而可能干扰了光标定位。
2. 光标位置未正确设置：document.execCommand('insertHTML')是在当前光标位置插入内容的，如果光标默认不在div末尾，就会插在开头。

修复步骤 #

先写一个辅助函数，专门把光标定位到contenteditable元素的内容末尾；然后在插入HTML前调用这个函数，确保内容插在正确位置。

修改后的完整代码 #

// 辅助函数：将光标移到contenteditable元素的内容末尾
function moveCursorToEnd(el) {
    el.focus();
    const range = document.createRange();
    const selection = window.getSelection();
    // 选中元素的所有内容
    range.selectNodeContents(el);
    // 折叠选区到末尾（false表示折叠到选区的结束位置）
    range.collapse(false);
    // 清除原有选区，设置新的选区
    selection.removeAllRanges();
    selection.addRange(range);
}

$(document).on('click','#ok', function(e) {
    if($('#linkdialog-web-button').is(':checked')) {
        var selected_text = window.getSelection ? "" + window.getSelection() : document.selection.createRange().text;
        var linkURL = $("#linkdialog-onweb-tab-input").val();
        var Text = $("#linkdialog-text").val();
        $('#editlink_background').hide();
        $('#editlink_dialog').hide();
        
        // 统一处理URL前缀，避免重复判断
        const fullLinkURL = linkURL.startsWith('http://') || linkURL.startsWith('https://') 
            ? linkURL 
            : `http://${linkURL}`;
            
        const quickReplyEl = document.getElementById('quickreply');
        
        if(selectedNode != null && selectedNode.nodeName === 'A'){
            // 编辑已有链接的情况
            selectedNode.href = fullLinkURL;
            selectedNode.innerText = Text;
        } else {
            // 插入新链接的情况：先移光标到末尾，再插入
            moveCursorToEnd(quickReplyEl);
            // 插入时加个空格，让新旧链接分开
            document.execCommand('insertHTML', false, ` <a href="${fullLinkURL}">${Text}</a>`);
        }
    }
});

关键修改点说明 #

1. 新增moveCursorToEnd函数：这个函数通过Range和Selection API精准定位光标到元素内容的最后位置，解决了光标不在末尾的核心问题。
2. 统一处理URL前缀：把原来的两个分支（有无http前缀）合并，简化逻辑，避免重复代码。
3. 移除无效的.val()操作：删掉了对contenteditable div使用.val()的错误代码，避免干扰。
4. 插入时加空格：在新链接前加了一个空格，让新旧内容更美观，符合你预期的「google.com gmail.com」格式。

这样修改后，点击按钮插入新链接时，就会自动加到div内容的末尾了。

内容的提问来源于stack exchange，提问作者user11616198