单击HTML后如何保持选择？

我正在编写WYSIWYG编辑器（不能使用类似TinyMCE的东西 – 必须自己编写代码），我希望用户能够通过在HTML中添加标签将文本设置为粗体，下划线，链接等。 我遇到的问题是，当用户选择可编辑div中的文本然后单击“粗体”按钮时，它无法找到选择，因为已经取消选择该选择，因为发生了单击事件。 我怎么能阻止这个？ 有一个更好的方法吗？

Answer 1

此function可以帮助您：

jQuery.fn.getSelectedText = function() { var sSelectedText = ""; // all browsers, except IE before version 9 if (window.getSelection) { var sTagName = this.get(0).tagName.toLowerCase(); sSelectedText = ( sTagName == 'input' || sTagName == 'textarea' ? this.val().substring ( this.get(0).selectionStart , this.get(0).selectionEnd ) : document.getSelection().toString() ); } // Internet Explorer before version 9 else { if (document.selection.createRange) { sSelectedText = document.selection.createRange().text; } } return sSelectedText; } 

另见我的jsfiddle 。

===更新===

如果您的按钮不是或 ，则必须在每次点击后记住所选文本：

 var sSelectedText = ''; $('body').click(function() { sSelectedText = $('#text').getSelectedText(); }); $('body').dblclick(function() { sSelectedText = $('#text').getSelectedText(); }); 

在按钮上单击所选文本在sSelectedText中：

 $('#button').click(function(e) { alert(sSelectedText); }); 

另见我的新jsfiddle 。

Answer 2

您需要使按钮不可选，这可以通过大多数浏览器中的CSS和IE和Opera中的不可选属性来完成。 这是如何做：

如何禁用使用CSS突出显示文本？

Answer 3

实现这一目标的另一种可能更好的方法是在’Bold’按钮的’mousedown’事件上调用’preventDefault（）’（当选择被清除时 – 至少在Chrome中）：

 $('div.boldButton').mousedown(function(event) { event.preventDefault(); }); 

Answer 4

一个想法是跟踪选择（通过监听mouseup事件），以便你的代码知道什么是突出显示和给定的时刻，所以当你点击按钮时你可以用它做点什么…

本文有一些很好的代码示例。