# Integration with Export to PDF/Word
## Integration with Export to PDF/Word
The [pagination](pagination.md) feature works together with [export to PDF](../converters/export-pdf.md) and [export to Word](../converters/export-word.md) so users can see where page breaks will fall in the exported document while editing. This guide is a reference for integrating all three, covering the whole process from creating a custom editor to a working configuration.
We strongly advise you to get familiar with all three mentioned plugins’ user guides before reading this guide.
> **Warning**
>
> While it is possible to integrate the pagination feature with the Export to Word feature, this combination is prone to errors. Therefore, pagination in the Export to Word should be based solely on page breaks. We strongly recommend reviewing your document’s structure before exporting and manually applying the page breaks to maintain the preferred structure.
## Using CKEditor 5 Builder
If you do not wish to go through this tutorial, and just want to get a working editor, we recommend using our [Builder](https://builder.ckeditor.com/?redirect=docs). It offers a set of editor presets, a catalog of editor features to choose from, and many more useful options.
Choose the Document Editor preset to get the exports and pagination features. CKEditor 5 Builder will provide the necessary HTML, CSS, and JavaScript files for your editor setup.
If you want to get a better understanding of this setup, read the tutorial below.
## Before you start
### Activating the feature
To use this premium feature, you need to activate it with proper credentials. Refer to the [License key and activation](../../getting-started/licensing/license-key-and-activation.md) guide for details.
For the export plugins, you will need a special [token endpoint](https://ckeditor.com/docs/cs/latest/guides/security/token-endpoint.html). To get it, log into your CKEditor Ecosystem Dashboard account and [follow the guide on creating a token URL](https://ckeditor.com/docs/trial/latest/guides/export-to-pdf/quick-start.html#account-dashboard). If the export features are used without this token, all generated documents will contain a watermark at the bottom of every page.
After obtaining all the credentials needed, create a custom editor and configure it.
## Let’s start!
The easiest way to get started is to grab the starter project using the commands below.
```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/pagination-and-exports/starter-files pagination-and-exports
cd pagination-and-exports
npm install
npm run dev
```
This will create a new directory called `pagination-and-exports` with the necessary files. The `npm install` command will install all the dependencies, and `npm run dev` will start the development server.
The editor with some basic plugins is created in the `main.js` file.
Open the URL displayed in your terminal. If everything goes well, you will see an initial text on the screen and errors in the console. It is expected, and we will fix it in the following steps.
## Configuration
### Adding licenses
You need to provide a license key for the pagination feature as well as the Cloud Services configuration for the export plugins (which you obtained in [step one](#activating-the-feature)).
> **Note**
>
> This guide assumes that you do not use any other plugins that need a `cloudServices` configuration. If you used, for example, real-time collaboration, you would have to provide `webSocketUrl`.
Go to the `src/main.js`, and fill the required configuration.
```js
// More editor's configuration.
// ...
cloudServices: {
// Provide a correct value here. You can find it in the CKEditor Ecosystem Dashboard:
// https://dashboard.ckeditor.com/login
tokenUrl: 'https://example.com/cs-token-endpoint'
},
licenseKey: '',
// More editor's configuration.
// ...
```
After adding those values, the editor should allow writing in it, but the browser’s console will inform us about the missing configuration.
### Adding plugins’ configuration
The pagination configuration has to be in sync with the configuration of the export plugins. All three configurations need to have the same margin values and page format set. This is due to the handling of default editor styles. In this guide, you will use the A4 format, but you can use other paper sizes as well.
Open again the `src/main.js`, and add additional configuration:
```js
// More editor's configuration.
// ...
pagination: {
// Page width and height reflect the A4 format.
pageWidth: '21cm',
pageHeight: '29.7cm',
pageMargins: {
top: '20mm',
bottom: '20mm',
right: '12mm',
left: '12mm'
}
},
exportPdf: {
fileName: 'my-sample-file.pdf',
converterOptions: {
document: {
size: 'A4',
orientation: 'portrait',
margins: {
top: '20mm',
bottom: '20mm',
right: '12mm',
left: '12mm'
}
}
}
},
exportWord: {
fileName: 'my-sample-file.docx',
converterOptions: {
document: {
size: 'A4',
margin: {
top: '20mm',
bottom: '20mm',
right: '12mm',
left: '12mm'
}
}
}
},
```
After adding the configuration, the exports work but we still need to work on the styles.
### Styling the editor
When using the [decoupled editor (document editor)](../../api/module_editor-decoupled_decouplededitor-DecoupledEditor.md), you need to make sure that the editor styles match precisely the configuration options that you provided to the feature and the [export to PDF](../converters/export-pdf.md#configuration) or [export to Word](../converters/export-word.md#configuration) features. Additionally, you just want the editor to look good.
To address this issue, open the `style.css` file, and add the following declarations:
```css
/* Editor styles */
.document-container {
width: 1000px;
margin: auto;
background-color: rgb(238, 238, 238);
}
.editor-container {
border: 1px solid hsl( 0, 0%, 80% );
max-height: calc( 100vh - 100px );
overflow: auto;
}
.ck.ck-editor__editable_inline {
/*
A4 size.
Expand the width by 2px because of the border and "box-sizing: border-box".
*/
width: calc( 210mm + 2px );
height: auto;
padding: 20mm 12mm;
box-sizing: border-box;
border: 1px solid hsl( 0, 0%, 88% );
background: hsl( 0, 0%, 100% );
box-shadow: 0 2px 8px hsla( 0, 0%, 0%, .08 );
margin: 40px auto;
}
```
Our `main.js` already imports `style.js`, so after saving the CSS file, you should see a nicely styled editor in your browser.
### Styling the content
Try to add a block quote, and export the content to a PDF. It works, but the content in the file looks different.
Our `main.js` imports the styles of CKEditor 5. Apart from styling the editor’s editable element, they also have styles that control how the content inside the editor looks. When using the pagination feature together with export to PDF and export to Word, you need to make sure that these styles are sent to the converters. This means they will be actually applied to the content when generating the document. They should also not create a discrepancy between the pagination lines in the editor and page breaks in the generated document.
```js
// More editor's configuration.
// ...
exportPdf: {
stylesheets: [
// We will add links to stylesheets here.
],
// More configuration of the Export to PDF.
// ...
},
exportWord: {
stylesheets: [
// We will add links to stylesheets here.
],
// More configuration of the export to Word.
// ...
}
// More editor's configuration.
// ...
```
Before we add a proper configuration, let’s add a few new declarations that are specific to the pagination plugin, and also adjust the line height. Add them to `style.css`:
```css
/* Content styles */
@media print {
body {
margin: 0 !important;
}
}
.ck-content * {
line-height: 1.5;
}
.ck-content .table thead {
display: table-row-group;
}
.ck-content .table tr {
break-inside: avoid;
break-after: auto;
}
```
There are several strategies how to pass style sheets in the configuration. We could add relative paths or links to them. Let’s use the simplest strategy in this tutorial, but keep in mind that your bundler or framework may offer a different solutions.
Create a `public` folder in the root of the project, and copy all the style sheets that we use there.
```sh
mkdir public
cp node_modules/ckeditor5/dist/index.css public/ckeditor5.css
cp node_modules/ckeditor5-premium-features/dist/index.css public/ckeditor5-premium-features.css
cp src/style.css public
```
Then add the following configuration to the exports:
```js
// More editor's configuration.
// ...
exportPdf: {
stylesheets: [
'./ckeditor5.css',
'./ckeditor5-premium-features.css',
'./style.css'
],
// More configuration of the Export to PDF.
// ...
},
exportWord: {
stylesheets: [
'./ckeditor5.css',
'./ckeditor5-premium-features.css',
'./style.css'
],
// More configuration of the export to Word.
// ...
}
// More editor's configuration.
// ...
```
You can read more about sending styles to the server in the [troubleshooting section](pagination.md#troubleshooting) of Pagination overview.
This is it, we have a working pagination integration with Export to Word and Export to PDF!
### Demo
The editor below has the [Pagination](pagination.md), [Export to PDF](../converters/export-pdf.md) and [Export to Word](../converters/export-word.md) features enabled. Keep in mind that this demo may slightly differ from the editor you have just built. This is because of fonts and styles specific to this documentation page.
> **Note**
>
> Please note, that, as of now, the Pagination feature demo does not work properly in the Firefox and Safari browsers. Refer to the [browser compatibility section](pagination.md#browser-compatibility) for further details.
## Final solution
There is a repository available with the [final project](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/pagination-and-exports/final-project) that you can download and play with. Remember to fill in the required license and `tokenUrl` information.
### Troubleshooting
Please keep in mind that each of the plugins used in this guide has some known issues – this could be partial or missing support for other CKEditor 5 plugins, partial browser support, some known bugs, etc. When combined, these sometimes might cause problems for certain more complicated use cases. We strongly advise you to go through all _Known issues_ sections in the features’ respective documentation pages and make sure that you understand all their limitations.
If you would like to report a bug or propose enhancements for these plugins, we encourage you to use the [CKEditor 5 issue tracker](https://github.com/ckeditor/ckeditor5/issues). If you would like to use CKEditor 5 as a part of a commercial solution or have a request for custom development, feel free to contact us through our [support channel](https://ckeditor.com/contact/) - our team will make sure to answer all your questions.
---
Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)