Summernote добавить размер шрифта на панель инструментов - PullRequest
Новая
       3

Summernote добавить размер шрифта на панель инструментов

0 голосов
/ 31 мая 2018

Я пытаюсь добавить размеры шрифтов в редактор Summernote, но безуспешно.Если я удаляю ['fontsize', ['8', '9', '10', '11', '12', '14', '18']], и использую ['fontsize', ['fontsize']],, я получаю только один размер, а это 13. Я пытаюсь получить список размеров. 

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

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Моя проблема была в том, что у меня был файл bootstrap.js, который нарушал код. 

 <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>
0 голосов
/ 31 мая 2018

Если вы хотите изменить параметры, вы должны указать массив в свойстве fontSizes.Приведенный ниже код будет отображать кнопку шрифта с параметрами 8, 9, 10, 11, 12, 14 и 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

Вы можете увидеть, как работает редактор здесь .

...