выбор текста и qtip или такая подсказка

Question

Я пытаюсь добиться чего-то с помощью метода window.getSelection(). Я хотел получить выделенный текст в подсказке с некоторыми действиями, такими как редактирование выделенного текста или удаление выделенного текста, а также добавление некоторых тегов, а также комментарии к этому выбору. Аналогично x-editable. В x-editable мы не можем редактировать текст напрямую.

http://jsfiddle.net/ravimallya/ZXPSY/9/ Это скрипка, с которой я работаю. Я пытался получить то, что хотел, через Annotator, но это не работает в IE7 или 8. И это сложно интегрировать с веб-сайтом asp.net.

Я пробовал решение, упомянутое в Is it possible to show a qtip with a function call?, но оно не работает. другой аналогичный вопрос How to display tooltip next to selected text? не имеет ответа или правильного решения.

Bootstrap Popover, или qTip2 с настраиваемым контентом или любыми другими решениями или исправлением текущей скрипки.

Answer 1

Я нашел свое собственное решение, используя диалог jqueryUI. Поделитесь им. Это может помочь другим, которые пытаются достичь того же. Необходимо включить jquery и jqueryUI-библиотеку. Позже используйте следующий код и скрипт.

<div id="text"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam eros non odio fringilla, placerat feugiat turpis gravida. Vivamus ac porttitor metus. Aliquam a facilisis erat. Morbi a nisi nibh. Vestibulum volutpat gravida eros. Ut in tortor at magna gravida consectetur eget at dui. Vivamus eget justo eu libero mattis interdum. Morbi iaculis lorem ut felis commodo accumsan. Phasellus a tristique tellus, at lobortis neque. Proin quis tempus est. Morbi dignissim tempor justo at fringilla. Proin sit amet tortor mattis, euismod est eu, volutpat mauris.</p> 
</div> 

сценарий

if (!window.mSelect) { 
    mSelect = {}; 
} 
mSelect.Selector = {}; 
mSelect.Selector.getSelected = function() { 
    var txt = ''; 
    if (window.getSelection) { 
     txt = window.getSelection(); 
    } else if (document.getSelection) { 
     txt = document.getSelection(); 
    } else if (document.selection) { 
     txt = document.selection.createRange().text; 
    } 
    return txt; 
}; 

mSelect.Selector.mouseup = function() { 
    var st = mSelect.Selector.getSelected(); 
    if (st != '') { 
     $("#dialog-modal").dialog({ 
      modal: true, 
      title: 'You selected ' + st, 
      buttons: { 
       "Add": function() { 

       } 
      } 
     }); 
    } 
    else { 
     alert("select some text"); 
    } 
}; 
$(function() { 
    $('#text').bind("mouseup", mSelect.Selector.mouseup); 
}); 

В add функции, мы можем опубликовать выбранное значение с помощью AJAX.

Однако, если у кого-то есть хорошее решение, чем у этого (показывая подсказку вместо диалога), пожалуйста, дайте мне знать.