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

我正在将 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();

它不起作用。我还尝试使用带有 bootstrap 最新版本的 jsfiddle ,它似乎不起作用。 jsfiddle

stack overflow Summernote with bootstrap 5 font styling and font sizing doesn't work
原文答案

答案:

作者头像

我只是将其作为基本测试进行,它对我有用。您是否以正确的顺序添加所有内容,您是否正在等待加载文档以初始化您的 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>