单击 HTML 后如何保持选择？

Question

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

Answer 1

您需要使按钮不可选择，这可以在大多数浏览器中使用 CSS 以及 IE 和 Opera 中的unselectable属性来完成。 就是这样：

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

Answer 2

另一个，可能更好，实现这一目标是在“粗体”按钮（这是在Chrome中清除时的“粗大”按钮上调用'WirectDefault（）'）：

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

Answer 3

此功能可以帮助您：

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 。

=== 更新 ===

如果您的按钮不是<input type="button/submit" ... />或<button ...> ，您必须在每次点击后记住所选文本：

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

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

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

另请参阅我的新jsfiddle 。

Answer 4

一个想法是跟踪选择（通过侦听 mouseup 事件），以便您的代码知道在特定时刻突出显示的内容，因此您可以在单击按钮时对其执行某些操作...

这篇文章有一些很好的代码示例。