CODEWITHSUNDEEP
javascriptbootstrap-4wysiwyg
user3525290
user3525290

Reputation: 1619

Summernote add fontsize to toolbar

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']]
     ]
   });
});

Upvotes: 1

Views: 6478

Answers (2)

user3525290
user3525290

Reputation: 1619

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

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

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

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

Upvotes: 1

Ivan
Ivan

Reputation: 40728

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']]
  ]
});

enter image description here

You can see the editor working here.

Upvotes: 7

Related Questions