В Opera не генерируется событие click при выделении текста.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Работа с выделениями</title>
<style type="text/css">
body {
color: #000;
position: relative;
}
.paragraph {
border: 1px solid #000;
}
.quote-popup-menu {
position: absolute;
padding: 10px;
background: #ffc;
border: 1px solid #000;
}
.quote-popup-menu .btn:hover {
color: #fff;
background: #33c;
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="paragraph">Proin gravida auctor velit vitae facilisis. Vestibulum ac lacus vitae nunc vulputate sodales a eget augue. Quisque ornare enim a nibh ullamcorper volutpat. Nulla imperdiet gravida pulvinar. Proin consequat nisi sit amet augue convallis nec viverra nisl mollis. Nulla in orci metus? Morbi interdum ligula vitae tortor elementum sodales. Curabitur ut ante vitae lectus egestas commodo congue non tortor. Cras mi massa, vulputate id rhoncus ac, facilisis sed leo! Mauris purus urna; ultrices non sodales sed, molestie in neque. Vestibulum ullamcorper orci ac dolor commodo ac aliquam nunc ultrices. Aliquam dapibus congue massa, eleifend vestibulum ligula viverra vitae.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
<form action="">
<fieldset>
<textarea id="editor-text" name="editor-text" cols="50" rows="10"></textarea>
</fieldset>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var $Selection = {
standardsCompliant: typeof getSelection != "undefined",
get: function () {
return this.standardsCompliant ? getSelection() : document.selection;
},
getRange: function () {
return this.get()[this.standardsCompliant ? "getRangeAt" : "createRange"](0);
}
};
var $Range = {
standardsCompliant: $Selection.standardsCompliant,
stringify: function (range) {
return this.standardsCompliant ? range.toString() : range.text;
},
isCollapsed: function (range) {
return this.standardsCompliant ? range.collapsed : !range.htmlText.length;
},
getRootContainer: function (range) {
if (this.standardsCompliant) {
var root = range.commonAncestorContainer;
return root.nodeType == this.TEXT_NODE ? root.parentNode : root;
}
return range.parentElement();
}
};
var quote = function ($) {
return {
template: [
'<blockquote>',
'<p>',
'{QUOTE}',
'</p>',
'</blockquote>',
'\r\n'
].join(""),
templateRegExp: /{QUOTE}/,
menuTemplate: [
'<div class="quote-popup-menu hidden">',
'<span class="btn">Вставить цитату</span>',
'</div>'
].join(""),
root: "body",
text: ".paragraph",
btn: ".btn",
textarea: "#editor-text",
done: false,
range: null,
$menu: null,
$btn: null,
$textarea: null,
init: function (cfg) {
if (this.done) {
return;
}
this.done = true;
$.extend(this, cfg)
this.$textarea = $(this.textarea);
this.createMenu();
this.initEvents();
},
initEvents: function () {
var quote = this;
$(document).mousedown(function () {
quote.hideMenu();
}).mouseup(function (event) {
quote.showMenu(event);
});
this.$btn.bind("click mousedown mouseup", function (event) {
if (event.type == "click") {
quote.paste();
}
event.stopPropagation();
});
},
createMenu: function () {
this.$menu = $(this.menuTemplate);
this.$btn = this.$menu.find(this.btn);
this.$menu.appendTo(this.root);
},
paste: function (event) {
this.hideMenu();
this.$textarea.val(this.$textarea.val() + this.template.replace(this.templateRegExp, $Range.stringify(this.range)));
},
saveSelection: function () {
this.range = $Selection.getRange();
},
needShowMenu: function () {
this.saveSelection();
var $root = $($Range.getRootContainer(this.range));
return !$Range.isCollapsed(this.range) && ($root.is(this.text) || $root.parent(this.text).length);
},
showMenu: function (event) {
if (!this.needShowMenu()) {
return;
}
this.$menu.css({
top: event.pageY + "px",
left: event.pageX + "px"
}).show();
},
hideMenu: function () {
this.$menu.hide();
}
};
}(jQuery);
$(function () {
quote.init();
});
</script>
</body>
</html>