I am trying to add fontsizes to the summernote editor but with no luck. If I remove ['fontsize', ['8', '9', '10', '11', '12', '14', '18']], and use ['fontsize', ['fontsize']], I get only one size and that is 13. I am trying to get a list of sizes.

 <script>
 $(document).ready(function() {
   $('#image_body').summernote({
     toolbar: [
       // [groupName, [list of button]]
       ['style', ['bold', 'italic', 'underline', 'clear']],
       ['font', ['strikethrough', 'superscript', 'subscript']],
       //['fontsize', ['fontsize']],
       ['fontsize', ['8', '9', '10', '11', '12', '14', '18']],
       ['color', ['color']],
       ['para', ['ul', 'ol', 'paragraph']],
       ['height', ['height']]
     ]
   });
});

I am trying to add fontsizes to the summernote editor but with no luck. If I remove ['fontsize', ['8', '9', '10', '11', '12', '14', '18']], and use ['fontsize', ['fontsize']], I get only one size and that is 13. I am trying to get a list of sizes.

 <script>
 $(document).ready(function() {
   $('#image_body').summernote({
     toolbar: [
       // [groupName, [list of button]]
       ['style', ['bold', 'italic', 'underline', 'clear']],
       ['font', ['strikethrough', 'superscript', 'subscript']],
       //['fontsize', ['fontsize']],
       ['fontsize', ['8', '9', '10', '11', '12', '14', '18']],
       ['color', ['color']],
       ['para', ['ul', 'ol', 'paragraph']],
       ['height', ['height']]
     ]
   });
});

• javascript
• bootstrap-4
• wysiwyg

2 Answers 2

If you would like to change the options you have to specify the array in the property fontSizes. The code below will display the font button with the options 8, 9, 10, 11, 12, 14 and 18:

$('#summernote').summernote({
  fontSizes: ['8', '9', '10', '11', '12', '14', '18'],
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
});

You can see the editor working here.

My issue was I had a file bootstrap.js that was breaking the code.

 <script src="http://cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.js"></script>

 <script src="http://netdna.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.js"></script>

 <!-- include summernote css/js -->
 <link href="http://cdnjs.cloudflare./ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
 <script src="http://cdnjs.cloudflare./ajax/libs/summernote/0.8.9/summernote-lite.js"></script>