Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2016, 21:12
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 56

Добрый день. Есть скрипт, который добавляет ссылку при копировании.
Добрый день.
Есть скрипт, который добавляет ссылку при копировании. Но после того, как копирование произошло, в браузере слетает выделение ранее выделенного текста. Как я понимаю, это происходит из-за "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 Название в тему не добавилось почему-то, вроде не забыл его добавить при создании...

Последний раз редактировалось eddin, 26.06.2016 в 21:24.
Ответить с цитированием
  #2 (permalink)  
Старый 27.06.2016, 00:52
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 565

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>
Ответить с цитированием
  #3 (permalink)  
Старый 27.06.2016, 07:27
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 56

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-кодер, поэтому может вам мои вопросы покажутся детскими. Сорри, если так. Просто это не моя специализация, но иногда приходится сталкиваться.
Ответить с цитированием
  #4 (permalink)  
Старый 27.06.2016, 14:13
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 565

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

Сообщение от eddin
3. Если добавить в BODY фоновый цвет (напр: style="background:#F1F1F1"), то при копировании в Хроме с последующей вставкой в Ворд вставляется и тот самый фоновый цвет, от которого потом не так просто избавиться, т.к. обычное "Цвет выделения текста" Ворда в этом случае не срабатывает.
Вставь вначале в адресную строку браузера, потом из нее в Word.
Ответить с цитированием
  #5 (permalink)  
Старый 27.06.2016, 15:16
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 56

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

В общем хотелось бы полноценное решение если такое есть конечно. Не хочется думать, что браузер победит))) К тому же проблема не только в Хроме, но и Яндексе с Оперой. Видимо в Вебките дело.
Ответить с цитированием
  #6 (permalink)  
Старый 27.06.2016, 15:57
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 565

eddin, ну либо в любую песочницу (JS Bin, например), ПКМ -> Вставить как обычный текст.
Ответить с цитированием
  #7 (permalink)  
Старый 27.06.2016, 16:08
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 56

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

Последний раз редактировалось eddin, 27.06.2016 в 16:10.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинок при клике ссылку illuminat jQuery 3 14.09.2012 16:50
Скрипт, при наведении на ссылку открывает 4 картинки Игорек Элементы интерфейса 7 01.09.2012 21:01
Cкрипт сохранения при клике на ссылку alerzo Events/DOM/Window 4 08.05.2011 20:39
Нужен скрипт, подсвечивающий ссылку при наведение на картинку Vatrushka Общие вопросы Javascript 2 26.04.2011 08:02
Добрый день возникли проблемы при установке фокуса в Mozilla Даниэль Ноубл Общие вопросы Javascript 7 23.04.2010 23:50