npx -y degit ckeditor/ckeditor5-tutorials-examples/pagination-and-exports/starter-files pagination-and-exports
cd pagination-and-exports
npminstallnpm run dev
这将在名为pagination-and-exports的新目录中创建必要的文件夹。npm install命令将安装所有依赖项,npm run dev将启动开发服务器。
// More editor's configuration.// ...cloudServices:{// Provide a correct value here. You can find it in the CKEditor Ecosystem Dashboard:// https://dashboard.ckeditor.com/logintokenUrl:'https://example.com/cs-token-endpoint'},licenseKey:'<YOUR_LICENSE_KEY>',// More editor's configuration.// ...
// 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:{format:'A4',margin_top:'20mm',margin_bottom:'20mm',margin_right:'12mm',margin_left:'12mm',page_orientation:'portrait'}},exportWord:{fileName:'my-sample-file.docx',converterOptions:{document:{size:'A4',margin:{top:'20mm',bottom:'20mm',right:'12mm',left:'12mm'}}}},
/* 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:20mm12mm;box-sizing: border-box;border:1px solid hsl(0,0%,88%);background:hsl(0,0%,100%);box-shadow:02px8pxhsla(0,0%,0%,.08);margin:40px auto;}
我们的 main.js 导入 CKEditor 5 的样式。除了为编辑器的可编辑元素设置样式外,它们还具有控制编辑器内部内容外观的样式。当将分页功能与导出为 PDF 和导出为 Word 一起使用时,您需要确保这些样式被发送到转换器。这意味着在生成文档时,它们将被实际应用于内容。它们也不应该在编辑器中的分页线和生成文档中的分页符之间产生差异。
// 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.// ...
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
然后将以下配置添加到导出中
// 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.// ...