modifier la sélection dans un iframeRésolu

Question

Bonjour à toutes et à tous, j'aimerais ajouter aux caractères sélectionnées dans une iframe une balise html. tel que ci-dessous, elle n'est "pas interprétée" mais "affichée comme du texte". c'est probablement simple (?) mais je tourne, retourne, reretourne... et ne trouve pas de solution. uniquement avec IE ici, il faudra que je la rende compatible avec les autres navigateurs. si vous avez la réponse : elle est bienvenue... merci d'avance.

Cordialement Bul

PROTECTIONNISTE · Accepted Answer

C'était juste pour te montrer que ça fonctionne ainsi ... c'est peut être pas exactement comme tu le souhaite mais au moins de cette façon les balises sont utilisé et non pas inscrite ... A toi de retravailler le script pour avoir ce que tu veux.
le div c'est que je n'utilise pas les label, et j'ai fais un copier coller de ton script .

PROTECTIONNISTE · Answer

Je crois que par sécurité ce n'est pas faisable en faite tu peux ajouter un saut de ligne 
 ou un retour chariot .
En faite tu peux faire les même chose que tu ferais dans une alert ... donc pas de gras pas d'italic ni autre ...

Enfin une solution peut être est de récupérer dans une variable ton Champ + createRange()  et la charger dans un div avec nomdudiv.innerHTML

cs_bultez · Answer

>>Je crois que par sécurité ce n'est pas faisable 
   quelle sécurité ? rien à voir à priori, pas de soucis de ce coté là !
<hr />
            Cordialement    Bul

PROTECTIONNISTE · Answer

Y a un trojan qui a été créé qui exploitait le createRange()donc la sécurité évidente ...
j'ai trouvé un lien : http://www.bitdefender.fr/VIRUS-215606-fr--Exploit.HTML.CreateRange.Gen.html
voilà pourquoi ;-)

cs_bultez · Answer

y'a des trojans partout ! mais dans un createrange ? faut pas rire.... de toutes manières et encore une fois, rien à voir avec ma question qui reste l'interprétation ou pas d'une balise. Champ.body.innerHTML= "exemple" ça marche, alors les problèmes de sécurité n'ont rien à voir. merci pour ta réponse, mais c'est totalement à coté de la plaque.

Cordialement Bul

PROTECTIONNISTE · Answer

Champ.body.innerHTML="exemple" ça marche logique, je t'ai dis dans ma réponse que tu pouvais réecrire dans en utilisant un div et innerHTML, mais le createRnage ne t'ajoutera pas directement du HTML, je vais te faire la source vite fais pour que tu puisse comprendre je re ...

cs_bultez · Answer

>>mais le createRnage ne t'ajoutera pas directement du HTML, ben oui ! c'est mon souci. ce n'était pas clair ? pas dis dans mon message d'origine ? >> Champ.body.innerHTML= "exemple" >>ça marche ben oui, donc pas de problèmes de sécurités alors.... >> je vais te faire la source vite fais pour que tu puisse comprendre comprendre quoi ? je pense avoir compris. ce que j'aimerais, c'est remplacer "un mot" par "un mot" dans une iframe, quitte à passer par ce que tu veux.

Cordialement Bul

PROTECTIONNISTE · Answer

cs_bultez · Answer

pas tout à fait... puisque ça efface le contenu de l'iframe.
il faudrait remplacer la sélection, et laisser le reste.

 inutile d'ailleurs.
<hr />                Cordialement     Bul

cs_bultez · Answer

de plus, on ne peut pas utiliser un id.
c'est le texte sélectionné qu'il faut modifier. il n'a pas d'ID.
<hr />


Cordialement     Bul

cs_bultez · Answer

>>pas exactement comme tu le souhaite 
   euh... pas du tout

>>mais au moins de cette façon les balises
sont utilisé et non pas inscrite
    ça ne correspond absolument pas à mon problème.
    ça ne résoud rien.

>>A toi de retravailler le script
pour avoir ce que tu veux.
    ton script est simplement inexploitable.



    merci malgré tout des tes efforts.





<hr />            Cordialement Bul

nickadele · Answer

Bultez,


j'ai rien compris à vos échanges et rien compris à ton problème.
Peux-tu ré-expliquer ton problème et ce que tu veux faire ?

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle

PROTECTIONNISTE · Answer

>>>pas exactement comme tu le souhaite
   >>euh... pas du tout
   
   Ah bon ? alors tu t'expliques mal
   
   >> ce que j'aimerais, c'est remplacer "un mot" par "un mot"
   Le script fourni fais exactement ceci, mot pour mot, malgré tout il efface le reste (amis ceci est pas tres dur à récupérer, mais bon si tu penses quec'est inexploitable ...
   Bon courage

cs_bultez · Answer

salut Nick... probable que je n'ai pas été clair, je ne me comprends que rarement moi-même récapépétons : un iframe, avec du texte quelconque ( saisi en fait par un utilisateur ) j'aimerais "entourer" les caractères sélectionnés par cet utilisateur de balises html. ce que fait l'exemple que j'ai mis, mais, car il y a un mais : les balise ne sont pas interprétées. par exemple, l'iframe contient exemple mot un autre ... il est donc affiché : exemple mot un autre ... sélectionnons le "un", en remplaçons par un on va afficher : exemple mot un autre ... je préfèreais nettement : exemple mot un autre ... quoi mettre à la place de createrange.text pour interpréter les balises ? si ça existe... où comment faire autrement ? car je ne sais pas comment retouver les caractères sélectionnés avec autre chose, ni les positions dans le texte ni leur nombre... suis-je plus clair ? mais essayes ( avec ie ) mon exemple. c'est mieux qu'une explication.

Cordialement Bul

cs_roro06 · Answer

Bonjour




Ce serait bien qu'on puisse faire ce que tu veux, ça permettrait de créer un petit éditeur WYSIWYG en JS de manière élégante et relativement simple (c'est peut-être le but ?). Helas, 3 fois helas, je n'ai jamais réussi à le faire, ni à trouver de doc ou de bout d'code permettant de le faire. Appremment, "on ne peut pas". Tu peux te tourner vers execCommand, qui permet certaines choses (malheureusement pas toutes, loin de là), qui s'utilise, pour IE : 
window.frames[idDuFrame].document.execCommand(action, showUI, parm);
puisque tout est simple, c'est évidemment différent pour les sniffeurs GECKO : 
document.getElementById(idDuFrame).contentDocument.execCommand(action, showUI, parm);

Cordialement
Roro webDev

cs_bultez · Answer

salut roro,

       ouais pour execCommand.
        ( j'ai d'ailleurs mis dans les sources justement un editeur wysiwyg qui
            utilise cette méthode. et ça baigne parfaitement ( ie, ff, opera, k-meleon... ) )

        ici je voulais ajouter des fonctionnalités à execCommand 
        en Javascript finalement ! ( on peut voir ça comme ça )
            car 



certaines choses (malheureusement pas toutes, loin de là)





    



<hr />



Cordialement             Bul

cs_bultez · Answer

on peut déterminer (?) le mot sur lequel est le curseur
        donc repérer sa position et à coups de substr...
    mais c'est assez lourd à faire, et  pour déterminer correctement le mot ?
        et si l'utilisateur veut faire un truc sur plusieurs mots...
    je vais peut-être être obligé de voir dans ce sens...
    
<hr />                Cordialement     Bul

nickadele · Answer

Voilà qui est plus claire comme explication.
A mon avis le plus simple serait de reprendre les fonctions du Wysiwyg que tu utilises, comme le suggère roro06. 
J'ai du faire ça un jour pour intégrer mes propres fonctions dans un éditeur, j'était effectivement passé par la fonction execCommand qui te fait ça à merveille. Le problème était la compatibilité, car le système était réservé à IE.
Donc la solution : editdoc.execCommand(cmdID);
Si mes souvenirs sont bons, tu ne dois pas t'occuper de savoir ce que l'utilisateur à sélectionné, la commande s'en charge.
Un exemple : http://www.a525g.com/programmation/_code/dhtml_zones_editables.htm

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle

cs_roro06 · Answer

Bonjour




pour l'info, execCommand n'est pas reservé à IE. FF et Opera l'implémentent également, mais de manière un peu différentes chacun (certaines options sont reconnues, pas d'autres, etc ..). du coup, il est necessaire de tester chaque option sur chaque browser ... du pur bonheur !!

Cordialement
Roro webDev

cs_bultez · Answer

j'ai du aller faire quelques courses, et ma foi : ce fut salutaire.

je crois que je vais faire :

1° mémoriser les caractères sélectionnés de l'Iframe
2° remplacer cette sélection par "une suite de caractères qui n'existent pas" dans l'Iframe
3° mémoriser l'Iframe modifié dans un textarea
4° remplacer dans ce texarea 
"la suite de caractères qui n'existaient pas"
    par les balises + "
les caractères sélectionnés du l'Iframe"
5° mettre le textarea dans Iframe

bourrin, mais ça baignera. si vous avez mieux !

Nick et Roro, comme je vous l'ai dis, execCommand j'ai mis en oeuvre
    dans une source ici même ( editeur wysiwyg qui fonctionne avec
    IE, FF, Opera, K-meleon ... ). mais ne fait pas ce que je voulais.

je vais mettre résolu, et grâce à vous finalement.



<hr />



Cordialement         Bul

PetoleTeam · Answer

B onsoir à tous... Je viens mettre ma contribution on ne sait jamais, je vous livre un exemple de code ...je vous rassures ça BUG si l'on fait plusieurs fois la manip mais bon pour continuer à chercher c'est neuronal... Je pense que l'idéal serai de jouer avec les createElement et autre appendChild mais encore faut il récupérer le noeud parent de la sélection... Allez bonne PROG ! ;0)

cs_bultez · Answer

ça fonctionne presque comme je voulais ( exclusif IE pour le moment ,mais simple à harmoniser ) ça doit d'ailleurs ressembler à ce qu'a mis PetoleTeam ( merci à toi ) sauf que... le onclick ajouté ne se fait pas... pas loin, pas loin... faudrait-il l'ajouter "après" ? en dynamique ?

Cordialement Bul

cs_bultez · Answer

//4° remplacer dans ce textarea "la suite de caractères qui n'existaient pas" // par les balises + " les caractères sélectionnés du l'Iframe" t.value=t.value.replace(tmp,""+mem+""); //5° mettre le textarea dans Iframe Champ.body.innerHTML=t.value; Champ.body.document.getElementById(tmp).onclick=function() { alert("ok"); } // Champ.body.document.getElementById(tmp).id=''; à faire ou pas onclick fonctionne là, bien sûr, mais si on fait une 2ème fois trait() cet onclick disparait du contenu de l'Iframe... curieux ?

Cordialement Bul

cs_bultez · Answer

... résolu ?

    un setTimeout et tout semble baigner ( avec IE, car FF quelques soucis encore,
        mais je vais poser une autre question ), nul besoin d'ajouter ni id, ni fonction.

    setTimeout("Champ.body.innerHTML=t.value;",100);

    donc, pas compris (!) mais çà marche...
    
    merci donc à tous.

<hr />


Cordialement             Bul

PROTECTIONNISTE · Answer

Tiens on dirait qu'on a pris mon idée de innerHTML qui était soit disant inexploitable ...
Comme quoi il suffisait de modifier

cs_bultez · Answer

>>Tiens on dirait qu'on a pris mon idée de 
innerHTML qui était 
>>soit disant inexploitable ...Comme quoi il suffisait de modifier

        euh... tu ne te sens pas ni géné ni ridicule là ?     
<hr />


Cordialement         Bul

cerede2000 · Answer

Bonjour je suis dans le meme truc que toi, je veut me passé d'execcommand et donc je fait la meme chose. Voici mon code, qui est semblable a ce qui a deja ete donné. Ceci pour FireFox: var selObj = document.getElementById('Saisie').contentWindow.getSelection(); var start = selObj.anchorOffset; alert(start); var end = selObj.focusOffset; alert(end); var innerValue = tag.contentDocument.body.textContent; var newStr = innerValue.substr(0,start); newStr+='<'+balise+'>' + selObj + ''; newStr+= innerValue.substr(end,innerValue.length); tag.contentDocument.body.innerHTML = newStr; Mais j'ai remarqué un soucis que je n'arrive pas a corrigé, en faite anchorOffset et focusOffset, sont géné par les balise deja presente. Je m'explique, le texte au depart: 123456789 Je selectionne disons 567 et je le met en gras j'obtient bien ceci: 123456789 Mais si maintenant je selectionne 89 pour les mettres en italique voici ce que j'obtient: 123893456789 Comme on le remarque la balise b a disparu et en plus le texte n'est pas au bon endroit :( Si quelqu'un a une solution ;) Merci

cs_bultez · Answer

Bonjour,

quelques éléments de réponses ici : http://www.javascriptfr.com/infomsg_SELECTIONSTART-DANS-IFRAME_915778.aspx#22

c'est "la suite" de cette question.

et il y a au moins une solution ici :
http://www.javascriptfr.com/codes/DOCUMENT-SELECTION-POUR-FF-FIREFOX_42090.aspx

j'espèrait une solution "plus simple" pour mon petit cerveau, mes
    petites capacités... mais loin d'être persuadé que cela soit possible "facilement"...

<hr />


Cordialement             Bul

Modifier la sélection dans un iframe

28 réponses

Votre réponse

Discussions similaires