contenteditable texte sélectionné d'enregistrer et de restaurer

Je suis tombé sur ce post qui montre 2 fonctions sur la façon de sauvegarder et de restaurer le texte sélectionné dans un contenteditable div. J'ai le dessous de la div définir comme contenteditable et la 2 fonction de l'autre post. Comment puis-je utiliser ces fonctions pour enregistrer et restaurer le texte sélectionné.

<div style="width:300px;padding:10px;" contenteditable="true">test test test test</div>

<script>
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();
        }
    }
}
</script>
Vous devez utiliser les méthodes de l'objet Range (voir mozilla doc: developer.mozilla.org/en/DOM/range ). Fondamentalement, une gamme composée d'un nœud et le décalage dans ce nœud. Un moyen pour enregistrer le code HTML ainsi que la gamme est d'utiliser des "signes" (voir la Fermeture de la Bibliothèque pour trouver des idées: closure-library.googlecode.com/svn/docs/... ).

OriginalL'auteur Hussein | 2011-01-14

  1. 19

    Une utilisation typique serait d'afficher un type de widget ou une boîte de dialogue pour accepter l'entrée de l'utilisateur (donc potentiellement détruire la sélection d'origine) et la restauration de la sélection après que le widget a été caché. En fait en utilisant les fonctions est assez simple; le plus grand danger est d'essayer de sauver la sélection après il a déjà été détruit.

    Voici un exemple simple. Il affiche une saisie de texte et remplace la sélection dans le modifiable <div> avec le texte à partir de cette entrée. Il y a trop de code à coller dans ici, donc voici le code complet: http://www.jsfiddle.net/timdown/cCAWC/3/

    Extrait:

    <div id="test" contenteditable="true">Some editable text</div>
<input type="button" unselectable="on" onclick="displayTextInserter();"
    value="Insert text">
<div id="textInserter">
    <input type="text" id="textToInsert">
    <input type="button" onclick="insertText()" value="Insert">
</div>

<script type="text/javascript">
var selRange;

function displayTextInserter() {
    selRange = saveSelection();
    document.getElementById("textInserter").style.display = "block";
    document.getElementById("textToInsert").focus();
}     

function insertText() {
    var text = document.getElementById("textToInsert").value;
    document.getElementById("textInserter").style.display = "none";
    restoreSelection(selRange);
    document.getElementById("test").focus();
    insertTextAtCursor(text);
}
</script>
    +1, je cherchais exactement cette solution. Merci vous avez fait ma journée.
    Tim, comment voulez-vous utiliser le saveSelection() et restoreSelection(range) dans une manière que vous pouvez cibler le contenteditable div ? c'est à dire si c'est comme saveSelection('mycontentId')` et restoreSelection(plage, 'mycontentId') ? Je suis en train de l'utiliser sur les deux séparés 'div et j'ai besoin de cibler chaque ? Est-il possible d'intégrer getElementById dans les deux fonctions afin que je puisse cible ?
    La sélection est lié au document, et non pas des éléments individuels, mais il n'y a rien pour vous arrêter l'enregistrement de plusieurs sélections différentes. Pourriez-vous nous donner un exemple concret de ce que vous souhaitez réaliser?
    merci pour la réponse! 🙂 En gros, en essayant de sauver par elementId ? De sorte que j'ai pu, par exemple, l'appel et la restaurer sur 2 elementId ? c'est à dire comme saveSelection('mycontentId') et puis restoreSelection('mycontentId') et puis il suffit d'entrer le elementId que je veux sauvegarder et de restaurer l'utiliser plusieurs fois ? Je voudrais utiliser votre plugin génial longiligne - cependant, je n'ai vraiment besoin de cette fonction et la lib taille est probablement trop gros
    Oh, je vois ce que tu veux dire. Je pense que je ferais il suffit d'utiliser un simple objet d'un algorithme de hachage: quelque chose comme var selectionsById = {}; selectionsById['mycontentId'] = saveSelection(); restoreSelection(selectionsById['mycontentId']);.

    OriginalL'auteur Tim Down

  2. 1

    juste une recommandation:

    il est difficile de travailler avec le navigateur natif de sélection + contenteditable + poignée tous les navigateurs différents aspects + sauvegarder et de restaurer la sélection et etc à partir de zéro..

    Je conseille longiligne https://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule

    spécialement fait pour faire tout le travail difficile avec la sélection pour vous

    vérifier les docs, il est facile à utiliser 😉
    espérons, vous aidera à

    OriginalL'auteur Nedudi