Summernote 在合并段落后添加跨度

Posted 2023-03-22

【中文标题】Summernote 在合并段落后添加跨度

【英文标题】：Summernote adding span after merging paragraphs

【发布时间】：2019-05-14 03:12:40

【问题描述】：

我正在尝试围绕 Summernote (BS4) 构建一个内容创作应用程序，但遇到了一个不太有用的功能。

给定两个段落：

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

如果在编辑器中我使用退格键合并两个段落，我会期待这样的结果...

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

这正是您在Summernote's homepage 上尝试示例实现时所得到的结果

但我却得到了……

<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，问题不再存在。

如果我坚持使用summernote-lite 但重新引入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 示例中复制到 here，我现在已经在 Github here 上进行了报告。

【问题讨论】：

似乎第二段已经应用了很多样式。你能在合并它们之前看到 html 源代码吗？

@NawedKhan 合并前两段的 html 源代码与原始问题中的第一个代码块相同 :)

【参考方案1】：

我遇到了同样的问题，我通过将 css 规则添加到 note-editable 类来解决：

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

这为我解决了问题。