在Summernote中使用<br>代替<p>，是否可行？

Question

当用户点击Enter键时，需要在summernote编辑器中使用<br>标签而不是<p>标签，因此这是我的代码：

var $this = $(this),
    box = $('textarea.CommentsFields');
box.summernote({
    height: 100,
    focus: true,
    toolbar: [
        [ 'all', [ 'bold', 'strikethrough', 'ul', 'ol', 'link' ] ],
        [ 'sided', [ 'fullscreen' ] ]
    ],
    callbacks: {
        onEnter: function(){
            box.summernote('insertNode', document.createTextNode("<br>")); 
            console.log('uiwdbvuwecbweuiuinsjk');
        }
    }
});

我编写了一个自定义的onEnter事件回调函数，当用户按下回车键时会触发回调函数，并且会写入<br>标签，但这不是我想要的。

我阅读了他们的文档，但无法理解如何停止 enter 按钮的默认操作，并在不将元素包装在 <p> 标签中的情况下编写 <br> 标签。 有什么想法吗？谢谢。

- rakibtg

---

尝试这个：https://github.com/summernote/summernote/issues/546 - vaso123

我认为他们在最新版本中更改了模块/插件架构，导致它无法正常工作。 - rakibtg

您可以在此回复中找到一个解决方法。 - skobaljic

Summernote现在很糟糕，在升级到8+版本后，成为了我工作中的噩梦。 - Cumulo Nimbus

Answer 1

这段代码对我有效：

$("#summernote").on("summernote.enter", function(we, e) {
     $(this).summernote("pasteHTML", "<br><br>");
     e.preventDefault();
});

这拦截了按下回车键的事件并更改了它的默认行为，插入一个 <br> 而不是一个新段落。

- EstevaoLuis

---

太棒了！谢谢你！ - ZeroNine

Answer 2

如果您不想更改或修复summernote库本身，可以使用“快捷键”来添加换行符。

• 按下Shift + Enter键可进行换行。
• 按下Enter键可更改段落，因为在按下Enter键时，summernote会添加一个新的
  /

  以开始新行。

希望这对您有用。

- Shahrukh Anwar

Answer 3

保证只有两行代码且无需插件：

$.summernote.dom.emptyPara = "<div><br></div>"; // js

.note-editor .note-status-output{display:none;} /*css*/

- OBL

---

作为 div 已经是一个块级元素，为什么要添加 br 元素呢？这样不会使文本分成两行吗？ - Rorp

Answer 4

看起来在SummerNote中有至少 10 个 错误 被报告了, 不幸的是目前还没有修复或计划修复。

幸运的是，你可以用一个巧妙的方法来解决它，但这种方法可能对未来版本非常脆弱 - 因此请小心升级。你可以进行Monkey Patch:

$.summernote.dom.emptyPara = "<div><br/></div>";
box.summernote(options);

第一行是修复程序——猴子补丁。我包含了第二行，其中初始化了SummerNote，只是为了证明您必须在启动SummerNote之前进行猴子补丁，否则猴子补丁不会生效，您仍然会在插入时得到p标签。

- Chris Moschini

Answer 5

今天的summernote没有办法做到你想要的。你可以查看https://github.com/summernote/summernote/issues/702，所以唯一的方法是创建自己的pull-request，并修复不同段落样式的逻辑。

- steppefox

---

是的，这就是为什么我不尝试删除父级<p>标签的原因。所以想法是应该只有一个p标签。 - rakibtg

嘿，你找到解决这个问题的方法了吗？我也遇到了同样的问题。 - Urvi_204

Answer 6

我遇到了这个问题，解决方案如下。

在回调函数中使用onKeydown函数可以解决你的问题。

示例：

$('.textarea-editor').summernote({
  height: 250, // set editor height  
  minHeight: null, // set minimum height of editor  
  maxHeight: null, // set maximum height of editor  
  focus: true, // set focus to editable area after initializing summernote  
  htmlMode: true,
  lineNumbers: true,
  codemirror: { // codemirror options
    theme: 'monokai'
  },
  mode: 'text/html',
  callbacks: {
    onKeydown: function(e) {
      e.stopPropagation();
    }
  }
});

- Burak ENAL

Answer 7

这对我有用

替换（在Summernote.js的第3786行）

    if (event.keyCode === key.code.ENTER) {
        context.triggerEvent('enter', event);
    }

在

    if (event.keyCode === key.code.ENTER) {
        return;
    }

- AggieR

Answer 8

添加此JavaScript代码解决了回车键的问题。

$("#summernote").on("summernote.enter", function(we, e) {
     $(this).summernote("pasteHTML", "<br><x></x>");
     e.preventDefault();
});

使用空的x标签...这是为了虚拟目的的标签....

对我来说100%有效..有任何疑问..请联系：[e-mail]

- RajiGates RajeshKumar