Search code examples
javascriptjqueryhtmlcodemirrorsummernote

Summernote html code view when htmlMode true is not working fine with codemirror

$(document).ready(function () {
    $('.summernote').summernote({
        codemirror: {
            theme: 'monokai',
            htmlMode: true
        }
    });
});
<textarea class="summernote"><p><br></p>
<p>Testing html </p>
<p><br> formatting<br></p></textarea>

When you click code view, it doesn't format html properly, it does xml instead. As you can see, <br> tags are interpreted as invalid xml tag, however htmlMode: true is set and is supposed to be used to interpret the content as html.

Solution

  • It seems that I need to set:

    codemirror: {
      ...
      htmlMode: true,
      lineNumbers: true,
      mode: 'text/html'
    }

    Despite these are supposed to be default values.

    Updated fiddle: https://jsfiddle.net/ungue/fzt257r6/41/