javascript - Summernote add fontsize to toolbar - Stack Overflow

admin管理员组

文章数量:1355623

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

Share Improve this question Follow asked May 31, 2018 at 17:17 user3525290user3525290 1,61922 gold badges2828 silver badges4747 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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>

本文标签： javascriptSummernote add fontsize to toolbarStack Overflow