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

Question

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

Answer 1

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

Одна из основных демонстраций 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,

Answer 2

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/