editor.html 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="/o2_lib/htmleditor/ckeditor4114/ckeditor.js"></script>
  6. <title>Document Editor</title>
  7. <style type="text/css">
  8. /* Minimal styling to center the editor in this sample */
  9. body {
  10. padding: 30px;
  11. display: flex;
  12. align-items: center;
  13. text-align: center;
  14. }
  15. .container {
  16. margin: 0 auto;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="container">
  22. <h2><label for="editor1">Document Editor</label></h2>
  23. <textarea id="editor1">
  24. &lt;h2 style="text-align: center;"&gt;The Flavorful Tuscany Meetup&lt;/h2&gt;
  25. &lt;p style="text-align: center;"&gt;&lt;span style="color: #007ac9;"&gt;&lt;strong&gt;Welcome letter&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
  26. &lt;p&gt;Dear Guest,&lt;/p&gt;
  27. &lt;p&gt;We are delighted to welcome you to the annual &lt;em&gt;Flavorful Tuscany Meetup&lt;/em&gt; and hope you will enjoy the programme as well as your stay at the Bilancino Hotel.&lt;/p&gt;
  28. &lt;p&gt;Please find below the full schedule of the event.&lt;/p&gt;
  29. &lt;table class="schedule" cellpadding="15" cellspacing="0" style="border-collapse:collapse;width:100%;"&gt;
  30. &lt;thead&gt;
  31. &lt;tr&gt;
  32. &lt;th colspan="2" scope="col" style="background-color: #F2F9FF; text-align: center; font-size: 21px;"&gt;&lt;span&gt;Saturday, July 14&lt;/span&gt;&lt;/th&gt;
  33. &lt;/tr&gt;
  34. &lt;/thead&gt;
  35. &lt;tbody&gt;
  36. &lt;tr&gt;
  37. &lt;td style="white-space:nowrap;"&gt;&lt;span&gt;9:30 AM - 11:30 AM&lt;/span&gt;&lt;/td&gt;
  38. &lt;td&gt;&lt;span&gt;Americano vs. Brewed - “know your coffee” session with &lt;strong&gt;Stefano Garau&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
  39. &lt;/tr&gt;
  40. &lt;tr&gt;
  41. &lt;td style="white-space:nowrap;"&gt;&lt;span&gt;1:00 PM - 3:00 PM&lt;/span&gt;&lt;/td&gt;
  42. &lt;td&gt;&lt;span&gt;Pappardelle al pomodoro - live cooking session with &lt;strong&gt;Rita Fresco&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
  43. &lt;/tr&gt;
  44. &lt;tr&gt;
  45. &lt;td style="white-space:nowrap;"&gt;&lt;span&gt;5:00 PM - 8:00 PM&lt;/span&gt;&lt;/td&gt;
  46. &lt;td&gt;&lt;span&gt;Tuscan vineyards at a glance - wine-tasting session with &lt;strong&gt;Frederico Riscoli&lt;/strong&gt;&lt;/span&gt;&lt;/td&gt;
  47. &lt;/tr&gt;
  48. &lt;/tbody&gt;
  49. &lt;/table&gt;
  50. &lt;blockquote&gt;
  51. &lt;p&gt;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!&lt;/p&gt;
  52. &lt;p&gt;Angelina Calvino, food journalist&lt;/p&gt;
  53. &lt;/blockquote&gt;
  54. &lt;p&gt;Please arrive at the Bilancino Hotel reception desk at least &lt;strong&gt;half an hour earlier&lt;/strong&gt; to make sure that the registration process goes as smoothly as possible.&lt;/p&gt;
  55. &lt;p&gt;We look forward to welcoming you to the event.&lt;/p&gt;
  56. &lt;p&gt;&lt;/p&gt;
  57. &lt;p&gt;&lt;strong&gt;Victoria Valc&lt;/strong&gt;&lt;/p&gt;
  58. &lt;p&gt;&lt;strong&gt;Event Manager&lt;/strong&gt;&lt;/p&gt;
  59. &lt;p&gt;&lt;strong&gt;Bilancino Hotel&lt;/strong&gt;&lt;/p&gt;
  60. </textarea>
  61. </div>
  62. <script>
  63. CKEDITOR.inline( 'editor1', {
  64. toolbar: [
  65. { name: 'document', items: [ 'Print' ] },
  66. { name: 'clipboard', items: [ 'Undo', 'Redo' ] },
  67. { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
  68. { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting' ] },
  69. { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
  70. { name: 'align', items: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
  71. { name: 'links', items: [ 'Link', 'Unlink' ] },
  72. { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
  73. { name: 'insert', items: [ 'Image', 'Table' ] },
  74. { name: 'tools', items: [ 'Maximize' ] },
  75. { name: 'editing', items: [ 'Scayt' ] }
  76. ]});
  77. </script>
  78. </body>
  79. </html>