Summernote component not found in Bootstrap 5

[NGM]

Wappler Version : 3.97
Operating System : windows
Server Model: NodeJS
Database Type: MySQL
Hosting Type: Heroku
Bootstrap 5

Expected behavior

What do you think should happen?

click the enable Summernote button associated with a text area and summernote would appear with all the options

Actual behavior

What actually happens?

clicked the enable Summernote button associated with a text area and got notification “Summernote component not found”

How to reproduce

• Detail a step by step guide to reproduce the issue
• A screenshot or short video indicating the problem
• A copy of your code would help. Include: JS, HTML.
• Test your steps on a clean page to see if you still have an issue

…YOUR TEXT HERE …

I have used Summernote in other projects ( same setup except using Bootstrap 4) and it just worked when i looked to enable summernote. In this project Bootstrap 5 i got the error. I needed it in a modal so initally tried it there got the notification and then tried on the page same error.

[Teodor]

@NGM

clicked the enable Summernote button associated with a text area and got notification “Summernote component not found”

Where did you get this error exactly?
Also - are you sure you have added jquery on your page?

[NGM]

See screenshots

[NGM]

Hi Teodor, George,

Any thoughts??

Thanks,

Nigel

[Teodor]

We’ve not enabled Summernote component for Bootstrap 5 pages. It natively supports Bootstrap 4, however it should work fine on Bootstrap 5 pages as well, so we will fix this in the next update.
Meanwhile you can just add the Summernote Lite textarea on your page instead of trying to convert the textarea to Summernote component.

[NGM]

Thanks

[s.alpaslan]

still not fixed on wappler 4.0.1

[t11]

Is this fixed? Just had this ‘error’ today.

[t11]

Adding the
is="dmx-summernote" dmx-bind:toolbar=""
to an already created textarea fixed the problem

PS First create an empty summernote lite textarea so all relative files are included

[George]

Unfortunately Summernote for Bootstrap is not fully Bootstrap 5 compatible.

You can use the Summernote Lite version, which should work always.

When will it release support for Bootstrap 5?

[brad]

Still no progress on this?

[markoax21]

@brad

Still no progress on this?

@Teodor
I need it too!
Thanks

[Teodor]

You can use Summernote Lite, which works fine with Bootstrap 5.

[markoax21]

I’ve tried before… but it doesn’t work (i don’t even see the toolbars)

In this modal window, Summernote is “Descrizione”

<textarea id="descrizione" class="form-control" name="descrizione" lang="it-IT" disable-drop="true" dmx-bind:height="350" required="" data-msg-required="Obbligatorio" dialogs-in-body="true" dmx-bind:rows="15" is="dmx-summernote" dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['table',['table']],['insert',['link','picture','video']],['view',['fullscreen','codeview','help']]]"></textarea>

[brad]

I find after adding a summernote lite text area I need to do a full publish for it to work. Give that a try.

[Teodor]

I see no issues with the Summernote Lite added in a modal on a Bootstrap 5 page:

You can check the browser console for errors.

[Hyperbytes]

If you add summer note lite directly everything works OK, if you try to convert a text area to a summernote area you sill get error brad showed.

[markoax21]

@hyperbytes Your error I have it also if I insert directly Summernote in my form

[Teodor]

You can’t convert a text area to summernote, as summernote is not compatible with Bootstrap 5.
You just need to add the component added Summernote Lite Text Area from the components insert menu.