使用execCommand切换H1和H2

Question

我有一个简单的文本编辑器，我想像使用粗体标签一样在当前选择周围切换h1标签。使用粗体标签，我可以：

function onBoldClick() {
   document.execCommand( 'bold', false );
}

这会自动在当前选择周围切换b标签。

使用h1标签：

function onHeading1Click() {
    document.execCommand('formatBlock', false, '<h1>'); 
}

这只会将h1环绕选择，但是无法删除它。
还有另一种解决方法吗？Nb：应该在

Answer 1

var h1Class = 'your h1 btn class',
    removeH1Class = '.remove-h1';

$(document).on('click', h1Class, function() {
    $(this).removeClass(h1Class).addClass(removeH1Class);
    onHeading1Click();
});

$(document).on('click', removeH1Class, function() {
    $(this).removeClass(removeH1Class).addClass(h1Class);
    onRemoveH1Click();
});

function onHeading1Click() {
    document.execCommand('formatBlock', false, '<h1>'); 
}
function onRemoveH1Click() {
    document.execCommand('formatBlock', false, 'p'); 
}