Trouble with implementing Summernote

Michel2 · May 21, 2024, 10:21am

Hey there all!

I'm having trouble implementing a Summernote text area in my page. It pops up, but not in preview on Wappler itself, but there is no options above the textarea to change fonts, make tables etc. It's just a textfield.

This is the example of the preview in Wappler itself, where the blank space is, is the Summernote editor:

This is the webpage when in a browser:

I would very much appreciate some help with this.

Thanks in advance, have a beautiful day!

Michel

franse · May 21, 2024, 10:41am

Can you show the code? Are you using latest 6.5.5?
There was some issue on importing summernote.
Also check the console, any errors there?

Michel2 · May 21, 2024, 10:50am

Thanks Franse!

Here's the code:

Select Asset/Commodity

Yearly Trend Monthly Trend Weekly Trend Daily Trend Daily Hourly Trend Hold Sell Long Sell Short Buy Long Buy Short

Additional data to add to this asset/commodity:

Upload images:

This is the debug from Chrome:

No further errors in Wappler debug on debugging=on, version 6.5.5.

I don't get it, what am I doing wrong?

Michel2 · May 21, 2024, 10:52am

The code didn't stick in the post, I made a screenshot:

Michel2 · May 21, 2024, 11:11am

It's starting to look like all dmx-functions are not working properly. I put in a upload field and transformed it into a dropzone, but no dice. It stays an input-field and doesn't change into a dropzone.

franse · May 21, 2024, 11:22am

Can you show the main file? It's saved?
Also here is how you can post your code:

Michel2 · May 21, 2024, 11:26am

This is the main:

<!doctype html>
<html>

<head>
  <base href="/">
  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" 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" />
  <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="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
  <script src="/dmxAppConnect/dmxFormRepeat/dmxFormRepeat.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxSummernote/summernote-bs5.min.css" />
  <script src="/dmxAppConnect/dmxSummernote/summernote-bs5.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/dmxSummernote.js" defer></script>

  <link rel="stylesheet" href="/dmxAppConnect/dmxSummernote/summernote.min.css" />
  <script src="/dmxAppConnect/dmxSummernote/summernote.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ar-AR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-az-AZ.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-bg-BG.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-bn-BD.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ca-ES.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-cs-CZ.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-da-DK.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-de-CH.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-de-DE.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-el-GR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-en-US.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-es-ES.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-es-EU.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-fa-IR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-fi-FI.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-fr-FR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-gl-ES.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-he-IL.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-hr-HR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-hu-HU.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-id-ID.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-it-IT.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ja-JP.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ko-KR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-lt-LT.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-lt-LV.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-mn-MN.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-nb-NO.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-nl-NL.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-pl-PL.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-pt-BR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-pt-PT.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ro-RO.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ru-RU.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sk-SK.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sl-SI.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sr-RS-Latin.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sr-RS.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sv-SE.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ta-IN.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-th-TH.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-tr-TR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-uk-UA.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-uz-UZ.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-vi-VN.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-zh-CN.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-zh-TW.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernoteFileUpload/summernote-upload.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
  <script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
  <link rel="stylesheet" href="/css/bootstrap-icons.min.css" />
</head>

<body is="dmx-app" id="main">
  <header class="">
    <div class="container-sm bg-secondary text-black-50">
      <div class="row row-cols-5">
        <div class="col">
          <nav class="navbar navbar-expand-lg ">
            <a class="navbar-brand ms-auto text-warning" href="#">Predictions</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar1_collapse">
              <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Contact</a>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>
  <div is="dmx-view" id="content">
    <%- await include(content, locals); %>
  </div>
  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

And yes it's saved

Michel2 · May 21, 2024, 11:36am

I'm sorry man, it gets even weirder from here on:

I did nothing but give the main page a title/description, and now suddenly the editor pops up in full...!

Still no dice on the dropzone though...

I really don't get it. It seems the quirks keep coming with this one.

franse · May 21, 2024, 11:50am

Are you using latest Wappler 6.5.5 with App connect 2?
I can see some languages path that should not be there as it all has been fixed

Michel2 · May 21, 2024, 11:55am

As far as I know, yes! I updated this morning to the latast version. It updated fine, no errors whatsoever. Both on main and the index I have App Connect Local as shown as used.

Schermafbeelding 2024-05-21 om 13.52.25

And I was wondering about all those languages myself too, in the summernotecode in main...

I restarted plenty of times, both the Mac and Wappler.

For the record, I also checked the system, by using 'System Check' in Wappler; everything is peachy!

franse · May 21, 2024, 12:10pm

Besides all that, this should not be happening and seems related to summernote.
Can you place the editor outside and check the console again?
I see it's inside a column.

Michel2 · May 21, 2024, 12:33pm

I would gladly help, but the errors have vanished in the debugging panel of Chrome, even if it still is placed inside a column. So none the wiser on this side. It's working, don't know why... Typical hahaha!

I'm focusing on the dropzone now, why doesn't that work and remains an input-field?

Thanks for the help, if I can do anything else to explain or show further, I'm your man.

George · May 21, 2024, 1:00pm

Looks like you have mixed Bootstrap 4 and 5 code. make sure on all your pages you have the same Bootstrap 5 framework selected.

Michel2 · May 22, 2024, 6:24am

I'll go look into it... It's a very good explanation why things are messed up.

I get error codes like these:

I go look into it and report back. Thanks for all the help the both of you!

Michel2 · May 22, 2024, 6:34am

I checked all the settings, of the project itself, the main and index-files, and all settings are correct.

But I found this in main, togethet with @franse yesterday, and as I read this, there was extra code put in here that explicitely mentions bs4 indeed.

I set the summernote language setting to German when adding this feature to the index page and then switched it back to English. After that this code appeared in main.ejs.

<!doctype html>
<html>

<head>
  <base href="/">
  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <meta charset="UTF-8">
  <title><%=_('\'Additions to Database\'')%></title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" 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" />
  <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="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
  <script src="/dmxAppConnect/dmxFormRepeat/dmxFormRepeat.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxSummernote/summernote-bs5.min.css" />
  <script src="/dmxAppConnect/dmxSummernote/summernote-bs5.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/dmxSummernote.js" defer></script>

  <link rel="stylesheet" href="/dmxAppConnect/dmxSummernote/summernote.min.css" />
  <script src="/dmxAppConnect/dmxSummernote/summernote.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ar-AR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-az-AZ.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-bg-BG.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-bn-BD.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ca-ES.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-cs-CZ.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-da-DK.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-de-CH.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-de-DE.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-el-GR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-en-US.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-es-ES.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-es-EU.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-fa-IR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-fi-FI.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-fr-FR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-gl-ES.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-he-IL.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-hr-HR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-hu-HU.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-id-ID.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-it-IT.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ja-JP.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ko-KR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-lt-LT.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-lt-LV.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-mn-MN.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-nb-NO.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-nl-NL.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-pl-PL.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-pt-BR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-pt-PT.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ro-RO.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ru-RU.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sk-SK.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sl-SI.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sr-RS-Latin.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sr-RS.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-sv-SE.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-ta-IN.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-th-TH.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-tr-TR.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-uk-UA.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-uz-UZ.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-vi-VN.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-zh-CN.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/lang/summernote-zh-TW.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernoteFileUpload/summernote-upload.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
  <script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
  <link rel="stylesheet" href="/css/bootstrap-icons.min.css" />
  <script src="/dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxSummernote/summernote-bs4.min.css" />
  <script src="/dmxAppConnect/dmxSummernote/summernote-bs4.min.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxSummernote/summernote-lite.min.css" />
  <script src="/dmxAppConnect/dmxSummernote/summernote-lite.min.js" defer></script>
</head>

I'm going the remove all the code beyond the first mention of dmxSummernote, where it get's called, with the languagesettings and the mentioning of tooltips, which I never use.

Michel2 · May 22, 2024, 6:46am

Removing the code helped!

I removed all instances of code in the HEAD from main.ejs where dropzone, tooltip and summernote-languages were mentioned. I also removed the File Upload itself from index.ejs.

I then restarted Wappler and added the File Upload function back in on Index.ejs.

Works like a charm now, same goes for Summernote.

Thanks again for the help, I appreciate it!

Michel

Page:

Header main.ejs:

<head>
  <base href="/">
  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <meta charset="UTF-8">
  <title><%=_('\'Additions to Database\'')%></title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" 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" />
  <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="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
  <script src="/dmxAppConnect/dmxFormRepeat/dmxFormRepeat.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxSummernote/summernote-bs5.min.css" />
  <script src="/dmxAppConnect/dmxSummernote/summernote-bs5.min.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernote/dmxSummernote.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxDropzone/dmxDropzone.css" />
  <script src="/dmxAppConnect/dmxDropzone/dmxDropzone.js" defer></script>
  <script src="/dmxAppConnect/dmxSummernoteFileUpload/summernote-upload.js" defer></script>
  <link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
  <script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js" defer></script>
</head>