integration.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <div id="editor">
  2. <h1 style="text-align:center"><img alt="Bilancino Hotel logo" src="https://ckeditor.com/docs/ckeditor4/latest/examples/assets/image/bilancino-logo.png" style="float:right;height:75px;width:75px;" /><span style="font-family:Georgia,serif">The Flavorful Tuscany Meetup</span></h1>
  3. <h2 style="text-align:center"><span style="font-family:Georgia,serif"><span style="color:#2980b9">Welcome letter</span></span></h2>
  4. <p>Dear Guest,</p>
  5. <p>We are delighted to welcome you to the annual <em>Flavorful Tuscany Meetup</em> and hope you will enjoy the programme as well as your stay at the <a href="https://ckeditor.com">Bilancino Hotel</a>.</p>
  6. <p>Please find attached the full schedule of the event.</p>
  7. <blockquote>
  8. <p>The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!</p>
  9. <p>Angelina Calvino, food journalist</p>
  10. </blockquote>
  11. <p>Please arrive at the <a href="https://ckeditor.com">Bilancino Hotel</a> reception desk at least <strong>half an hour earlier</strong> to make sure that the registration process goes as smoothly as possible.</p>
  12. <p>We look forward to welcoming you to the event.</p>
  13. <p><img alt="Victoria Valc signature" src="https://ckeditor.com/docs/ckeditor4/latest/examples/assets/image/signature.png" style="height:101px;width:180px" /></p>
  14. <p><span style="font-size:16px"><strong>Victoria Valc</strong></span></p>
  15. <p><strong>Event Manager<br />
  16. Bilancino Hotel</strong></p>
  17. <p>&nbsp;</p>
  18. <div style="page-break-after: always"><span style="display:none">&nbsp;</span></div>
  19. <p>&nbsp;</p>
  20. <h2 style="text-align:center"><span style="font-family:Georgia,serif"><span style="color:#2980b9">The Flavorful Tuscany Meetup Schedule</span></span></h2>
  21. <table border="1" cellspacing="0" style="border-collapse:collapse; width:597px">
  22. <thead>
  23. <tr>
  24. <th colspan="2" style="background-color:#999999"><span style="color:#ffffff">Saturday, July 14</span></th>
  25. </tr>
  26. </thead>
  27. <tbody>
  28. <tr>
  29. <td style="background-color:#e6e6e6; text-align:center">9:30 AM - 11:30 AM</td>
  30. <td>
  31. <p><strong>Americano vs. Brewed - &ldquo;know your coffee&rdquo;</strong> with:&nbsp;</p>
  32. <ul>
  33. <li>Giulia Bianchi</li>
  34. <li>Stefano Garau</li>
  35. <li>Giuseppe Russo</li>
  36. </ul>
  37. </td>
  38. </tr>
  39. <tr>
  40. <td style="background-color:#e6e6e6; text-align:center">1:00 PM - 3:00 PM</td>
  41. <td>
  42. <p><strong>Pappardelle al pomodoro</strong> - live cooking&nbsp;<sup>1</sup></p>
  43. <p>Incorporate the freshest ingredients&nbsp;<br />
  44. with Rita Fresco</p>
  45. </td>
  46. </tr>
  47. <tr>
  48. <td style="background-color:#e6e6e6; text-align:center">5:00 PM - 8:00 PM</td>
  49. <td>
  50. <p><strong>Tuscan vineyards at a glance</strong> - wine-tasting&nbsp;<br />
  51. with Frederico Riscoli</p>
  52. </td>
  53. </tr>
  54. </tbody>
  55. </table>
  56. <p>&nbsp;</p>
  57. <p><sup>1</sup>&nbsp;<em><span style="background-color:#98e64c">Registration for the live cooking session is required as seats are limited.</span></em></p>
  58. <p>&nbsp;</p>
  59. <hr>
  60. <h2 style="text-align: center;"><span style="color:#2980b9"><span style="font-family:Georgia,serif">Driving directions from the airport</span></span></h2>
  61. <ol>
  62. <li>Head southeast on R138&nbsp;toward Nassau St.</li>
  63. <li>Follow R138 and R148 to Bridgefoot St/R804.
  64. <ol>
  65. <li>Use the left 2 lanes to turn slightly left onto Lincoln Pl/R138.</li>
  66. <li>Turn left onto Westland Row/R118/R138.</li>
  67. <li>Use any lane to turn left onto Pearse St/R118/R138/R802.</li>
  68. <li>Continue to follow R138/R802.</li>
  69. </ol>
  70. </li>
  71. <li>Turn left onto Burgh Quay/George&#39;s Quay/R105/R138.</li>
  72. <li>Continue onto Aston Quay/R148.
  73. <ul>
  74. <li>Continue to follow R148.</li>
  75. </ul>
  76. </li>
  77. <li>Turn left onto Bridgefoot St/R804.
  78. <ul>
  79. <li>Continue to follow R804.</li>
  80. </ul>
  81. </li>
  82. <li>After approximately 2 minutes, Bilancino Hotel will be on your left.</li>
  83. </ol>
  84. <p>&nbsp;</p>
  85. </div>
  86. <div id="preview">
  87. <style>
  88. #preview iframe {
  89. width: 840px;
  90. height: 500px;
  91. }
  92. </style>
  93. <h2>Document preview (based on send HTML and CSS)</h2>
  94. </div>
  95. <script>
  96. exportPdfUtils.initManualTest();
  97. var editor = CKEDITOR.replace( 'editor', exportPdfUtils.getDefaultConfig( 'manual', {
  98. width: 840,
  99. height: 400
  100. } ) );
  101. editor.on( 'exportPdf', function( evt ) {
  102. var oldIframe = document.querySelector( '#preview iframe' ),
  103. html;
  104. if ( oldIframe && oldIframe.parentNode ) {
  105. oldIframe.parentNode.removeChild( oldIframe );
  106. }
  107. // Align iframe HTML with the one on the endpoint side by adding explicit encoding and DOCTYPE.
  108. html = '<!DOCTYPE html><html><head><style>' + evt.data.css + '</style><meta charset="UTF-8"></head><body>' + evt.data.html + '</body></html>';
  109. var iframe = document.createElement( 'iframe' );
  110. document.querySelector( '#preview' ).appendChild( iframe );
  111. iframe.contentWindow.document.open();
  112. iframe.contentWindow.document.write( html );
  113. iframe.contentWindow.document.close();
  114. }, null, null, 16 );
  115. </script>