contentEditable area::force 段落换行 - 跨浏览器答案

【问题标题】：contentEditable areas::force paragraphs for new lines - cross browserscontentEditable area::force 段落换行 - 跨浏览器
【发布时间】：2012-06-02 12:31:16
【问题描述】：

Firefox 使用 <br> 换行，Chrome 和 Safari 使用 <div>...</div> 换行，Internet Explorer 和 Opera 使用段落 <p>...</p> 换行。

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

我知道ckeditor支持这个功能，但是我怎么能在我的自定义编辑器中简单地实现呢？

【问题讨论】：

标签： newline contenteditable paragraph execcommand

【解决方案1】：

对我来说，解决方案是将 document.execCommand('formatBlock', false, 'p'); 添加到 contenteditable div 中的 keypress 事件中。例如：

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

希望它会帮助某人。 :)

【讨论】：

所以每次按键...你重新格式化块？在这里检查输入键码不是更好吗？
这种方法的问题是，如果你插入子弹，它就会崩溃。开始一个新列表后，按 Enter 键转到下一个项目符号会在 LI 中插入一个段落。
这个解决方案在已经存在的标签中创建<p>标签，这通常可以正常工作，但就像@Utkanos说它搞砸了<ul>标签。
顺便说一句...是ev.keyCode == 13 而不是ev.keyCode == '13'？

【解决方案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);

【讨论】：

【解决方案3】：

试试 execCommand "insertparagraph"，例如：

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

或者，您可以处理 keydown 事件，捕获 keycode 13（不带修饰符），然后做任何您喜欢的事情。

已更正

【讨论】：

更新：到目前为止，keycode 已被弃用。使用.key == "Enter" 执行@MorganTiley 提到的以现代方式捕获键码13 的操作（我建议编辑此答案。）

【解决方案4】：

您没有具体说明您希望在哪个编辑器中使用此功能，但您提到了 CKEditor，所以我假设您正在询问它。只需将其添加到您的 config.js 文件中：

config.enterMode = CKEDITOR.ENTER_P;

【讨论】：

不，我需要 js 代码在我自己的 contentEditable DIV 中使用它，而不是在 ckeditor 中。我只命名 ckeditor 来给出一个工作示例，但我只是在寻找 js 代码。谢谢