Javascript 使用execCommand切换H1和h2

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

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

这会自动切换当前选择周围的b标记

带h1标签：

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

函数onHeading1Click（）{
document.execCommand（'formatBlock'，false'，）；
}

这只会将h1环绕在所选内容周围，但无法删除它。
还有别的办法吗？ 注意：它应该适用于

var h1Class='您的h1btn类'，
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'); 
}

removeH1Class='.remove-h1'；
$（文档）.on（'click'，h1Class，function（））{
$（this.removeClass（h1Class）.addClass（removeClass）；
onHeading1Click（）；
});
$（文档）。在（'click'，removeH1Class，function（）上{
$（this.removeClass（removeH1Class）.addClass（h1Class）；
onRemoveH1Click（）；
});
函数onHeading1Click（）{
document.execCommand（'formatBlock'，false'，）；
}
函数onRemoveH1Click（）{
document.execCommand（'formatBlock'，false，'p'）；
}

HTML

---

这是我的选择。这是CSS黑客和破坏语义，但它的作品

HTML

CSS

---

H1标签需要包装在单个支架中才能跨平台工作。

 <p><button type="button" id="h1-button">H1</button></p>
 <div id="edit-area" contenteditable="true">
     <h1>This is heading</h1>
     <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti.</div>
 </div>

$('#h1-button').click(function() {
    var html = $('#edit-area').html();
    document.execCommand('formatBlock', false, 'h1');
    if(html == $('#edit-area').html()) {
        document.execCommand('formatBlock', false, 'div');
    }
});

<p><button type="button" id="h1-button">H1</button></p>
<div contenteditable="true">
    <sup>This is heading</sup>
    <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien.</div>
</div>

$('#h1-button').click(function() {
    document.execCommand('superscript', false, null);
});

sup{
    vertical-align: super;
    display: block;
    font-size: 2em;
    line-height: 1em;
    margin: 20px 0;
    position: relative;
    top: 0;
}