web-dev-qa-db-fra.com

Insérer du texte au curseur dans une div modifiable de contenu

J'ai un div contentable où je dois insérer du texte à la position du curseur,

Cela peut être facilement fait dans IE par document.selection.createRange().text = "banana"

Existe-t-il une manière similaire de l'implémenter dans Firefox/Chrome?

(Je sais qu'une solution existe ici , mais elle ne peut pas être utilisée dans un div contentable et semble maladroite)

Je vous remercie!

javascriptcontenteditable
46
user314362

La fonction suivante insérera du texte à la position du curseur et supprimera la sélection existante. Il fonctionne dans tous les navigateurs de bureau traditionnels:

function insertTextAtCursor(text) {
    var sel, range;
    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;
    }
}

MISE À JOUR

Sur la base des commentaires, voici un code pour enregistrer et restaurer la sélection. Avant d'afficher votre menu contextuel, vous devez stocker la valeur de retour de saveSelection dans une variable, puis passer cette variable dans restoreSelection pour restaurer la sélection après avoir masqué le menu contextuel et avant d'insérer du texte.

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();
        }
    }
}
127
Tim Down
  1. Obtenez un objet de sélection avec window.getSelection().
  2. Utilisez Selection.getRangeAt(0).insertNode() pour ajouter un nœud de texte.

  3. Si nécessaire, déplacez la position du curseur derrière le texte ajouté avec Selection.modify(). (Non normalisé, mais cette fonctionnalité est prise en charge dans Firefox, Chrome et 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");
    };
}
3
Martin Wantke
// <div contenteditable id="myeditable">
// const editable = document.getElementById('myeditable')
// editable.focus()
// document.execCommand('insertHTML', false, '<b>B</b>anana')
document.execCommand('insertText', false, 'banana')
1
alex_1948511