contentEditable - execCommand 'heading' 仅适用于 Firefox答案

【问题标题】：contentEditable - execCommand 'heading' only working in FirefoxcontentEditable - execCommand 'heading' 仅适用于 Firefox
【发布时间】：2012-09-26 13:11:42
【问题描述】：

我有以下代码将所选文本包装在 H2 标记中。

问题是，它只适用于 Firefox（虽然我还没有在 IE 中测试过）。它不适用于 Safari 或 Chrome。

是我遗漏了什么还是这个功能不兼容所有浏览器？

<button onclick="document.execCommand('heading',false,'h2');">heading</button>

<div class="editable" contentEditable>
    <p>Add content here...</p>
</div>

【问题讨论】：

标签： html contenteditable execcommand html-heading

【解决方案1】：

[注意：document.execCommand 及其功能现已得到广泛支持。]

您可能已经找到了答案，但是由于我遇到了同样的问题，所以我会发布这个：

这不是一个被广泛支持的功能。 如此处所示： http://www.quirksmode.org/dom/execCommand.html#t013

看来你必须使用formatBlock：

document.execCommand('formatBlock', false, '<'+dataValue+'>');  //dataValue must be h2 in your case

【讨论】：

【解决方案2】：

要创建 H2 标签，您需要使用

document.execCommand('formatBlock',false,'h2')

它会起作用的。

【讨论】：