使用 execCommand 切换 H1 和 h2答案

【问题标题】：Toggling H1 and h2 with execCommand使用 execCommand 切换 H1 和 h2
【发布时间】：2014-03-01 18:32:09
【问题描述】：

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

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

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

带有h1标签：

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

这仅将 h1 包裹在所选内容周围，但无法将其删除。
还有其他方法可以解决这个问题吗？注意：它应该可以工作，即

【问题讨论】：

标签： javascript jquery html editor

【解决方案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'); 
}

【讨论】：

【解决方案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

【讨论】：

H1 标签需要用单括号括起来才能跨平台工作。

【解决方案3】：

这是我的选择。这是 CSS hack 并破坏了语义，但它确实有效。

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

【讨论】：