How to print preview in CKeditor 5?

user_8740131 0
Viewed 152

I have a document or html content I'm displaying on CKEditor. I want a print preview button on top of my document. I dug a lot into documentation but couldn't find the right api or plugin.

I found this pagebreak feature in which I can see "Open Print Preview" button which is exactly what I need, but I don't see an api or plugin information for it. https://ckeditor.com/docs/ckeditor5/latest/features/page-break.html

This answer tells me there's a native api for it, but can't find it anywhere. https://github.com/ckeditor/ckeditor5/issues/5868#issuecomment-932193441

Do I need to do it manually outside of CKeditor using Javascript? Let me know. I also tried this CKEditor - Print Button Outside Toolbar but got an error saying function is not defined. I'm implementing it on Angular 9 currently.

I need to be able to go the browser's print preview window upon clicking a button from toolbar or somewhere on top of the document.

ckeditor5 ckeditor javascript
1 Answers

You can find the code for this solution on CKEditor GitHub for pagebreak

Please remember to do the following to make it work similar to the page break demo page:

  1. Include the following style to hide the print iframe container

        #print-data-container {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        white-space: nowrap;
        clip-path: inset(100%);
        clip: rect(0 0 0 0);
        overflow: hidden;
    }

  2. Include an iFrame with id - print-data-container

    <button type="button" id="print-data-action">Open print preview</button>
<iframe id="print-data-container" aria-hidden="true" tabindex="-1"></iframe>

  3. Include snippet.css file.

    < link rel="stylesheet" href="https://ckeditor.com/docs/ckeditor5/latest/snippets/features/page-break/snippet.css" type="text/css">

  4. Include contents in page-break.js into a separate javascript file and import them into your HTML/JSP file. (having it in the same file did not work for me because of conflicting end script tag)

user_73499260
Related