Search code examples
django-formsdjango-templateswysiwygsummernote

Summernote-lite Data Disappears With Form Error


I am using the SummerNote lite text editor for Django and it is working very well in my installation except for when there is an error with my form. When a form error occurs, the data that is in the SummerNote editor disappears and the user then has to retype everything all over again. Obviously not optimal. Here is my HTML regarding my SummernoteLite installation:

<textarea id="summernote" name="book"></textarea>
    <script>
      $('#summernote').summernote({
        width: 755,
        height: 300,
        cursor: 22,
        fontSizes: ['8', '9', '10', '11', '12', '14', '18', '22','24', '36', '48' , '64', '82', '150'],
        toolbar: [
          ['undo', ['undo',]],
          ['redo', ['redo',]],
          ['style', ['bold', 'italic', 'underline',]],
          ['font', ['strikethrough',]],
          ['fontsize', ['fontsize']],
          ['fontSizes', ['8', '9', '10', '11', '12', '14', '18', '22','24', '36', '48' , '64', '82', '150']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
        ],
      });
      $('#summernote').summernote('fontSize', 22);
    </script>

Trying to ensure data in the text editor remains if there is an error on the form. Thanks in advance for any thoughts.


Solution

  • I ultimately found out that embedding my config in my HTML was causing me all kinds of grief. Some things worked as expected and others not so much. I ultimately moved my summernote-django config to the settings.py file and that resolved many issues I was encountering including the one with this post. Defining the editor in settings.py like shown below is what solved my problem.

    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': 600,
            'focus': True,
            'fontSizes': ['8', '9', '10', '11', '12', '14', '18', '22','24', '36', '48' , '64', '82', '150'],
    },
    }