Question

我有一个令人满意的div，我需要在插入位置插入文本，

这可以通过 document.selection.createRange().text = "banana"

在IE中轻松完成

在Firefox / Chrome中有类似的方法吗？

（我知道一个解决方案存在here，但它不能在contenteditable div中使用，看起来很笨拙）

谢谢！

Answer 1

以下函数将在插入符号位置插入文本并删除现有选择。它适用于所有主流桌面浏览器：

function insertTextAtCursor(text) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

<强>更新

根据评论，这里有一些用于保存和恢复选择的代码。在显示上下文菜单之前，您应该将saveSelection的返回值存储在变量中，然后将该变量传递到restoreSelection以在隐藏上下文菜单之后和插入文本之前恢复选择。

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

Answer 2

使用window.getSelection()获取选择对象。
使用Selection.getRangeAt(0).insertNode()添加文本节点。

如有必要，使用Selection.modify()移动添加文本后面的光标位置。（未标准化，但Firefox，Chrome和Safari支持此功能）

function insertTextAtCursor(text)
{
    let selection = window.getSelection();
    let range = selection.getRangeAt(0);
    range.deleteContents();
    let node = document.createTextNode(text);
    range.insertNode(node);

    for(let position = 0; position != text.length; position++)
    {
        selection.modify("move", "right", "character");
    };
}

Answer 3

我已使用下一个代码在聊天消息中插入图标

<div class="chat-msg-text" id="chat_message_text" contenteditable="true"></div>

<script>
var lastCaretPos = 0;
var parentNode;
var range;
var selection;

$(function(){
    $('#chat_message_text').focus();

    $('#chat_message_text').on('keyup mouseup',function (e){
        selection = window.getSelection();
        range = selection.getRangeAt(0);
        parentNode = range.commonAncestorContainer.parentNode;
    });
})

function insertTextAtCursor(text) { 

    if($(parentNode).parents().is('#chat_message_text') || $(parentNode).is('#chat_message_text') )
    {
        var span = document.createElement('span');              
        span.innerHTML=text;

        range.deleteContents();        
        range.insertNode(span);  
        //cursor at the last with this
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);

    }
    else
    {
        msg_text = $("#chat_message_text").html()
        $("#chat_message_text").html(text+msg_text).focus()                 
    }
}

</script>

Answer 4

// <div contenteditable id="myeditable">
// const editable = document.getElementById('myeditable')
// editable.focus()
// document.execCommand('insertHTML', false, '<b>B</b>anana')
document.execCommand('insertText', false, 'banana')

Answer 5

使用jquery只是一个更简单的方法：

复制div的全部内容

var oldhtml=$('#elementID').html();

var tobejoined='<span>hii</span>';

//element with new html would be

$('#elementID').html(oldhtml+tobejoined);

简单！

在内容可编辑div中的光标处插入文本

5 个答案: