IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Edition textarea: ajouter une commande undo/redo (annuler, rétablir)


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut Edition textarea: ajouter une commande undo/redo (annuler, rétablir)
    Bonjour,
    J'ai un textarea pour l'édition en bbcode.
    Je voudrais ajouter une commande annuler et une commande rétablir. Mes recherches sont vaines. Je ne sais absolument pas comment démarrer. Pourriez-vous m'aider, si possible en JavaScript pur.

  2. #2
    Membre chevronné Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Par défaut
    Bonsoir à tous,

    Une fonction Undo Redo: Javascript ES6 Undo Redo Function

  3. #3
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    J'ai essayé d'implémenter la méthode indiquée plus une autre (voir plus bas) et je ne m'en sors pas. Je DESESPERE COMPLETEMENT.

    J'essaie d'adapter le script à mon cas et je ne m'en sors pas.

    Contrairement à l'exemple, je n'ai qu'une zone de texte qui sert à la fois à la saisie et à l'affichage. Je n'ai pas de bouton add et je dois à la place détecter les changements dans la zone de texte.
    J'ai essayé d'adapter le script mais je ne m'en sors pas.

    J'ai en outre une autre difficulté qui est que je n'arrive pas à me familiariser avec l'écriture des fonctions fléchées et à l'affectation des fonctions à des variables mais ça c'est une autre histoire.

    EDIT: J'ai trouvé un autre exemple plus simple qui fonctionne pour la fonction undo mais que je n'arrive pas à faire fonctionner pour la fonction redo. En effet, le dernier élément de commands n'est plus disponible comme le montre le console.log(commands); de la ligne 35. J'ai essayé de cloner commands avant la ligne 17 pour conserver l'état initial de commands mais j'accumule les erreurs. Par ailleurs la fonction undo ne fonctionne pas lorsque j'insère une balise bbcode. JE DESESPERE.

    Voici mon code tel que je l'ai adapté:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    const textArea	= document.getElementById("textArea");
    const commands	= [];
    const btnUndo	= document.getElementById('btnUndo');
    const btnRedo	= document.getElementById('btnRedo');
     
    function saveCommand(e) {
    	commands.push({
    		// the action is also saved for implementing redo, which
    		// is not implemented in this example.
    		action:		{ type: 'add',		key: e.key,		index: textArea.selectionStart },
    		inverse:	{ type: 'remove', 					index: textArea.selectionStart }
    	})
    }
     
    function undo() {
    	let value = textArea.value.split('')
    	const lastCommand = commands.pop()
     
    	if (!lastCommand) return
     
    	switch (lastCommand.inverse.type) {
    		case 'remove':
    			value.splice(lastCommand.inverse.index, 1)
    			break;
    	}
     
    	textArea.value = value.join('')
    }
     
    btnUndo.addEventListener('click', function(e){
    	undo();
    }, false );
     
    function redo() {
    	console.log(commands);
    	// ??
    }
     
    btnRedo.addEventListener('click', function(e){
    	redo();
    }, false );
     
    textArea.addEventListener('keydown', function(e){
    	saveCommand(e);
    }, false );

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    il existe quelque chose de très simple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // annuler
    document.execCommand("undo");
    // rétablir
    document.execCommand("redo");
    sinon il me semble plus judicieux d'observer l'événement beforeinput voire input sur la <textarea>.

  5. #5
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Bonjour,
    il existe quelque chose de très simple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // annuler
    document.execCommand("undo");
    // rétablir
    document.execCommand("redo");
    Je lis dans la doc MDN ceci:
    Obsolète: Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
    Du coup, je ne sais pas quoi faire. Je galère vraiment.
    A défaut de quelque chose d'aussi simple, j'aimerais trouver un script complet existant qui gère aussi l'incorporation de balises bbcode complètes.
    EDIT: J'ai quand même fait l'essai avec Edge et ça ne fonctionne pas avec l'insertion de balises bbcode par un bouton.

  6. #6
    Membre émérite
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    435
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 435
    Par défaut
    Bonjour,

    Tu ne peux pas utiliser simplement la propriété value du textarea pour enregistrer et restaurer le contenu ?
    Un petit exemple : https://jsfiddle.net/mxkeyLj1/

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Ajouter des étapes undo / redo
    Par atalon1 dans le forum PyQt
    Réponses: 8
    Dernier message: 14/07/2009, 12h30
  2. Boite de dialogue "Ajouter une commande"
    Par freddy_ghost dans le forum Débuter
    Réponses: 1
    Dernier message: 16/02/2009, 12h26
  3. [CR] Parametre Optionnel dans "ajouter une commande"
    Par tatayoyo dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 12/02/2009, 17h34
  4. Ajouter une commande au $PATH
    Par julien.63 dans le forum Administration système
    Réponses: 2
    Dernier message: 29/12/2007, 22h33
  5. Ajouter une commande dans le menu contextuel
    Par Tenguryu dans le forum C++Builder
    Réponses: 2
    Dernier message: 02/04/2006, 12h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo