I'm using Summernote as a wysiwyg editor but I have one problem. Most of my text editing goes in the code view and the problem is that if you submit the form while in code view, the edited text does not bee saved.

For some reason I need to switch between code view and wysiwyg view to save get the edited text saved. Anyone have any clues on how to fix this?

I have seen this Not saving content while in code view? #127 but it does not work for me.

Here is my code.

$(document).ready(function() {
    $('#desc').summernote({
        height: 1000,                 // set editor height
        minHeight: null,             // set minimum height of editor
        maxHeight: null,             // set maximum height of editor
        focus: true,                  // set focus to editable area after initializing summernote
        codemirror: {
          mode: 'text/html',
          htmlMode: true,
          lineNumbers: true,
          theme: 'monokai'
        },
        callbacks: {
          onBlur: function() {
            //should probably do something here
          },
          onInit: function() {
            console.log('Summernote is launched');
            $(this).summernote('codeview.activate');
          }
        }
    });
});

If necessary here is the html.

<textarea name="desc" id="desc" class="form-control" rows="40"></textarea>

I'm using Summernote as a wysiwyg editor but I have one problem. Most of my text editing goes in the code view and the problem is that if you submit the form while in code view, the edited text does not bee saved.

For some reason I need to switch between code view and wysiwyg view to save get the edited text saved. Anyone have any clues on how to fix this?

I have seen this Not saving content while in code view? #127 but it does not work for me.

Here is my code.

$(document).ready(function() {
    $('#desc').summernote({
        height: 1000,                 // set editor height
        minHeight: null,             // set minimum height of editor
        maxHeight: null,             // set maximum height of editor
        focus: true,                  // set focus to editable area after initializing summernote
        codemirror: {
          mode: 'text/html',
          htmlMode: true,
          lineNumbers: true,
          theme: 'monokai'
        },
        callbacks: {
          onBlur: function() {
            //should probably do something here
          },
          onInit: function() {
            console.log('Summernote is launched');
            $(this).summernote('codeview.activate');
          }
        }
    });
});

If necessary here is the html.

<textarea name="desc" id="desc" class="form-control" rows="40"></textarea>

• javascript
• jquery
• summernote

3 Answers 3

Try to do something like this.

$(document).on("submit","#my-form-name",function(e){
    $("#desc").val($('#desc').code());
    return true;
});

$(document).on("submit","#my-form-name",function(e){
    if ($('#desc').summernote('codeview.isActivated')) {
        $('#desc').summernote('codeview.deactivate'); 
    }
});

This copies summernote's code value into the value of the text

$(#desc).on('summernote.blur.codeview', function() {
    $(#desc).val($(desc).summernote('code'));
});

Looks like using the onblur callback could have also worked: https://summernote/deep-dive/#initialization-options

   $($('.summernote').closest("form")).on("submit",function(e){
        if ($('.summernote').summernote('codeview.isActivated')) {
            $(".summernote").val($('.summernote').summernote());
            return true;
        }
        return true;
    });

    $($('.summernote').closest("form")).on("submit",function(e){
        if ($('.summernote').summernote('codeview.isActivated')) {
            $('.summernote').summernote('codeview.deactivate'); 
        }
    });