Summernote WYSIWYG : set code view as default view

Question

I can't find anything about this on the web. Is there a way to set the default view of Summernote (WYSIWYG jQuery text editor) to be the code/html view. I want to see directly the HTML code when landing on the form page.

Thank you

Answer 1

Well, you can use the init callback.

$('.summernote').on('summernote.init', function () {
      $('.summernote').summernote('codeview.activate');
    }).summernote({
      height: 300,
      placeholder: 'Paste content here...',
      codemirror: { 
        theme: 'monokai'
      }
    });

Answer 2

From Summernote documentation:

After v0.7.0, every callbacks should be wrapped by callbacks object.

So, in order to work, the js should be like this:

$('.summernote_editor').summernote({
    callbacks: {
        onInit: function() {
            $("div.note-editor button.btn-codeview").click();
        }
    }
});

Answer 3

Not very elegant and I don't know if there is a proper way to do it but give this a try if you like:

From what I can tell, and I didn't look very hard, the codeview button does this:

1. adds a 'codeview' class to div.note-editor
2. disables all the buttons
3. adds an 'active' class to the codeview button elemment.

You may discover that it does other things as well but this should put you on a workable path.

                $('div.note-editor').addClass('codeview');
                $('div.note-editor.codeview button').addClass('disabled');
                $("div.note-editor.codeview button[data-event='codeview']").removeClass('disabled').addClass('active');

Answer 4

You can simulate a click on the codeview button (after summernote initialization), it works for me :

$('.summernote').summernote({
     oninit: function() {
         $("div.note-editor button[data-event='codeview']").click();
     }
});