如何在按回车时停止contentEditable ="true"插入<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');
}