Форум

eddin · #1 (**permalink**) 26.06.2016, 21:12

Добрый день.
Есть скрипт, который добавляет ссылку при копировании. Но после того, как копирование произошло, в браузере слетает выделение ранее выделенного текста. Как я понимаю, это происходит из-за "selectAllChildren". Можно как-то этого избежать, чтобы выделение не слетало?
Просто у меня пока есть только вариант, что надо определить и запомнить позицию изначального выделения, чтобы затем его вернуть с помощью addRange. Например, вот:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-</title>
 </head>
 <body>
<script type="text/javascript">
function addLink() {

    var selection = window.getSelection(),
        pagelink = '<br /><br /> Read more at: ' + document.location.href,
        copytext = selection + pagelink,
        newdiv = document.createElement('div');

    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);

 var range = document.createRange(),
	 elem = document.getElementById("sel_range");

	 range.setStart(elem.firstChild, 0);
	 range.setEnd(elem.firstChild, 15);
	 selection.removeAllRanges();
	 selection.addRange(range);
}

document.addEventListener('copy', addLink);

</script>
<p id="sel_range">текст текст текст</p>
<p>текст текст текст</p>
<p>текст текст текст</p>
<p>текст текст текст</p>
 </body>
</html>

Но что-то не могу сообразить как получить setStart и setEnd не для конкретного, а для произвольного выделения на странице, без привязки к ID элементов и с учетом того, что выделение может затрагивать несколько элементов.
А может всё же можно всё еще проще сделать?

UPD: Только что обнаружил, что в связи с добавлением в функцию части кода, отвечающего за повторное выделение, перестало работать добавление ссылки, пока не пойму почему.
ps Название в тему не добавилось почему-то, вроде не забыл его добавить при создании...

Decode · #2 (**permalink**) 27.06.2016, 00:52

eddin,

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum accusamus veritatis necessitatibus excepturi, reiciendis voluptatem dolores cumque omnis. Quidem ullam earum eum soluta dolore molestias impedit, distinctio dolor perspiciatis, sunt.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam nesciunt doloribus ex vitae quibusdam alias quam, eos maiores, voluptates recusandae commodi magni incidunt aperiam qui rerum, ratione porro quas dolore?</p>

  <script>
    function addLink() {
      var selection = window.getSelection();
      var range = selection.getRangeAt(0);
      var pageLink = '<p>Read more at: <a href="' + location.href + '">' + location.href + '<a></p>';
      var copytext = selection.toString() + pageLink;
      var div = document.createElement('div');

      div.cssText = 'position: absolute; left: -99999px';
      div.innerHTML = copytext;
      document.body.appendChild(div);

      selection.selectAllChildren(div);

      setTimeout(function() {
        document.body.removeChild(div);
        selection.removeAllRanges();
        selection.addRange(range);
      }, 0);
    }
    
    document.addEventListener('copy', addLink);
  </script>
</body>
</html>

eddin · #3 (**permalink**) 27.06.2016, 07:27

Decode, спасибо огромное, всё работает!

Это называется "смотрю в книгу - вижу фигу". Курил же вчера, курил выделения https://learn.javascript.ru/range-textrange-selection Но в итоге с легкостью проморгал описание насчет getRangeAt(0).

А еще подскажите, пожалуйста, пару моментов.
1. Вот уважаемый Decode добавил toString(), но он точно нужен? Ведь потом мы добавляем текстовую строку (pageLink) и поэтому и так объект преобразуется в строку.
2. А как в данном случае более правильно selection.toString() или String(selection)?
3. Если добавить в BODY фоновый цвет (напр: style="background:#F1F1F1"), то при копировании в Хроме с последующей вставкой в Ворд вставляется и тот самый фоновый цвет, от которого потом не так просто избавиться, т.к. обычное "Цвет выделения текста" Ворда в этом случае не срабатывает. В IE и FF в этом плане получше, т.к. они фон не захватывают. Можно как-то это победить, чтобы фон в Хроме тоже не копировался? Ну или устанавливать его принудительно в белый цвет. Я, исходя из своей логики, попробовал вот так, ведь именно в этот div мы потом вставляем текст, который будет скопирован в буфер:

div.cssText = 'position: absolute; left: -99999px; background-color: #ffffff;';

Но видимо моя логика подсказала что-то не то, поэтому не работает...

Ps Я не js-кодер, поэтому может вам мои вопросы покажутся детскими. Сорри, если так. Просто это не моя специализация, но иногда приходится сталкиваться.

Decode · #4 (**permalink**) 27.06.2016, 14:13

Сообщение от eddin

А еще подскажите, пожалуйста, пару моментов.
1. Вот уважаемый Decode добавил toString(), но он точно нужен? Ведь потом мы добавляем текстовую строку (pageLink) и поэтому и так объект преобразуется в строку.
2. А как в данном случае более правильно selection.toString() или String(selection)?

Можно и без него.

Сообщение от eddin

3. Если добавить в BODY фоновый цвет (напр: style="background:#F1F1F1"), то при копировании в Хроме с последующей вставкой в Ворд вставляется и тот самый фоновый цвет, от которого потом не так просто избавиться, т.к. обычное "Цвет выделения текста" Ворда в этом случае не срабатывает.

Вставь вначале в адресную строку браузера, потом из нее в Word.

eddin · #5 (**permalink**) 27.06.2016, 15:16

Сообщение от Decode

Вставь вначале в адресную строку браузера, потом из нее в Word.

Decode , спасибо! Но это скорее хак, а не выход. Да и форматирование слетит, что при копировании больших текстов будет сулить серьезные затраты по времени на его восстановление.

В общем хотелось бы полноценное решение если такое есть конечно. Не хочется думать, что браузер победит))) К тому же проблема не только в Хроме, но и Яндексе с Оперой. Видимо в Вебките дело.

Decode · #6 (**permalink**) 27.06.2016, 15:57

eddin, ну либо в любую песочницу (JS Bin, например), ПКМ -> Вставить как обычный текст.

eddin · #7 (**permalink**) 27.06.2016, 16:08

Сообщение от Decode

eddin, ну либо в любую песочницу (JS Bin, например), ПКМ -> Вставить как обычный текст.

Decode, да не, это понятно. Можно в тот же Блокнот вставить. Но дело в том, что тот скрипт, который я пишу, буду использовать не я. Поэтому потом объяснять всем, что надо в Блокнот вставлять - не дело. Если б я для себя делал, то проще гораздо бы было) Можно конечно всех обязать использовать FF или IE, но мне кажется это кощунство)

Форум

Справочник

Discord чат

Курсы javascript