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/#/

Polash

Answer 1

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

Fustanella

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

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

Answer 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)

Beaker

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}) – Lamere

Answer 3

For Summernote 0.8.1 version use this simple code:

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

Interlace

Answer 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
    },

});

Sidra

Answer 5

From there official docs : just use this $('#summernote').summernote('code', "");

Rump

$('#summernote').summernote('code', ""); this is useful – Quickie

Answer 6

This was tested with summernote 0.8.2.

If you define your summernote element as

<textarea id="your-text-area-id" name="your-text-area-name" ></textarea>
<div class="summernote" id="summer-note-text-id"></div>

then you can blank text using

$("#summer-note-text-id").summernote("code", "");

@naribo 's answer is more detailed about the value to be set instead of just "".

Febrific