https://github.com/dennissuitters/summernote-pagebreak

Add a Page-Break button to the Summernote Toolbar
https://github.com/dennissuitters/summernote-pagebreak

page-break plugin summernote summernote-plugins wysiwyg

Last synced: 22 days ago
JSON representation

Add a Page-Break button to the Summernote Toolbar

• Host: GitHub
• URL: https://github.com/dennissuitters/summernote-pagebreak
• Owner: DennisSuitters
• Created: 2017-11-28T14:32:13.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-06T01:40:27.000Z (almost 6 years ago)
• Last Synced: 2024-05-03T05:09:05.648Z (6 months ago)
• Topics: page-break, plugin, summernote, summernote-plugins, wysiwyg
• Language: JavaScript
• Size: 5.86 KB
• Stars: 5
• Watchers: 2
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# summernote-pagebreak

This Plugin adds a Page-Break button to the Summernote toolbar that when used adds page-breaks for printing. The editor will show where your page-breaks are, but using the styles below they won't show on pages, but will work when printing the page.

By selecting, or highlighting the block of text you want the page-break to appear after will insert a page-break div after the selected area. If used without selecting a content section will place the page-break at the end of the content.

### Installation

#### 1. A note for using this plugin.

If your stylesheet does not contain a `.page-break` class you can use the styles below, there's different ways you can add the class to your pages.

You can add the class directly into your stylesheet that gets included into your pages as below:

````css

@media all {

	.page-break	{

		display: none;

	}

}

@media print {

	.page-break	{

		display: block;

		page-break-before: always;

	}

}

````

Or you can add them directly to your page/s like below:

````html

	@media all {

		.page-break	{

			display: none;

		}

	}

	@media print {

		.page-break	{

			display: block;

			page-break-before: always;

		}

	}

````

#### 2. Include JS

Include the following code after Summernote:

```html

```

#### 3. Supported languages

Currently available in English!

#### 4. Summernote options

```javascript

$('.summernote').summernote({

    toolbar:[

        ['pagebreak',['pagebreak']], // The Button

        ['style',['style']],

        ['font',['bold','italic','underline','clear']],

        ['fontname',['fontname']],

        ['color',['color']],

        ['para',['ul','ol','paragraph']],

        ['height',['height']],

        ['table',['table']],

        ['insert',['media','link','hr']],

        ['view',['fullscreen','codeview']],

        ['help',['help']]

    ],

});

```

#### 5. Check out our other Summernote Plugins via our main Github page.

- [Diemen Design](https://github.com/DiemenDesign/)