Summernote driving me crazy

[Hyperbytes]

PHP/WAMP

For some time there has been an issue with Summernote

So a start with a clean page and add a text area

I click “Enable Summernote” and get this error ![image|223x102]#

I get this error

OK, thas the new norm now

So i manually add a Summernote Lite region to add the code headers

Manually copy the Summernote code

and add it to the text region I want to be a summernote region

I then remove the manually added region

All appears good, i have done this dozens of times in the past

But when i open in a browser i get this

Sometimes I get the menu but always the double boxes

[Hyperbytes]

The Code

    <textarea id="textarea1" class="form-control" is="dmx-summernote" dmx-bind:toolbar="[['style',['style']],['font',['bold','underline','clear']],['fontname',['fontname']],['color',['color']],['para',['ul','ol','paragraph']],['insert',['link','picture','video']],['view',['fullscreen','codeview','help']]]" value="This is some static text"></textarea>

Headers

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote/dist/summernote-lite.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></
script><script src="https://cdn.jsdelivr.net/npm/summernote/dist/summernote-lite.min.js" defer></script>
<script src="/dmxAppConnect/dmxSummernote/dmxSummernote.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote/dist/summernote-bs4.min.css" />
<script src="https://cdn.jsdelivr.net/npm/summernote/dist/summernote-bs4.min.js" defer></script>

is it me or it there an issue here?

[Teodor]

Summernote editor does not officially support Bootstrap 5. Use summernote lite instead.

[Hyperbytes]

I am using summernote lite Teodor, I am aware BS5 version does not work

[Teodor]

In your explanation above you show the following error:

@Hyperbytes

I click “Enable Summernote” and get this error ![image|223x102]#

I get this error

That is because summernote is NOT supported in BS5. Then i get lost in your explanation. What do you copy/paste/remove/edit on your pages is unclear.

Just click add element select summernote lite textarea and that is all. Save the page and your summernote textarea is there.

[Hyperbytes]

I have always used the solution offered by @t11 in this post in the past without issues

Summernote component not found in Bootstrap 5

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

[bpj]

I think he’s pointing out that there’s still a button in the UI to ‘Enable Summernote’ which only brings up a message that it isn’t supported - perhaps remove it.

The main issue, though, seems to be that when adding Summernote-lite it produces an extra input in the browser - see his screenshots

[Hyperbytes]

@Teodor

Just click add element select summernote lite textarea and that is all. Save the page and your summernote textarea is there.

Following that i get this on screen (which is more normal)

and this in the browser

[Teodor]

Do you see any errors in the browser console?
What version of Wappler are you using?

[Hyperbytes]

Tried to send Nginx link but double colon issue prevent this

I have pushed it to a temporary domain so you can see it.
https://northtynevalley.co.uk/baaadmin/summertest.php

[Hyperbytes]

error relating to tooltip (not used on page)

[Teodor]

There’s something messed up with the includes on your page:

[Hyperbytes]

It’s working now but I remain confused. I had this issue on 5 different pages before i set up the extra demo page for you, same issue on each page.
Code error you noticed aside (this was only on the test page) all of them have started to work normally.
The only thing i did was restart Wappler although i had already tried that earlier this morning
I have no idea what has caused this, i am happy it is working but hate it when i don’t know the cause of the issue.
Feel free to unlist if you want

[Hyperbytes]

Actually i may have found something interesting relating to the code error you saw.
I resaved and got the script tag issue again

Here is the code line

At a certain screen breakpoint I noticed I get this, note how the line breaks inside the end script tag rather than in the breaking space

If i save while at that screen position the actual link seems to upload broken sometimes
I know that probably seems to makes absolutely no sense but it looks like that could be happening.

If i narrow the window a little more the code break appears correctly

[NewMedia]

Just guessing outside my expertise –

Even during development, not just the online finished project, Summernote files are called from a CDN.

Looking at images in this post it seems that you are using this distribution of Summernote-lite.

from here –

GitHub - summernote/summernote: Super simple WYSIWYG editor

where the last CDN update was

Looking at referenced posts in this topic it seems Summernote-lite distribution problems go back to at least September 2021 and the issues in the Fall of 2021 were last addressed in the PLUGIN which Ben is using?

October 14, 2021

If you look at the problems supposedly “fixed” in the plugin 14 months ago

Is there any relevance to this problem?

[Teodor]

This has nothing to do with the problem reported in this topic.

[Hyperbytes]

Was going to let this thread die but as it has been commented on. There is certainly an issue with Summernote.
Sometimes it works correctly, sometimes it has an extra text box below

This seems totally random. I can save the page and it works correctly, make a change elsewhere and the second box appears, save again and it is gone. Sometimes it even changes per target, for example correct on production but incorrect on local.
I have them all working at the moment , Wednesday deadline so i am not messing with them for the moment. When i get time i will pull an example video together

[Hyperbytes]

Here is an example

Production Server with extra box

Development server (same code, only difference is data being pulled from database) no extra box

When it doesn’t work this message always appears in dev console

[Teodor]

@Hyperbytes

Sometimes it works correctly, sometimes it has an extra text box below

This seems totally random. I can save the page and it works correctly, make a change elsewhere and the second box appears, save again and it is gone

Are you referring to the design view or the actual page in your browser?
Usually these kind of issues, if in browser, are related to the includes/includes order/missing includes.

I will try to recreate this locally.

[Hyperbytes]

I was referring to in browser however design view in Wappler also shows the issue