Question

所以基本上我做了一个体面的WYSIWYG编辑器，它完美无瑕。在发布它之前我需要的最后一件事是，如果我按下可编辑的文本，并且它已经有标签（粗体/斜体/下划线等），那么应该标记粗体按钮。

Atm如果我有一个粗体字： BETY 我想添加一个T，我将按下我想要的T并键入T.（T将按照我编码的方式自动加粗）。但是我没有关于标记粗体按钮的功能，因此用户意识到激活了粗体。

当我按下包含在标签中的单词时，是否有任何JS / jQuery事件触发？

Answer 1

如果您正在使用WYSIWYG编辑器的contenteditable属性，或者您正在使用JavaScript / JQuery代码，那么标签将被插入到页面中（因为它是WYSIWYG，我认为你做了上面提到的一个）它似乎是一个非常简单的问题，我将重定向到JQuery API选择器文档http://api.jquery.com/category/selectors/，以捕获您的标记和事件文档以挂钩好事件http://api.jquery.com/category/events/ http://api.jquery.com/click/

如果您的问题更复杂，并且您认为这些建议无法解决，请添加更多信息。

编辑：实际解决方案因为op的编辑器正在使用execCommand

当用户在您正在观看的文本上释放鼠标按钮（释放以便在单击和结束选择时触发），您将测试是否已在选择上执行了其中一个execCommand。在切换中，您手动触发此功能，以便实现按钮。有关可能命令的更多信息： http://msdn.microsoft.com/en-us/library/ms536679%28v=vs.85%29.aspx https://developer.mozilla.org/fr/docs/Rich-Text_Editing_in_Mozilla#Example.3A_a_simple_but_complete_Rich_Text_Editor

$('div.editable').mouseup(function() {
    if(document.queryCommandState('bold')){
        $('#toolbox #bold').wrap('<b></b>');
    } else {
        if($('#toolbox #bold').parent().is('b')) {
            $('#toolbox #bold').unwrap();
        }
    }
});

function ToggleBold() {
document.execCommand('bold',null,false);
        $('#colorpalette').fadeOut('fast');
    $('div.editable').trigger('mouseup');
}

Answer 2

function ToggleBold() {
    document.execCommand('bold',null,false);
    $('b').on("click",function(){
        //make the B in toolbox bold
    });
}

我是如何解决它的：P很容易

编辑：NEVERMIND这不按预期工作= /

创建WYSIWYG编辑器 - 检查所选文本是否有标签？

2 个答案: