Summernote Lite Toolbar Not Showing

Wappler General Bugs
1

I added a Summernote Lite text area to my form … but the editor toolbar does not show up in Wappller or the browser. I have made sure everything is uploaded. I should add that the text area is inside an OffCanvas. Any ideas?

<textarea id="editor2" name="editor2" 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']]]"
class="form-control"></textarea>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote/dist/summernote-lite.min.css" />
<script src="https://cdn.jsdelivr.net/npm/summernote/dist/summernote-lite.min.js" defer></script>
<script src="dmxAppConnect/dmxSummernote/dmxSummernote.js" defer></script>

Update, doesn’t work added directly to the page either.
Wappler 6 beta 8 with beta channel and experimental features on.

2

Anyone have any suggestions? I really need to get some sort of text editor working. :frowning:

EDIT: Medium Editor doesn’t work either.

What am I doing wrong?

3

Brad “it doesn’t work” tells us nothing.
Check for errors in the browser console and report any findings.

4

The title says it … no toolbars. Nothing in the console either.

6

Here is the full code from a fresh empty page with just a summernote lite textarea on it. No toolbars show up.

<!doctype html>
<html>

<head>
    <meta name="ac:route" content="/summernote">
    <base href="/">
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Summernote Integration</title>
    <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="https://pro.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-VhBcF/php0Z/P5ZxlxaEx1GwqTQVIBu4G4giRWxTKOCjTxsPFETUDdVL5B6vYvOt" crossorigin="anonymous" />
    <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>
</head>

<body id="summernote" is="dmx-app">
    <div class="container mt-5">
        <div class="row">
            <div class="col-4">
                <p><i class="fas fa-laptop-house"></i>&nbsp;&nbsp;<a href="./">Back to Home</a></p>
                <h5><i class="fad fa-keyboard"></i>&nbsp; Summernote Demo</h5>
                <p class="text-justify">Testing Summernote integration</p>
            </div>
            <div class="col">
                <form id="formSummernote" method="post" is="dmx-serverconnect-form">
                    <textarea id="editorSummernote" name="editorSummernote" 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']]]" class="form-control"></textarea>
                </form>
            </div>
        </div>
    </div>
    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>
7

Summernote and Medium Editor haven’t been updated yet for the new App Connect Beta. Can you test if they render correctly after calling dmx.requestUpdate().

8

Sorry Patrick, how do I do that?

9

Enter it in the browser console and hit enter :slight_smile: I already tested this and confirm summernote renders. We will improve the summernote for App Connect 2 in the next update.

1 Like
10

Still an issue in beta 9 :frowning:

11

Summernote now works as it should with BS5. Thank you!

1 Like