Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/DiemenDesign/summernote-save-button

Adds a Save Button when Summenote is used within a form
https://github.com/DiemenDesign/summernote-save-button

addon plugin save summernote summernote-plugins toolbar wysiwyg

Last synced: about 1 month ago
JSON representation

Adds a Save Button when Summenote is used within a form

Awesome Lists containing this project

README

        

# summernote-save-button
A plugin for the [Summernote](https://github.com/summernote/summernote/) WYSIWYG editor.

Adds a button to the Toolbar, that allows saving edited content when Summernote is placed within a Form.
Includes option to encode data (it's up to you to decode the data server side).

### Installation

#### 1. Include JS

Include the following code after Summernote:

```html

```

#### 2. Supported languages

Supported languages can be found in the `lang` folder, and should be included after the plugin, then setting the chosen language when initialising Summernote.

#### 3. Summernote options

This is the HTML used directly in the page:
```html

[content data to be edited]

```

Finally, customize the Summernote Toolbar, this can be used directly in your page:
```javascript
$('.summernote').summernote({
toolbar: [
['save', ['save']], // The button
],
save:{
lang: 'en-US', // Change to your chosen language
encode: false, // true = encode editor data, you may need to unencode the data on your backend or before output.
pageBlockClass: '.page-block', // Leave empty if not using an overlay to block user activity while data is sent.
pageBlockToggle: 'd-block', // Class to use to toggle Page Block. Remove the class via backend once data is safely stored.
saveBtnIndicator: 'btn-danger', // Class to change save button indication when content changes to warn of unsaved data.
}
});
```

#### 4. Check out our other Summernote Plugins via our main Github page.
- [Diemen Design](https://github.com/DiemenDesign/)