Хочу в движок добавить подсказку "Цитировать" при выделении текста, который будет написан в блоке определённого класса. Как на этом форуме -- удобно.
Подскажите, может кто знает как реализовать на jQuery.
Как вывести подсказку при выделении текста -- кроссбраузерно?
11.09.2011, 16:07
Den1xxx
Ап!
14.09.2011, 13:39
pavelsc
var txt = '';
if (window.getSelection)
{
txt = window.getSelection();
}
else if (document.getSelection)
{
txt = document.getSelection();
}
else if (document.selection)
{
txt = document.selection.createRange().text;
}
else return;
Вот кроссбраузерно. Осталось повесить на onmouseup, и в точке mouseup сгенерить окошко цитировать если txt не пустая строка.
Из этого г...на на сделаешь того что нужно.
Подсказка следует за мышкой, следовательно мышкой нельзя нажать на текст в подсказке.
09.10.2011, 12:50
pavelsc
Den1xxx, я же вам 95 процентов кода написал и идею на 100% рабочую, там две строчки дописать то нужно.
09.10.2011, 18:12
Den1xxx
Цитата:
Сообщение от pavelsc
Den1xxx, я же вам 95 процентов кода написал и идею на 100% рабочую, там две строчки дописать то нужно.
Вы написали как найти выделенный текст в DOM.
Для дальнейшей вставки текста в редактор, например.
Но это у меня есть и давно работает.
Я же просил вывести подсказку при выделении текста — имеющиеся решения подсказок следуют за курсором, а такое тешение как здесь я не нашёл.
Вот что нужно:
Цитата:
Сообщение от Den1xxx
Как вывести подсказку при выделении текста -- кроссбраузерно?
И у меня пока не получилось.
10.10.2011, 03:46
pavelsc
Den1xxx, да не верю я в то что кроссбраузерно не получилось. Если бы это было хитро и сложно - модеры бы уже подсказали.
Вот скажите мне где у вас это не работает?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Главная</title>
<!-- Begin Stylesheets -->
<style type="text/css">
body{
margin:0; padding:0;
}
#replytext{
position:relative;
width:600px;
margin:0;
height:150px;
}
</style>
<!-- End Stylesheets -->
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dui a lectus porttitor laoreet ut ac arcu. Etiam ut quam odio. Sed lobortis dapibus libero hendrerit blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed libero quam, quis condimentum dolor. Aliquam erat volutpat. Aliquam quis lacinia erat. Nam faucibus malesuada erat. Aliquam at diam mollis dui fermentum placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Praesent cursus, elit quis commodo aliquet, tortor orci pellentesque arcu, in sollicitudin urna orci at libero. Sed lobortis orci ut metus bibendum non varius augue suscipit. Maecenas eget felis mi. Duis ac tortor lectus, quis suscipit mauris. Donec luctus ornare est eget mollis. Duis quis ultrices lacus. Quisque hendrerit semper magna, vitae consequat sem porta quis. Nunc pellentesque elit in sem luctus pulvinar. Pellentesque non justo eros. Cras sodales volutpat nulla, et gravida est faucibus eu. Nam non pulvinar tortor. Aliquam erat volutpat. Nam vehicula elit accumsan nisl fringilla sit amet viverra nibh convallis. Ut velit turpis, scelerisque nec volutpat sit amet, vestibulum in arcu. Pellentesque semper arcu pretium lorem convallis accumsan. Donec egestas risus vitae est vulputate elementum.
Phasellus euismod cursus egestas. Nunc at libero ipsum, id volutpat elit. Curabitur euismod gravida nisl id tincidunt. Fusce at dolor lacus. Suspendisse non sapien ac ante consequat iaculis. Curabitur varius elit sagittis massa luctus posuere. Ut massa libero, tristique nec adipiscing sit amet, malesuada sit amet odio. Quisque condimentum, nisl in volutpat euismod, odio purus congue arcu, quis iaculis erat ante vitae eros.
Suspendisse egestas tellus tempor velit egestas sit amet porttitor metus bibendum. Maecenas molestie velit vel justo faucibus id venenatis massa consequat. Duis in ligula et lectus placerat tristique accumsan in mi. Nulla est mi, imperdiet eu gravida ac, rhoncus non velit. Sed molestie erat non dui tempor eget congue sapien sollicitudin. Sed convallis nunc et diam scelerisque sed pulvinar nisl posuere. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in nisl sed velit tempor imperdiet a eu odio. Curabitur a magna dapibus tellus rutrum tincidunt porttitor a elit. Aenean sodales, risus ut euismod pellentesque, nulla lacus rutrum dolor, non luctus sapien dolor ac libero. Quisque a sem id diam elementum facilisis. Nam vitae pretium ante. Fusce accumsan neque eget nibh porta vitae lacinia nisi fringilla.
Ut eget eros dolor, quis cursus risus. Fusce at ligula odio. Suspendisse potenti. Nulla tempor, urna non vehicula lobortis, mauris urna rutrum dui, id ultricies quam urna quis ipsum. Cras luctus lorem non nulla volutpat iaculis. Vestibulum at leo risus. Nullam egestas dolor vel lorem euismod ultrices. Morbi leo odio, tempus vel tempus et, dapibus eu urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean luctus libero vitae risus iaculis at fringilla lacus interdum. Pellentesque tristique elit id odio varius feugiat. Quisque ut placerat lacus. Morbi id enim ut magna placerat molestie mattis et sapien. Fusce eu faucibus ante.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nec commodo libero. Integer vehicula lorem vitae dui suscipit bibendum. Nam porta, lorem sit amet volutpat fringilla, tortor magna fermentum enim, in condimentum est justo eu odio. Vestibulum euismod aliquam diam, sit amet euismod odio laoreet quis. Nulla in nibh eu dolor auctor molestie at non diam. Phasellus aliquam dictum tincidunt. Maecenas pulvinar laoreet tellus, sagittis condimentum tellus tristique vel. Mauris condimentum, erat quis scelerisque auctor, massa dolor elementum tellus, a interdum purus elit dapibus augue.
Nullam convallis bibendum imperdiet. Integer elementum gravida odio, ac dapibus turpis posuere in. Mauris pharetra sodales ligula eget vulputate. Phasellus vestibulum molestie lacinia. Aenean consequat, nibh vel convallis egestas, eros velit scelerisque nibh, et gravida tellus elit id purus. Nunc non turpis vel nunc lacinia rutrum. Pellentesque mollis pharetra neque, nec lacinia dui elementum sit amet.
Duis tincidunt, mauris adipiscing luctus ornare, odio libero rutrum dolor, nec pretium sapien elit vitae urna. Nullam lobortis viverra magna ac sodales. Donec pretium porta nulla sit amet venenatis. Vivamus a purus massa, ac pharetra augue. Nulla odio nulla, scelerisque congue iaculis quis, dapibus vitae sapien. Sed fringilla luctus libero. Nullam placerat malesuada tempus. Mauris posuere, mauris vel auctor posuere, nulla justo dapibus massa, ac tristique risus felis in velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras at dui quis enim lobortis condimentum et et augue. Vestibulum quis ipsum sed felis mollis consectetur. Phasellus porttitor dignissim metus eget placerat. Ut a augue vitae purus molestie blandit ac eu elit. Pellentesque nec dolor ac turpis sagittis aliquam. Praesent interdum, justo mattis iaculis egestas, odio dui placerat nisi, a suscipit justo quam non enim. Nunc cursus est ut nibh dapibus fringilla. Sed convallis ipsum vel quam posuere a eleifend velit porta. Ut blandit turpis eget orci faucibus mattis. Nulla faucibus rutrum odio, ac luctus magna semper non. Donec vulputate quam vitae leo pellentesque a pulvinar lorem consectetur. Proin quis magna metus. Duis pellentesque nisi cursus purus semper sollicitudin at id mauris.
Curabitur lacinia nibh non tellus ultricies ut porta lectus blandit. Sed eu est nunc, vel luctus ligula. Aliquam fermentum mi ac erat dapibus rhoncus. Sed faucibus laoreet fermentum. Suspendisse varius, enim tempor euismod tempus, ligula lectus vehicula velit, sed iaculis urna odio in lorem. Donec vitae posuere eros. Aliquam erat volutpat. Nam nulla tortor, accumsan ut dapibus in, rhoncus quis tellus. Maecenas vitae mi rhoncus tellus fermentum tincidunt. Donec volutpat rutrum orci suscipit placerat.
</div>
<div class="twrap"><textarea id="replytext"></textarea></div>
<div id="popUpBox">Цитировать</div>
</body>
<!-- Begin JavaScript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($) {
var $txt = '';
$('.content').bind("mouseup", function(e){
if (window.getSelection){
$txt = window.getSelection();
}
else if (document.getSelection){
$txt = document.getSelection();
}
else if (document.selection){
$txt = document.selection.createRange().text;
}
else return;
if ($txt!=''){
$('#popUpBox').css({'display':'block', 'left':e.pageX-60+'px', 'top':e.pageY+5+'px'});
}
});
Спасибо, это то что нужно!
Не имея опыта в яваскрипте и желания изучать jQuery по-настоящему, я хотел адаптировать готовые решения, но не мог ничего нагуглить рабочего.
А тут всего пару строк кода. В закладки, однозначно!
Спасибо ещё раз!
//upd: уже добавил себе в форум — работает! Благодаря pavelsc, из редактора движка скоро исчезнет кнопка "Цитировать выделенное", нерационально использовавшая место!
10.10.2011, 10:52
pavelsc
Den1xxx, да не за что). jQuery стоит изучить хотя бы потому, что в нем уже учтена кроссбраузерность и есть ajax. Да хотя бы почитать доки, и через неделю уже придет мысль "А проще скачать готовое или самому написать?"