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

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

2 голосов
/ 06 октября 2010

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

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

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

1 Ответ

1 голос
/ 07 октября 2010

Да, есть способ.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>

тест с jsFiddle

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

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

...