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'); 
}

Answer 2

HTML

 <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>

Javascript + jQuery

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

<强> JSFIDDLE DEMO

Answer 3

这是我的选择。它的CSS破解并破坏了语义，但它起作用。

HTML

<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>

Javascript + jQuery

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

CSS

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

<强> JSFIDDLE DEMO

使用execCommand切换H1和h2

3 个答案: