如何停止contentEditable =＆＃34; true＆＃34;按返回时插入<div>而不是<p>？

Question

我有一个div

<div contentEditable="true">
    <h1> My headline</h1>
</div>

如果我正在编辑<h1>标签内的文字，并按回车键，则会在其下方添加新的div，而不是在输入返回时通常插入的正常段落标记

成功：

<div contentEditable="true">
    <h1> My headline edited</h1>
    <div> i tapped return</div>
</div>

我真正想要的是

<div contentEditable="true">
    <h1> My headline edited</h1>
    <p> i tapped return</p>
    <p> return again</p>
</div>

奇怪的是，通常当你在某处写字并按回车时，它会添加一个新的<p>，但在编辑<h1>时却不会。是否可以使用Javascript / Jquery / Html5修复此问题？

我在iOS设备上使用Safari

Answer 1

使用 p 在 onkeyup 中添加格式拦截器会强制contenteditable（div）在返回时添加<p>标记。

editable.onkeyup = (e)=> {
    e = e || window.event
    if (e.keyCode === 13)
        document.execCommand('formatBlock', false, 'p');
}