'Summernote with bootstrap 5 font styling and font sizing doesn't work

I'm integrating summernote-bs5 in my software. I include it from 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>

I initialize summernote area using default. 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();

It doesn't work. I tried also with jsfiddle with bootstrap last version and it seems not work. jsfiddle

bootstrap-5 summernote

Solution 1:^[1]

I just did this as a basic test and it worked for me. Are you adding everything in the correct order and are you waiting for the document to be loaded to initialise your summernote div?

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

    <!DOCTYPE html>
    <html lang="en">
    
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Graham Reynolds

'Summernote with bootstrap 5 font styling and font sizing doesn't work

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]