Javascript: se souvenir de la plage sélectionnée d'un texte

J'essaie de trouver un moyen de mémoriser/stocker un Textrange JScript, puis de l'appliquer à un texte et de le convertir en une sélection.Javascript: se souvenir de la plage sélectionnée d'un texte

Un exemple: dans une iframe qui est en "mode de conception" et qui contient le texte "Ceci est du texte à l'intérieur du cadre", l'utilisateur hilights/sélectionne "est un texte".

Je peux lire cette sélection en utilisant toutes les méthodes de plage disponibles. Pas de problème jusqu'à présent. Maintenant, en cliquant sur un bouton crée crée un autre iframe contenant le même texte que le premier et le premier iframe est supprimé. Dans ce second iframe, je veux sélectionner le même texte que l'utilisateur sélectionné dans la première image. Maintenant, les problèmes commencent: l'objet range de iframe 1 ne peut pas être utilisé pour iframe 2. D'une certaine manière, l'objet range semble être lié à son élément source. La définition de la plage n'a aucun effet ou des erreurs étranges. Comment puis-je re-sélectionner ce qui a été sélectionné?

René

est-il un moyen de

Source

2010-10-05 Krumelur

Cette iframe supplémentaire: copiez-vous tout le code HTML de l'iframe original? –

Ne pas le copier mais nous pouvons supposer que le contenu de l'iframe supplémentaire est identique. Donc d'une manière ou d'une autre je devrais savoir "le mot fith a été choisi", ou "la troisième image", ou "le deuxième mot et le paragraphe suivant et le tableau suivant" et puis sélectionner les mêmes choses dans l'iframe supplémentaire. – Krumelur

mon édition: ajouté quelques tags –

Oui, il y a un moyen. textRange fournit plusieurs méthodes/propriétés, par exemple pour déterminer la position. Donc si vous dites, ce n'est pas une vraie copie, mais identique, vous pouvez aller chercher les positions de frame1 et créer une nouvelle sélection dans frame2.

je jouais avec elle un peu, voici le résultat:

<html> 
<head> 
<title>title</title> 
<script type="text/jscript"> 
<!-- 

function cloneSelection() 
{ 
    if(!document.all || window.opera) 
    { 
    alert('this is an jscript-example for MSIE5+'); 
    return; 
    } 
    var editors=window.frames; 
     editors[0].focus();  

    //create 2 ranges in the first iframe 
    var r1=editors[0].document.selection.createRange(); 
    var r2=editors[0].document.selection.createRange(); 

    //checkout if a control is selected 
    if(editors[0].document.selection.type==='Control') 
    {  
    var obj=r1.item(0); 
    var objs=editors[0].document.body.getElementsByTagName(obj.tagName); 

    //iterate over the elements to get the index of the element 
    for(var i=0;i<objs.length;++i) 
    { 
     if(objs[i]===obj) 
     { 
     //create a controlRange, add the found control and select it 
     var controls=editors[1].document.body.createControlRange(); 
      controls.add(editors[1].document.body.getElementsByTagName(obj.tagName)[i]); 
      controls.select() 
     return; 
     } 
    } 
    //control-branch done 
    } 

    //no control was selected, so we work with textRanges 
    //collapse the 2nd range created above 
    r2.collapse(false); 

    //store the positions of the 2 ranges 
    var x1=r1.offsetLeft; 
    var y1=r1.offsetTop; 
    var x2=r2.offsetLeft; 
    var y2=r2.offsetTop; 

    //create ranges in the 2nd iframe and move them to the stored positions 
    var r2=editors[1].document.body.createTextRange(); 
     r2.moveToPoint(x1,y1); 
    var r3=editors[1].document.body.createTextRange(); 
     r3.moveToPoint(x2,y2); 

    //set the move the end of the first range to start of the 2nd range 
    r2.setEndPoint('EndToStart',r3); 

    //select the first range 
    r2.select();

}

//fill the iframes and make them editable 
window.onload=function() 
{ 
    var editors=window.frames; 
    for(var i=0;i<frames.length;++i) 
    { 
    with(frames[i].document) 
    { 
     open(); 
     write('This is text is an image '+ 
      '<br/><img src="http://sstatic.net/ads/img/careers-ad-header-so.png"><br/>'+ 
      'this is inside this frame'); 
     designMode='On'; 
     close(); 
    } 
    } 
} 
//--> 
</script> 
<style type="text/css"> 
<!-- 
iframe{width:400px;height:200px;} 
--> 
</style> 
</head> 
<body> 
    <center> 
    <iframe src="about:blank"></iframe> 
    <input type="button" value="cloneSelection()" onclick="cloneSelection()"> 
    <iframe src="about:blank"></iframe> 
    </center> 
</body> 
</html>

test with jsFiddle

Notez que cette démo jusqu'à présent est construit pour MSIE seulement (vous avez écrit que vous aimez le faire avec JScript ^^).

Mais il devrait aussi être possible de l'implémenter pour d'autres navigateurs.

Source

2010-10-06 22:35:42

C'est merveilleux! Je me demande comment je connais peu de choses sur JScript! Je vais vérifier si cela résout pour IE. Si oui, je vais le faire fonctionner pour Firefox. Merci beaucoup!! – Krumelur

Mais s'il vous plaît expliquer: pour sélectionner quelque chose dans IE, vous spécifiez la coordonnée absolue en pixels et IE sait quoi choisir à partir de ces coordonnées? Pourquoi est-il alors nécessaire de traiter les objets séparément? Tout n'est pas un objet (un lien, un textnode, une table, une image)? – Krumelur

Ces objets (par exemple des images, des éléments de formulaire) représentent un autre type de plage dans IE, "controlRange". Ce type de plage a des propriétés différentes de textRange. Ce type de plage n'a par exemple pas les propriétés d'un textRange pour déterminer la position ou déplacer le début/la fin de la plage. Ces plages représentent plus qu'un textRange le DOM-Element-Object/s. http://msdn.microsoft.com/en-us/library/ms537447%28VS.85%29.aspx –

Javascript: se souvenir de la plage sélectionnée d'un texte

Répondre

Questions connexes