Добрый день. Есть скрипт, который добавляет ссылку при копировании.
Добрый день.
Есть скрипт, который добавляет ссылку при копировании. Но после того, как копирование произошло, в браузере слетает выделение ранее выделенного текста. Как я понимаю, это происходит из-за "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,
<!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>
|
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-кодер, поэтому может вам мои вопросы покажутся детскими. Сорри, если так. Просто это не моя специализация, но иногда приходится сталкиваться. |
Цитата:
Цитата:
|
Цитата:
В общем хотелось бы полноценное решение если такое есть конечно. Не хочется думать, что браузер победит))) К тому же проблема не только в Хроме, но и Яндексе с Оперой. Видимо в Вебките дело. |
eddin, ну либо в любую песочницу (JS Bin, например), ПКМ -> Вставить как обычный текст.
|
Цитата:
|
| Часовой пояс GMT +3, время: 16:13. |