codeBlock 包装在 <pre> 里面 contenteditable 在按 Enter 时中断

Question

在我的自定义编辑器中，将代码封装在 <pre> 标签中工作正常。我想直观地组织粘贴的代码以提高可读性。为此，我需要在代码块之间留空行。但是，当我按下 Enter 时，整个代码块不是空行，而是一分为二，新的代码块包含在自己的预标记中。下面的代码应该在一个单块中，在 example_function 和 another_example_function()

之间有一个空行

仅供参考，contenteditable class 设置为 style="display:inline-block" 以防止每行出现 div.wrapper。可能相关 CSS 信息 - pre { white-space: pre-wrap;}。我在 chrome 83.xx。如果您需要更多信息，请告诉我。以下是我尝试但失败的方法：

//there could be several code-blocks so running a loop to get all
let preTags = document.querySelector('.custom_editor').querySelectorAll('pre')
if (preTags) {
  preTags.forEach(function(item) { // attaching an event-listener to each code block
    item.addEventListener('click', function(e) {
      if (e.keyCode === 13) { //on enter just need a empty new line
        document.execCommand('insertHTML', false, '<br>');
        return false;
      }
    })
  }
}

HTML

<div class="content" style="display:inline-block;" contenteditable="true"></div>

Answer 1

嵌套的预标记，例如。 contenteditable>pre 似乎不是 'keypress'、'keydown' 和 'keyup' 等事件的理想设置，因为在我的案例中它们确实响应了这些事件。 pretags 中的 'click' 事件起作用但没有处理 if (e.key === 'Enter') 检查，所以我没有遵循该路线。

我没有为每个预标记监听事件，而是只将一个监听器附加到容器，突然间我的输入事件自定义设置在容器内的所有预标记内外都起作用了。最终我可以在按下 Enter 键时在我的预标记中得到空行。

document.querySelector('.custom_editor').addEventListener('keypress', someFunc)
function someFunc(e){
    if (e.key === 'Enter') { 
        document.execCommand('insertHTML', false, "<br>");
        e.preventDefault()
    } 
}

codeBlock 包装在 <pre> 里面 contenteditable 在按 Enter 时中断

codeBlock wrapped in <pre> inside contenteditable breaks on pressing Enter

javascript

contenteditable

dom-events

execcommand