bootstrap Summernote reset/clear

Question

I would like to know how to reset or clear the bootstrap Summernote WYSIWYG editor using jQuery or JavaScript.

I tried below codes

$('#MyForm').delay(1000).resetForm(1000);

This dose reset the whole form except for the textarea with the Summernote

$('#SummernoteText').reset();

SummernoteText is the html textarea but the code doesn't do anything at all.

$('#SummernoteText').destroy();

Above seems to distroy the editor instead of clearing the editor.

Can someone point me out the way to do this.

Link to Summernote http://summernote.org/#/

Solution 1

$('#SummernoteText').code('');

Solution 2

A little late, but just to add:

---

Option 1:

$('#SummernoteText').summernote('reset');

This solution will only work if your editor was initially empty

This will reset your editor to its original state. Meaning, if you initialized it with any data, the same data will re-appear on reset.

---

Option 2:

$('#SummernoteText').summernote('code', '<p><br></p>');

The reason for adding the <p><br></p> tags instead of just plain '' is that summernote editing area needs it for focus. (Reference)

Solution 3

For Summernote 0.8.1 version use this simple code:

$("#SummernoteText").summernote("reset");

Solution 4

You can build a custom button into the toolbar of the editor itself like this:

//first create the button
var clearAllButton = function (context)
{
    var ui = $.summernote.ui;

    // create button
    var button = ui.button({
        contents: '<b>x</b>',
        tooltip: 'Clear All',
        click: function()
        {
            $("#summernote_field").summernote('code', '');
            $("#summernote_field").summernote({focus: true});
        }
    });

    return button.render();
};

//now set the options to include it
$('#summernote_field').summernote({
    toolbar: [
    .
    .
    .
    .
    ['misc', ['clearAll']]
    ],

    buttons: {
        clearAll: clearAllButton
    },

});

View more solutions

Comments

[Pawel]

In Summernote 0.8.1 use $("#SummernoteText").summernote("reset");

[Josh]

@Pawel Actually use $("#SummernoteText").summernote('code', ''); Using reset with disable other pieces of the summernote control like the slide to resize and the dropdowns

[infografnet]

I understand usability of '<p><br></p>', however for me the @Raheel Hasan solution works even better (setting an empty string and making a focus afterwards) $input.summernote('code', ''); $input.summernote({focus: true})