Using Summernote WYSIWYG Editor

Just use ‘Shift/Enter’ instead of just ‘Enter’?

1 Like

I know how to do that, but the intended users of my project don’t. Is there a way to change the default behaviour like stated?

This is a great new feature. I’ve used Summernote before and think it’s a good choice.

There are some useful looking actions related to Summernote:

It seems that some of these have been implemented and some haven’t - eg ‘Insert Text’ and ‘Paste HTML’ don’t work but the others such as ‘Enable’ and ‘Disable’ do. Is this is correct or should they work now? Also, will ‘Insert Text’ insert text at the cursor position or append it to the current contents (hopefully the former).

Something else which doesn’t work - perhaps because it’s yet to be implemented - is customising the toolbar when using Air Mode: the customisations are not applied. Again, is this a bug or perhaps something which it not yet implemented?

configuring the popover toolbars comes soon, it is already in the code, just missing in the Wappler UI.

dmx-bind:toolbar-air="[['color', ['color']],['font', ['bold', 'underline', 'clear']]]"

If you want to go realy advanced, you can do any config you want:

<script>'editorConfig', {
    placeholder: 'Hello summernote',
    tabsize: 2,
    height: 200,
    toolbar: [
      ['style', ['style', 'cleaner']],
      ['font', ['bold', 'underline', 'clear']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'help']]
<textarea is="dmx-summernote" id="editor" dmx-bind:config="editorConfig"></textarea>

Ofcourse we will try to make it you easy and most options will become available on the UI within Wappler.


This is a great feature! thanks a lot!!!
Quick question about the toolbar for headings, I can’t find it. How can add the headings selections



It is just right here:

Make sure to check how to post HTML code here:

1 Like

In addition to my last post, is there any chance to bake in those two lines of code as an option (no idea if it works though, but it would be just what I needed)?

Furthermore, when pulling summernote generated text from my database query, the html tags are not resolved. What am I doing wrong?

You need to use the inner HTML dynamic attribute for this instead of directly binding the expression in the paragraph.
Select your paragraph, add new dynamic attribute > display > inner HTML and select your dynamic expression there.

1 Like

You could add a Dynamic Event to the Summernote textarea, eg:
editor1.setValue(value.replace("</p><p>", "<br>"))
This seems to work best with the onblur event, though the replacement will only happen after leaving the field. Other events seem to produce strange results.

Having said that, I prefer the functionality as it is. This is the way Word works for example, and it means users can add paragraphs if they want.

Using the Medium Editor, I sometimes added a note, eg:



Summernote integration is looking great!

I need file upload to AWS S3 though… :disappointed:

“At last my love has come along“

I can wait to try this out. Thanks a lot Wappler team and I am truly happy to be a part of the Wappler Wave. :clap:t3:

1 Like

Had to do it in code view. Remove is medium code. Refresh app connect panel. Then you can add your summernote editor. Just did 15 of them. Since all had the same options I just copied the is summernote code and replaced the is medium code in them all in code view. Only took about 5 minutes to do 15 editors.

1 Like

Did this make in today’s update? I didn’t see it in the release notes?

No, it didn’t make it this week.

Hi Teodor
The implementation of Summernote is fantastic and certainly satisfies many needs and is complete with all the most important settings.
What would be a very interesting plus is the possibility to save, load or modify templates for the content of the text area, thus providing the possibility to choose pre-set presentations (with tables, titles, colors, logos, … . etc)
Somewhere in the past I had seen this possibility, but I don’t remember where.
You know something about this?

I’d urgently need a Word formatter/cleaner. Please implement it asap, thanks!

1 Like

I am not sure if that would also be implemented, but considering adding a blog record with 10 images, saved in the database. When the user deletes the record, all of the images inside the blog record should also be removed from the server. Would be great to have this implemented as default function and /or optional checkbox in the ui. So uploading images should have unique names an being stored maybe in an additional database field in the “Blog” database table where Wappler grabs it from?

Or perhaps return an array of image names on save which could be used to write your own image delete routine, adds more flexibility that way


George, please implement delete image from server support soon. We have a huge project here where we’d need that in our cms. Thanks!