How to print WYSIWYG editor content to PDF - Export to PDF feature released
We are happy to announce the official launch of the new export to PDF feature for CKEditor 4 and CKEditor 5. This feature allows you to easily print the content of your WYSIWYG editor to a PDF file. What’s more, the generated PDF document will preserve not only the rich-text content that you create in the editor, but also its structure and styling. Read on for more information!
CKEditor is a feature-rich WYSIWYG editor where you can work on HTML markup that contains rich text — styled content with elements such as tables, images, lists, etc. While HTML output is perfect for Web environments and browser-based applications, sometimes you may also need to save the document in formats that can be easily shared and presented in different environments. PDF is the most universal file format that can be shared across different operating systems without altering the document content. Here is where the PDF export feature for CKEditor 4 and CKEditor 5 comes to your rescue!
Generate a PDF file in one click
When enabled, the Export to PDF feature adds a toolbar button that sends the content and styles of your editor to the CKEditor Cloud Services HTML to PDF converter service. It then generates a PDF document that can be downloaded. This allows you to easily print your content to the PDF format — all in one click!
Adjust the PDF output to your needs
The key aspect of the PDF export feature is its configuration. In order to ensure that the generated PDF looks as close as possible to the original WYSIWYG editor content, the feature should be carefully configured. The settings exposed by the plugins allow you to create PDF documents that will fulfill the needs of your application and your end users.
Due to the differences between browsers and operating systems, it is not always possible to reach a perfect match between the content in the editor and in the generated PDF file. However, thanks to flexible configuration, adjusting a few configuration options can make the difference hardly noticeable.
Among the options that you can set up for your PDF document are:
- Page format.
- Page margins.
- Page orientation.
- Web fonts.
- Custom document styles.
- Custom header and footer, with support for adding the page number.
With these options, you will be able to craft beautiful PDF documents in no time!
Try out exporting your document to PDF!
See for yourself — explore the possibilities of the PDF export feature on the following demo pages:
Save CKEditor 4 content to PDF
The Export to PDF plugin for CKEditor 4 is available on npm and also in the CKEditor 4 Add-ons Repository. To add it to your editor:
- Use the CKEditor 4 online builder to create a custom build that supports printing to PDF.
- Install the
ckeditor4-plugin-exportpdfpackage from npm. - Download the plugin from the Add-ons Repository.
When your editor build is ready, configure the PDF export feature to produce the output that best fits your needs.
Refer to the Exporting content to PDF guide in the documentation for details, configuration tips and plugin options. See the demo and check the sample source code for an implementation walk-through.
Export CKEditor 5 content as PDF
The Export to PDF plugin for CKEditor 5 is available on npm and in the online builder. To add it to your editor:
- Use the CKEditor 5 online builder to create a custom editor build that supports printing to PDF.
- Install the
@ckeditor/ckeditor5-export-pdfpackage from npm.
When your editor build is ready, configure the PDF export feature to produce the output that best fits your needs.
Check the Export to PDF feature guide in the documentation for details, including the demo, configuration examples and plugin options.
License
The export to PDF feature is in beta. It is free to use while in the beta phase.
Export to PDF is a premium feature. We will be happy to discuss your use case and propose a tailor-made offer. Contact us for more details!
Feedback needed!
We are very excited about the possibilities that the PDF export feature can bring to the CKEditor Ecosystem. We appreciate any suggestions, ideas and comments that you can share with us. Let us know how printing PDFs directly from the editor works for you, and whatever else we could do to improve our offer!
Use the official GitHub repositories to report issues:
