我正在开发一个在线 HTML 文本编辑器,该编辑器具有格式化块的功能,例如添加粗体、斜体、代码块。
因此,contenteditable dev 默认会模仿按下时的样式和元素enter
。所以,如果当前元素是pre
并且我按下enter
它会添加一个新pre
块。我希望它进入一个p
块,所以我做到了execCommand
。这是代码:
document.onkeyup = function( event ) {
if (event.keyCode == 13 ) {
document.execCommand( 'formatBlock', false, 'p' );
event.stopPropagation();
event.preventDefault();
}
}
它工作正常,但有一个闪烁,它首先添加一个pre
块,然后将其格式化为p
. 如何调试原因或修复它?
GIF来正确解释它。
更新:所以,发现问题,它发生在 contenteditable 模式下,浏览器在 keydown 上添加新元素,我试图在 keyup 中格式化块,所以延迟。但是新的问题是,我们无法在 keydown 中创建块之前对其进行格式化,将尝试提出一个解决方案来通过代码添加元素并防止默认行为并在此处将其更新为答案。