Undo 1 mot d'un copy paste

Bonjour,

J'aimerais savoir s'il est possible de réaliser quelque chose que je souhaiterais faire, je vous explique :

Je dev une web app qui permet de créer des magazines, je peux ensuite insérer des articles dans ces magazines.
Quand je saisie mon text à la main la limite de l'article est définie par le bas de page et un alert pop quand je suis rendu au bout et que je continue quand même, il y a aussi un undo() qui s'active pour effacer ce qu'il y a en trop. De ce coté ça marche plutôt niquel

Le fait est que lorsque je copie colle du text dans mon article , et que même cas de figure j'arrive au bout, il se passe la même chose qu'énoncé ci-dessus mais je voudrais justement modifier ça

Est-il possible que lorsque l'undo se fasse au lieu d'annuler tout le copie coller (psq ça annule l'action évidemment), je puisse undo/effacer uniquement ce qui déborderais de mon article et insérer quand même le contenu qui rentrerait ?

Voici un petit bout de mon code :

//marche - permet de déterminer une longueur maximum pour l'article photo qui est la limite de la colonne
$('.article_photo').keyup(function(event){
	//console.log($(this)); 
	if ($(this).parents('.text_interieur').height() > $(this).parents('.col_pdf').height() + 10) { //le +10 permet d'aller vraiment jusqu'en bas de la zone éditable
		alert('Vous avez dépassé la taille de la colonne');
		document.execCommand("undo", false, null);
	}else{
		return false;
	}
});

Merci d'avance pour vos réponse,
Julien

Hello,

Oui bien sur c'est tout à fait possible ( dis moi si tu veux un code intégré au tiens ):
https://codepen.io/stryk/pen/qBaLqrM?editors=1010

Salut Stryk,

merci pour ta réponse, elle est super, c'est exactement ce que je recherche !

Si possible je veux bien un peu d'aide supplémentaire pour l'adapter à mon code ^^

J'ai essayé de l'adapter en faisant ceci :

//test
$('.article_photo').keyup(function(event){
	//console.log($(this));
	const copyedstring = $('.article_photo').text();
	console.log(copyedstring);
	const maxValue = $(this).parents('.col_pdf').height() + 10 - $(this).parents('.text_interieur').height();
	if (maxValue < 0){
		alert('dans if');
		const truncatedValue = copyedstring.slice(0, maxValue);
		console.log(maxValue);
		console.log(truncatedValue);
		//$('.article_photo').text() = truncatedValue;
		$('.article_photo').text(truncatedValue);
	}

Voici à quoi ressemble mes articles :

case 27: //2 articles sans titres
            var result_ajout = new_element_bdd(idcolonne, function(result){
              $('#'+idcolonne).append('<div id="element_pdf_'+result.idelement+'" class="element_pdf" data-ordre="'+result.ordre+'" data-idelement="'+result.idelement+'" data-col="'+result.col+'">\
                <button id="btn_suppr_element_'+result.idelement+'" onclick="confirm_suppr('+result.idelement+');" class="btn_suppr_element">\
                  <img src="../../../img/bin.png" width="30px">\
                </button>\
                <section style="width:49%; display: inline-block; margin-right:1%; vertical-align:top;"> \
                  <div id="block_choix1_'+result.idelement+'" class="block_choix_new_article">\
                    Placer un texte :<br/>\
                    <div style="width:45%; display:inline-block; vertical-align:top; cursor:pointer;" onclick="saisis_text_classeur('+result.idelement+',1);">\
                      <img style="display:block; margin:auto;" src="../../../img/modal_new_elements/classeur.png">\
                    </div>\
                    <div style="width:45%; display:inline-block; vertical-align:top;cursor:pointer;" onclick="saisis_text_manuel('+result.idelement+',1);" >\
                      <img style="display:block; margin:auto;" src="../../../img/modal_new_elements/saisis_texte.png">\
                    </div>\
                  </div>\
                  <div contenteditable="true" id="block_edit1_'+result.idelement+'" class="contentedit_text_article text_article article_photo" spellcheck="false">\
                  </div>\
                </section><!--\
                --><section style="width:49%; display: inline-block; margin-right:1%; vertical-align:top;"> \
                  <div id="block_choix2_'+result.idelement+'" class="block_choix_new_article">\
                    Placer un texte :<br/>\
                    <div style="width:45%; display:inline-block; vertical-align:top; cursor:pointer;" onclick="saisis_text_classeur('+result.idelement+',2);">\
                      <img style="display:block; margin:auto;" src="../../../img/modal_new_elements/classeur.png">\
                    </div>\
                    <div style="width:45%; display:inline-block; vertical-align:top;cursor:pointer;" onclick="saisis_text_manuel('+result.idelement+',2);" >\
                      <img style="display:block; margin:auto;" src="../../../img/modal_new_elements/saisis_texte.png">\
                    </div>\
                  </div>\
                  <div contenteditable="true" id="block_edit2_'+result.idelement+'" class="contentedit_text_article text_article article_photo" spellcheck="false">\
                  </div>\
                </section>\
              </div>');
            });
          break;

Le fait est que cette fonction marche avec les classes et non les id et que du coup mes articles ont tous la même classe ce qui fait que quand mon maxValue < 0 , ça insert la truncatedValue dans un autre article que celui sur lequel je suis ^^

Je vais continuer de travailler ça en essayant de faire fonctionner cette fonction via les id des articles et non via une classe commune.

Merci encore de ton aide,
Bonne journée,
Julien
Modifié par leUj (16 Jan 2021 - 15:38)

Attends ^ On peut ajouter juste une boucle pour fonctionner avec les CLASS
Je m’aperçoit quand même que mon code n'est pas parfait, si par exemple tu fais un 'coller' avec le clic-droit ça ne fonctionne pas, et là c'est une autre histoire pour que ça fonctionne.
En effet quand tu ajoute un écouteur sur le 'paste' tu peux récupérer la value de l'input mais quand tu veux le modifier on dirait qu'il y a une latence et du coup quand tu change la value ça laisse l'ancienne, très curieux, peut-être ajouter un set-interval ou sortir la fonction je ne sais pas trop encore.
Je regarde ça de plus près et je reviens vers toi dès que j'ai 5mn

Re Stryk ,

J'ai continuer de taffer sur cette fonction là ^^, j'ai réussi à l'adapter pour qu'elle fonctionne sur les id. Le problème c'est qu'elle ne marche pas au poil finalement, au niveau du slice ça n'enlève pas "assez de caractères" par rapport à la place restante de ma zone de texte...

En gros la fonction marche mais elle n'enleve pas assez de mots lorsque ça dépasse, ce qui fais que mon article est toujours un peu coupé ^^

Si t'as une autre piste pour "slicer" mieux je suis tout ouie

//test
function keepword(id_article, var_id_block_article){
	id_block_article = var_id_block_article;

	const copyedstring = $('#block_edit'+id_block_article+'_'+id_article).text();
	const maxValue = $('.article_photo').parents('.col_pdf').height() + 10 - $('.article_photo').parents('.text_interieur').height(); //
	console.log(copyedstring);
	console.log(maxValue);
	if (maxValue < 0){
		/*alert('dans if');
		testvalue = Math.abs(maxValue);
		console.log(testvalue);*/
		const truncatedValue = copyedstring.slice(0, maxValue);
		console.log(maxValue);
		console.log(truncatedValue);
		//$('#block_edit'+id_block_article+'_'+id_article).text(truncatedValue);
		$('#p_scroll'+id_block_article+'_'+id_article).text(truncatedValue);
	}

}

Bonne journée,
Julien

Hello leUj

Tu peux mettre tout ça dans un codepen please ?

Salut stryk

Voici mon code dans un code pen, déso pour la partie html c'est un peu le bordel ^^

https://codepen.io/LeUj/pen/yLawOvJ?editors=1010

Bonne journée à toi !