contentEditable区域：强制分段以实现换行 - 跨浏览器

Question

火狐浏览器使用<br>来换行，谷歌和Safari使用<div>...</div>来换行，而IE和Opera则使用<p>...</p>来换行。

我正在寻找一种方法，强制每个浏览器只创建段落，当需要换行时。

我知道ckeditor支持此功能，但如何在我的自定义编辑器中简单实现它？

- PePe

Answer 1

对我来说，解决方案是在可编辑 div 中的 keypress 事件中添加 document.execCommand('formatBlock', false, 'p');。例如:

element.addEventListener('keypress', function(ev){
    if(ev.keyCode == '13')
        document.execCommand('formatBlock', false, 'p');
}, false);

希望这能帮助到某些人。 :)

- bartaxyz

---

那么对于每次按键操作...你都重新格式化块吗？在这里检查换行键代码不是更好吗？ - backdesk

这种方法的问题在于，如果您要插入项目符号，它就会出现问题。在开始新列表后，按Enter键以转到下一个项目符号会在LI内插入一个段落。 - Mitya

这个解决方案在已经存在的标签内创建了 <p> 标签，通常情况下可以正常工作，但像 @Utkanos 所说的那样，它会破坏 <ul> 标签。 - Cannicide

顺便问一下，是 ev.keyCode == 13 而不是 ev.keyCode == '13' 吗？ - David Given

Answer 2

如果您想在换行后添加一个新的<p>，但是您想保留前一行的格式（即您正在从<h1>中断），请结合@MorganTiley和@PageOnline的答案：

editor.addEventListener('keypress', function(e){
    if(e.keyCode == '13') {
      e.preventDefault();
      document.execCommand('insertParagraph', false);
      document.execCommand('formatBlock', false, 'p');
    }
  }, false);

- Sventies

Answer 3

尝试使用execCommand "insertparagraph"，例如：

document.execCommand('insertParagraph',false,'id for new p')

或者你可以处理keydown事件，捕获键码13（没有修饰符），然后做任何你想做的事情。

更正后

- Morgan T.

---

更新：目前，keycode已被弃用。使用.key == "Enter"以现代方式捕获按键码13（我建议编辑此答案）。 - Cannicide

Answer 4

请在用户开始编辑之前尽快在您的JS中调用以下内容：

document.execCommand('defaultParagraphSeparator', false, 'p'); 

- redsd

Answer 5

您没有具体说明您想在哪个编辑器中使用此功能，但是您提到了CKEditor，因此我认为您是在询问它。只需将以下内容添加到您的config.js文件中：

config.enterMode = CKEDITOR.ENTER_P;

- Seb_CKSource

---

不，我需要JS代码来在我的自定义contentEditable DIV中使用，而不是在ckeditor中使用。我只是提供了一个可工作的示例，但我只需要JS代码。谢谢。 - PePe