Summernote добавляет интервал после слияния абзацев

Question

Я пытаюсь создать приложение для создания контента вокруг Summernote (BS4) и наткнулся на функцию, которая не очень полезна.

Учитывая два абзаца:

<p>The quick brown fox jumps over the lazy dog.</p>
<p>One, two, three, four.</p>

Если вв редакторе, который я использую для возврата двух абзацев с помощью backspace, я ожидаю получить результат, подобный ...

<p>The quick brown fox jumps over the lazy dog.One, two, three, four.</p>

Это именно то, что вы получите, если опробуете пример реализации на домашней странице Summernote

Но вместо этого я получаю ...

<p>The quick brown fox jumps over the lazy dog.<span style="background-color: rgb(255, 255, 255); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 1rem;">One, two, three, four.</span></p>

(т.е. элемент <span> со множеством стилей, окружающий то, что было во втором абзаце)

Был бы очень признателен за объяснение того, что здесь происходит, и как я могу предотвратить это.

Большое спасибо!

CDN:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>

HTML:

<div id="summernote"></div>

jQuery:

$('#summernote').summernote();

---

ОБНОВЛЕНИЕ:

Я заметил, что если я использую summernote-lite вместо summernote-bs4и удалите BS4 CDN, проблема больше не будет сохранятьсяntroduce BS4, тогда проблема возвращается!

CDN без проблем:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js"></script>

CDN с проблемой:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js"></script>

Приводит меня к мысли, что это проблема, связанная с Bootstrap...

---

ОБНОВЛЕНИЕ 2:

На самом деле это похоже на проблему Summernote, которая фактически может быть воспроизведена на найденном примере BS4 здесь , о котором я сейчас сообщил на Github здесь .

Answer 1

У меня была та же проблема, которую я решил, добавив правила CSS в класс, редактируемый заметками:

.note-editable * {
    line-height: inherit!important;
    font-size: 14px!important;
    font-family: 'Open Sans';
 }

Это исправило это для меня.