https://github.com/sirap-group/tinymce-plugin-headersfooters
A plugin for tinymce WYSIWYG HTML editor that allow to insert headers and footers - requires tinymce-plugin-paginate
https://github.com/sirap-group/tinymce-plugin-headersfooters
insert-headers javascript plugin tinymce tinymce-plugin-paginate wysiwyg
Last synced: 6 months ago
JSON representation
A plugin for tinymce WYSIWYG HTML editor that allow to insert headers and footers - requires tinymce-plugin-paginate
- Host: GitHub
- URL: https://github.com/sirap-group/tinymce-plugin-headersfooters
- Owner: sirap-group
- License: lgpl-2.1
- Created: 2016-02-29T07:08:20.000Z (over 9 years ago)
- Default Branch: develop
- Last Pushed: 2017-11-16T09:13:07.000Z (almost 8 years ago)
- Last Synced: 2025-03-11T18:14:43.173Z (7 months ago)
- Topics: insert-headers, javascript, plugin, tinymce, tinymce-plugin-paginate, wysiwyg
- Language: JavaScript
- Homepage: https://sirap-group.github.io/tinymce-plugin-headersfooters
- Size: 8.69 MB
- Stars: 10
- Watchers: 0
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# headersfooters
A plugin for tinymce WYSIWYG HTML editor that allow to insert headers and footers - requires tinymce-plugin-paginate
## Dependencies
- tinymce
- noneditable tinymce native plugin
- [tinymce-plugin-paginate](https://github.com/sirap-group/tinymce-plugin-paginate)
## Installation
bower install tinymce-plugin-headersfooters
## Post-install
You can create a bower Post-install hook, or make the symlinks manually to bind the vendor plugins to tinymce.
echo "Installing tinymce-plugin-paginate ..."
rm public/lib/tinymce/plugins/paginate 2> /dev/null
ln -s ../../tinymce-plugin-paginate public/lib/tinymce/plugins/paginate && echo "> OK."
echo "Installing tinymce-plugin-headersfooters ..."
rm public/lib/tinymce/plugins/headersfooters 2> /dev/null
ln -s ../../tinymce-plugin-headersfooters public/lib/tinymce/plugins/headersfooters && echo "> OK."
## Plugin Settings
### Template Layout (`angular/ui-tinymce`)
> Note the required elements:
>
> - `class="edit-doc-page-outer-wrapper"` and `class="edit-doc-page-inner-wrapper` divs
> - `class="edit-doc-page-header"`, `class="edit-doc-page-body"` and `class="edit-doc-page-footer"`
```html
```
### Editor Config
> Note the required params:
>
> - `plugins: 'headersfooters'`
> - `'headersfooters_type': 'header'|'body'|'footer'`
> - `'headersfooters_outerWrapperClass': ''`
> - `'headersfooters_outerWrapperClass': ''`
> - `'content_css': "body { margin: '0 auto' })"`
```js
const tinymce = require('tinymce')
const commonOptions = {
'headersfooters_outerWrapperClass': 'edit-doc-page-outer-wrapper', // as defined in your template
'headersfooters_innerWrapperClass': 'edit-doc-page-inner-wrapper', // as defined in your template
'headersfooters_formats': 'A4 A5', // in 'A1', 'A2', 'A3', 'A4', 'A5'
'headersfooters_custom_formats': [
{
name: 'Custom_Format_1',
width: '200mm',
height: '150mm'
},
{
name: 'Custom_Format_2',
width: '255mm',
height: '410mm'
}
],
'headersfooters_default_format': 'A4' // the name of the format used by default for a new doc
}
// header setup
var hOpts = {
selector: 'textarea.header', // change this value according to your HTML to create the header
plugins: 'headersfooters',
'headersfooters_type': 'header'
}
// body setup
var bOpts = {
selector: 'textarea.body', // change this value according to your HTML to create the body
plugins: 'headersfooters',
'headersfooters_type': 'body'
}
// footer setup
var fOpts = {
selector: 'textarea.footer', // change this value according to your HTML to create the footer
plugins: 'headersfooters',
'headersfooters_type': 'footer'
}
// add common options then setup each editor
;[hOpts, bOpts, fOpts].forEach(options => {
options['headersfooters_formats'] = commonOptions['headersfooters_formats']
options['headersfooters_custom_formats'] = commonOptions['headersfooters_custom_formats']
options['headersfooters_default_format'] = commonOptions['headersfooters_default_format']
tinymce.init(options)
})
```