Summernote WYSIWYG : set code view as default view

问题:

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

回答1:

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();
     }
});

回答2:

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

回答3:

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

回答4:

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();
        }
    }
});