Javascript: запомнить выбранный диапазон текста

Я пытаюсь найти способ запоминания/сохранения текстового диапазона JScript, а затем применить его обратно к тексту и преобразовать его в выделение.Javascript: запомнить выбранный диапазон текста

Пример: в iframe, который находится в «designmode» и содержит текст «Это текст внутри кадра», пользовательские hilights/selects «is text».

Я могу прочитать этот выбор, используя все доступные методы диапазона. Пока нет проблем. Теперь нажатие кнопки создает другой iframe, содержащий тот же текст, что и первый, и первый iframe удаляется. В этом втором iframe я хочу выбрать тот же текст, который пользователь выбрал в первом кадре. Теперь проблемы начинаются: объект диапазона из iframe 1 не может использоваться для iframe 2. Как-то объект диапазона, кажется, привязан к его исходному элементу. Установка диапазона не имеет никакого эффекта или странных ошибок. Как я могу повторно выбрать все, что было выбрано?

Рене

Есть ли способ

источник

2010-10-05 Krumelur

Этот дополнительный iframe: копируете ли вы весь HTML из исходного iframe? –

Не копируя его, но мы можем предположить, что содержимое дополнительного iframe идентично. Поэтому мне почему-то нужно было знать, что было выбрано слово fith, или «третье изображение», или «второе слово и следующий абзац и следующая таблица», а затем выберите то же самое в дополнительном iframe. – Krumelur

мое изменение: добавлено несколько тегов –

Да, есть способ. textRange предоставляет множество методов/свойств, например, для определения позиции.

Итак, если вы говорите, это не настоящая копия, но идентичная, вы можете получить позиции frame1 и создать на них новый выбор в frame2.

Я играл с ним немного, вот результат:

<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

Обратите внимание, что это демо до сих пор является построить для MSIE только (вы написали, что хотите сделать это с помощью JScript ^^).

Но его также следует реализовать в других браузерах.

источник

2010-10-06 22:35:42

Это замечательно! Заставляет меня задаться вопросом, как мало я знаю о JScript! Я проверю, разрешает ли это для IE. Если да, я сделаю это для Firefox. Большое спасибо!! – Krumelur

Но, пожалуйста, объясните: чтобы выбрать что-то в IE, вы указываете абсолютную координату в пикселях, а IE знает, что выбрать из этих координат? Почему тогда необходимо отдельно обрабатывать объекты? Не все ли объект (ссылка, текстовый индекс, таблица, изображение)? – Krumelur

Эти объекты (например, изображения, формы-элементы) представляют собой другой тип диапазона в IE, «controlRange». Этот тип диапазона имеет свойства, отличные от textRange. Этот тип диапазона, например, не имеет свойств textRange для определения положения или начала/окончания диапазона. Эти диапазоны представляют собой нечто большее, чем textRange DOM-Element-Object/s. http://msdn.microsoft.com/en-us/library/ms537447%28VS.85%29.aspx –

Javascript: запомнить выбранный диапазон текста

ответ

Смежные вопросы