Search code examples
javascriptdjangodjango-formswysiwygsummernote

Summernote lite bullet and number list not defaulting to custom default fontsize

I am testing the summernote WYSIWYG editor, the lite version WITHOUT bootstrap in my Django implementation. Everything seems to be working well with the exception of the bullet and number size. They appear to be at the default size of 6, when my default fontSize is at 22. The fontSize is defaulting to 22 as depicted below, it just has no impact on the bullet and the number list buttons. They stay at 6. I am using the code below in my HTML:

<textarea id="summernote" name="book"></textarea>
    <script>
      $('#summernote').summernote({
        width: 755,
        height: 300,
        toolbar: [
          ['undo', ['undo',]],
          ['redo', ['redo',]],
          ['style', ['bold', 'italic', 'underline',]],
          ['font', ['strikethrough',]],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
        ]
      });
      $('#summernote').summernote('fontSize', 22);
    </script>

I am trying to get the bullet and numbers to match the format of my fonts, but can't seem to get them to match my default fontSize. I am using the SummerNote widget in my form as shown below:

widgets = {
    'book': SummernoteInplaceWidget(),
}

I am also using the default libraries in my HTML header as suggested by the documentation as shown below:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>

I can't seem to tell if this is expected behavior, or if there is someway to get them all in sync, the fontsize, the bullet list, and the number list. I tried moving the fontSize line of code before the default parameters but that didn't seem to help. Thanks in advance for any thoughts.

enter image description here

enter image description here

Solution

  • Moving the config from embedded HTML to the settings.py file for django instead resolved this issue.

    I defined the config in my settings.py file as shown below:

    SUMMERNOTE_CONFIG = {
   'summernote': {
        'toolbar': [
          ['undo', ['undo',]],
          ['redo', ['redo',]],
          ['style', ['bold', 'italic', 'underline',]],
          ['font', ['strikethrough',]],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
        ],
        'width': 760,
        'height': 300,
        'focus': True,
        'fontSizes': ['8', '9', '10', '11', '12', '14', '18', '22','24', '36', '48' , '64', '82', '150'],
},
}

    After defining the summernote config in my settings.py file, I then defined the default font-size and the position of the editor in my CSS as shown below:

    .editor {
  font-size: 18px;
  margin-left: 24.4rem;
}

    The end result:

    enter image description here

    The code outlined above solved my issue.