Fix Show SummerNote (WYSWIG) Issue on textarea (When Checkbox is checked) :)

Fix Show SummerNote (WYSWIG) Issue on textarea (When Checkbox is checked) 

Recently, I worked on Project where I need to show the < textarea > when the checkbox is checked. And also I need to use the WYSWIG Editor.

For WYSWIG, SummerNote is one of the best editor that I have encountered with. I used it heavily in my earlier Project.

To show and hide the <textarea> when button is checked is fairly easy and enable the summernote editor on a text area again is not an uphill task.

Here is a snippet of it.

How it looks on web page?

And then next thing is to enable the Summernote on your web application

Add “$(‘#summernote’).summernote();” to the JavaScript Code and the code is:

JS Code to enable SummerNote

Now see the webpage

SummerNote Editor Enabled

It’s beautiful.

Now When you Un-check the checkbox, ideally the < textarea > should be disappeared. Let’s try that.

TextArea not disappeared when checkbox is unchecked.

But it wouldn’t. Here is the dragon. Summernote add its own div elements when you enabled it. We need to take care of that.

Inspect the Web Page and see the <div class=”note-editor … …”>

Summernote div element class

Solution

1. First of all we need to change the <textarea> tag <div>.
2. We need to add “$(‘.note-editor’).toggle(this.checked);” to the JavaScript Code.

Now look at the html code

And take a look at the webpage

When the Checkbox is checked:

When Checkbox is checked

When the Checkbox is unchecked:

When checkbox is unchecked

Issue Fixed. 

I hope it helps the few members of the community.