如何在 CKeditor 5 中打印预览？答案

【问题标题】：How to print preview in CKeditor 5?如何在 CKeditor 5 中打印预览？
【发布时间】：2022-08-02 18:14:35
【问题描述】：

我有一个要在 CKEditor 上显示的文档或 html 内容。我想在我的文档顶部有一个打印预览按钮。我对文档进行了大量研究，但找不到合适的 api 或插件。

我发现了这个分页功能，我可以在其中看到“打开打印预览”按钮，这正是我所需要的，但我没有看到它的 api 或插件信息。 https://ckeditor.com/docs/ckeditor5/latest/features/page-break.html

这个答案告诉我它有一个本机 api，但在任何地方都找不到。 https://github.com/ckeditor/ckeditor5/issues/5868#issuecomment-932193441

我是否需要在 CKeditor 之外使用 Javascript 手动完成？让我知道。我也试过这个CKEditor - Print Button Outside Toolbar 但得到一个错误，说函数没有定义。我目前正在 Angular 9 上实现它。

单击工具栏上的按钮或文档顶部的某个位置时，我需要能够进入浏览器的打印预览窗口。

标签： javascript ckeditor ckeditor5

【解决方案1】：

您可以在 CKEditor GitHub for pagebreak 上找到此解决方案的代码

请记住执行以下操作以使其与分页演示页面类似：

包括以下样式以隐藏打印 iframe 容器

    #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;
    }

包含一个带有 id 的 iFrame - 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>

包括 sn-p.css 文件。

<link rel="stylesheet" href="https://ckeditor.com/docs/ckeditor5/latest/sn-ps/features/page-break/sn-p.css" type="text/css">
将 page-break.js 中的内容包含到一个单独的 javascript 文件中，并将它们导入到您的 HTML/JSP 文件中。（由于结束脚本标签冲突，将它放在同一个文件中对我不起作用）

【讨论】：