Discuss

Using Summernote WYSIWYG Editor

On this page
Summernote is a simple to configure and easy to use WYSIWYG Editor available in Wappler. You can use it to format text/content and send it to the server side for example insert/update record.

Inserting Summernote on your page

You can use Summernote with a form or without a form.

Using Summernote with a form

In most of the cases you will be using Summernote with a form, in insert and update record forms.

You can add Summer Note in your form using the Summernote Textarea component, located in the Forms menu:

Screenshot_1|690x398

Which results in a textarea with Summernote Functionality enabled:

Screenshot_2|690x398

You can also convert an existing textarea to Summernote, by selecting your textarea and clicking the Enable Summernote button:

Screenshot_3|690x398

And you have your Summernote editor enabled in the form:

Screenshot_4|690x398

Using Summernote without a form

In some specific cases where you don't need a form, you can use Summernote without a form. Using its dynamic events you can send the data to your server actions easily.

You can add it anywhere on your page. Click add new component, open the Forms category and select Summernote Region:

Screenshot_5|690x398

Which adds the Summernote region on your page. It looks and acts the same as a textarea:

Screenshot_6|690x398

As you are not using a form there is no input to submit to your server action, you can use the dynamic events available to pass data to a server action.

You can for example use the onchange event, to submit the data on change.

Main Options

You can customize the look and feel of Summernote, by using the general and layout options available. Select the editor and you will find these in the Properties panel:

Screenshot_10|690x398

You can enter a placeholder text, just like for any other input:

Screenshot_11|690x398

Select a theme between Lite and Bootstrap 4:

Screenshot_58|690x395

Select a language for the interface options:

Screenshot_13|690x398

You can set a fixed or min / max height in pixels for the editor:

Screenshot_17|690x397

There are a few more options, which you can enable:

  • Autofocus: enable auto focus Summernote when the page loads
  • Air Mode: provides an interface without the standard toolbar. A floating/inline toolbar will appear when you select part of the text.
  • Use in Modal: enable this option, if you are using Summernote in a modal.
  • Dialogs Fade: enable fade effects for the Summernote dialogs

Screenshot_18|690x397

Customizing Toolbars

With Summernote you can create your own toolbars, give them custom names and select the buttons displayed inside them. This way you can visually group the buttons as you like. You can see the default toolbars and the buttons inside them added to Summernote by scrolling down the properties panel. Each of them has its own buttons:

Screenshot_25|690x396

Creating a new toolbar is easy. Click the Add New buton:

Screenshot_54|690x395

Scroll down and add a name for your new custom toolbar:

Screenshot_55|690x395

Then select which buttons you want to include in it. We add undo and redo:

Screenshot_56|690x395

You can see your new toolbar:

Screenshot_57|690x395

File Upload

File Upload Basics

In order to setup file uploads in Summernote you need to create a server action, handling the upload. You can create separate server actions for:

  • General file upload
  • Image file upload
  • Video file upload
  • Audio file uload

and you can setup each of these to upload files in different folders or have different properties.

Upload Image Files

We've added a Summernote Image Upload template, to Server Connect. Use this template to upload an image in the editor. First we need to create the server action. Open Server Connect and add new Server Action:

Screenshot_30|690x396

We call it image_upload:

Screenshot_31|690x396

Then right click Steps:

Screenshot_32|690x396

Open File Management and select Summernote Upload Image:

Screenshot_34|690x396

This creates all the steps needed for an image upload and resize:

Screenshot_35|690x396

We've set default values for upload location, image size and save location. Make sure to adjust theses as you need.

Select your image upload folder:

Screenshot_36|418x429

Select the size your images to be resized to:

Screenshot_37|418x429

Select the same save location as the one used in the upload step:

Screenshot_38|418x429

Save your server action and close the Server Connect panel:

Screenshot_39|690x396

In App Connect Panel scroll down to Summernote Addons and click the Add New button:

Screenshot_41|690x396

The File Upload addon has been added. Here you can select a different server action for different file formats. Click the Select Server Action button for the Image Server Action:

Screenshot_42|690x396

And select the Summernote Image Upload server action which we created:

Screenshot_43|690x396

Then we need to enable image uploads in Summernote toobars. We can either add a new toolbar and add the upload button there or use any of the existing ones. Let's add it to the insert toolbar:

Screenshot_45|690x396

We can remove the insert image and video buttons as we don't need them:

Screenshot_46|690x396

And you can see the image upload button appears in the toolbar:

Screenshot_47|690x396

And when you use it, the image is uploaded, resized and inserted in the content:

upload-img|690x414

General Files Upload

For general file upload, just create a new server action and use the Summernote Upload File template:

Screenshot_59|690x395

Customize the file upload paths as per your needs:

Screenshot_60|385x500

And select this server action in the General Server Action option in the File Upload addon:

Screenshot_61|690x395

And enable the file upload button:

Screenshot_62|690x395

Do the same for videos and audio upload, selecting a custom upload folder if needed.