带有 bootstrap 5 字体样式和字体大小的 Summernote 不起作用答案

【问题标题】：Summernote with bootstrap 5 font styling and font sizing doesn't work带有 bootstrap 5 字体样式和字体大小的 Summernote 不起作用
【发布时间】：2022-10-07 12:39:12
【问题描述】：

我在我的软件中集成了summernote-bs5。我从cdn包括它：

<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css\" integrity=\"sha512-ngQ4IGzHQ3s/Hh8kMyG4FC74wzitukRMIcTOoKT3EyzFZCILOPF0twiXOQn75eDINUfKBYmzYn2AA8DkAk8veQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />
...
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js\" integrity=\"sha512-6F1RVfnxCprKJmfulcxxym1Dar5FsT/V2jiEUvABiaEiFWoQ8yHvqRM/Slf0qJKiwin6IDQucjXuolCfCKnaJQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>

我使用默认值初始化 Summernote 区域。 html:

<div class=\"mt-2\">
    <label class=\"control-label\" for=\"textarea\">Descrizione breve:</label>
    <textarea class=\"summernote\" name=\"content_abstract\"><?=$content->content_abstract?>. 
    </textarea>
</div>

js：

$(\'.summernote\').summernote();

它不起作用。我也尝试使用带有引导程序最新版本的jsfiddle，它似乎不起作用。 jsfiddle

标签： bootstrap-5 summernote

【解决方案1】：

我只是将其作为基本测试进行，它对我有用。您是否以正确的顺序添加所有内容，您是否正在等待加载文档以初始化您的 Summernote div？

    $(document).ready(function() {
      $('.summernote').summernote();
    });

    <!DOCTYPE html>
    <html lang="en">
    
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    
    <!-- include summernote css/js -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    
    <div class="mt-2">
        <label class="control-label" for="textarea">Descrizione breve:</label>
        <textarea class="summernote" name="content_abstract"><?=$content->content_abstract?>.</textarea>
    </div>
    
    </html>

【讨论】：

【解决方案2】：

同样在这里 - 从 https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.css & https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.js

至

https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js

【讨论】：