Добавить что-то к выделенному тексту с помощью jquery - PullRequest
Новая
       64

Добавить что-то к выделенному тексту с помощью jquery

1 голос
/ 15 февраля 2012

Я пытаюсь добавить тег <a> к выделенному тексту, когда пользователь щелкает по нему правой кнопкой мыши. Я искал по стеку, совпадений не найдено.

Ответы [ 2 ]

5 голосов
/ 15 февраля 2012

Надежно работать с выделенным текстом довольно сложно. Библиотека Тима Дауна Rangy может быть полезна там, он сглаживает многие специфические особенности браузера. (Даже если вы не хотите использовать библиотеку, вы можете изучить ее для методов.)

Одно из core Rangy окружает выделенный текст элементом, используя метод RangyRange#surroundContents . Код для этого в демо выглядит следующим образом: 

function getFirstRange() {
    var sel = rangy.getSelection();
    return sel.rangeCount ? sel.getRangeAt(0) : null;
}
function surroundRange() {
    var range = getFirstRange();
    if (range) {
        var el = document.createElement("span");
        el.style.backgroundColor = "pink";
        try {
            range.surroundContents(el);
        } catch(ex) {
            if ((ex instanceof rangy.RangeException || Object.prototype.toString.call(ex) == "[object RangeException]") && ex.code == 1) {
                alert("Unable to surround range because range partially selects a non-text node. See DOM Level 2 Range spec for more information.\n\n" + ex);
            } else {
                alert("Unexpected errror: " + ex);
            }
        }
    }
}

Вы бы сделали то же самое, но с a вместо span.

0 голосов
/ 15 февраля 2012

EDIT Заметил, что вы говорили о выделенном тексте слишком поздно.

Может быть, вы могли бы проверить document.elementFromPoint , я думаю, что поддерживается только в FireFox.

Вы ищете что-то вроде этого:

HTML: 

<div id="rightclick">
Right Click me:   
</div>​

Javascript: 

$("#rightclick").mousedown(function(e) {
    if (e.which === 3) {
        $(this).append("<a href='http://www.google.com'>Link</a>");
    }
});
​

См. Демонстрационную версию: http://jsfiddle.net/BgW7x/2/

...