page-break.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals window, document, console */
  6. import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
  7. import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
  8. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  9. ClassicEditor.builtinPlugins.push( PageBreak );
  10. ClassicEditor
  11. .create( document.querySelector( '#snippet-page-break' ), {
  12. toolbar: {
  13. items: [
  14. 'heading',
  15. '|',
  16. 'bold',
  17. 'italic',
  18. 'bulletedList',
  19. 'numberedList',
  20. 'blockQuote',
  21. 'link',
  22. '|',
  23. 'imageUpload',
  24. 'mediaEmbed',
  25. 'insertTable',
  26. 'pageBreak',
  27. '|',
  28. 'undo',
  29. 'redo',
  30. ],
  31. viewportTopOffset: window.getViewportTopOffsetConfig()
  32. },
  33. image: {
  34. styles: [
  35. 'full',
  36. 'alignLeft',
  37. 'alignRight'
  38. ],
  39. toolbar: [
  40. 'imageStyle:alignLeft',
  41. 'imageStyle:full',
  42. 'imageStyle:alignRight',
  43. '|',
  44. 'imageTextAlternative'
  45. ]
  46. },
  47. table: {
  48. contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
  49. },
  50. cloudServices: CS_CONFIG
  51. } )
  52. .then( editor => {
  53. window.editor = editor;
  54. // The "Print editor data" button logic.
  55. document.querySelector( '#print-data-action' ).addEventListener( 'click', () => {
  56. const snippetCSSElement = [ ...document.querySelectorAll( 'link' ) ]
  57. .find( linkElement => linkElement.href.endsWith( 'snippet.css' ) );
  58. const iframeElement = document.querySelector( '#print-data-container' );
  59. iframeElement.srcdoc = '<html>' +
  60. '<head>' +
  61. `<title>${ document.title }</title>` +
  62. `<link rel="stylesheet" href="${ snippetCSSElement.href }" type="text/css">` +
  63. '</head>' +
  64. '<body class="ck-content">' +
  65. editor.getData() +
  66. '<script>' +
  67. 'window.addEventListener( \'DOMContentLoaded\', () => { window.print(); } );' +
  68. '</script>' +
  69. '</body>' +
  70. '</html>';
  71. } );
  72. } )
  73. .catch( err => {
  74. console.error( err.stack );
  75. } );