memory.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <head>
  2. <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://ckeditor.com 'unsafe-inline' 'unsafe-eval'">
  3. </head>
  4. <p>
  5. <button id="destroyEditor">Destroy editor</button>
  6. <button id="initEditor">Init editor</button>
  7. </p>
  8. <div style="margin-bottom: 10px;">
  9. <button type="button" id="clear-content">Clear editor</button>
  10. <button type="button" id="print-data-action">Open print preview</button>
  11. <button id="read-only">Turn on read-only mode</button>
  12. <iframe id="print-data-container" aria-hidden="true" tabindex="-1"></iframe>
  13. </div>
  14. <div id="editor">
  15. <h2>Lists in the table</h2>
  16. <figure class="table">
  17. <table style="width: 600px;border-bottom:2px dashed hsl(0, 0%, 60%);border-left:2px dashed hsl(0, 0%, 60%);border-right:2px dashed hsl(0, 0%, 60%);border-top:2px dashed hsl(0, 0%, 60%);">
  18. <tbody>
  19. <tr>
  20. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Bulleted list</span></td>
  21. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Numbered list</span></td>
  22. <td style="text-align: center"><span class="text-big" style="font-weight: bold">To do list</span></td>
  23. </tr>
  24. <tr>
  25. <td style="vertical-align:top; width: 33%">
  26. <ul>
  27. <li>UL List item 1</li>
  28. <li>UL List item 2</li>
  29. </ul>
  30. </td>
  31. <td style="vertical-align:top; width: 33%">
  32. <ol>
  33. <li>OL List item 1</li>
  34. <li>OL List item 2</li>
  35. </ol>
  36. </td>
  37. <td style="vertical-align:top; width: 33%">
  38. <ul class="todo-list">
  39. <li>
  40. <label class="todo-list__label">
  41. <input type="checkbox" />
  42. <span class="todo-list__label__description">Foo</span>
  43. </label>
  44. </li>
  45. <li>
  46. <label class="todo-list__label">
  47. <input type="checkbox" checked="checked" />
  48. <span class="todo-list__label__description">Foo</span>
  49. </label>
  50. </li>
  51. </ul>
  52. </td>
  53. </tr>
  54. </tbody>
  55. </table>
  56. </figure>
  57. <h2>Basic features overview</h2>
  58. <p>Lorem <b>ipsum dolor sit </b>amet, consectetur <i>adipisicing elit</i>.<sub>1</sub></p>
  59. <h3>Basic styles</h3>
  60. <p>Ad alias, <s>architecto</s> culpa <b><i>cumque</i></b> dignissimos <code>dolor eos incidunt ipsa itaque</code> <u>laboriosam</u> magnam molestias nihil <i><u>numquam</u></i> odit quam, suscipit <i><s>veritatis</s></i> voluptate voluptatum.<sup>2</sup></p>
  61. <h3>Image</h3>
  62. <figure class="image">
  63. <img alt="bar" src="../sample.jpg">
  64. <figcaption>Caption</figcaption>
  65. </figure>
  66. <h3>Blockquote</h3>
  67. <blockquote>
  68. <p>Quote</p>
  69. <ul>
  70. <li><a href="#">Quoted</a> UL List item 1</li>
  71. <li>Quoted UL List item 2</li>
  72. </ul>
  73. <p>Quote</p>
  74. </blockquote>
  75. <div class="page-break" style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>
  76. <h2>Media with previews in the table</h2>
  77. <figure class="table">
  78. <table style="background-color:hsl(0,0%,90%);border-bottom:2px solid hsl(0, 0%, 0%);border-left:2px solid hsl(0, 0%, 0%);border-right:2px solid hsl(0, 0%, 0%);border-top:2px solid hsl(0, 0%, 0%);">
  79. <tbody>
  80. <tr>
  81. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Service</span></td>
  82. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Preview</span></td>
  83. <td style="text-align: center"><span class="text-big" style="font-weight: bold">URL</span></td>
  84. </tr>
  85. <tr>
  86. <td style="text-align: center"><u>YouTube</u></td>
  87. <td>
  88. <figure class="media">
  89. <oembed url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></oembed>
  90. </figure>
  91. </td>
  92. <td>
  93. <span class="text-small"><a href="https://www.youtube.com/watch?v=ZVv7UMQPEWk">https://www.youtube.com/watch?v=ZVv7UMQPEWk</a></span>
  94. </td>
  95. </tr>
  96. <tr>
  97. <td style="text-align: center"><u>Vimeo</u></td>
  98. <td>
  99. <figure class="media">
  100. <oembed url="https://vimeo.com/1084537"></oembed>
  101. </figure>
  102. </td>
  103. <td>
  104. <span class="text-small"><a href="https://vimeo.com/1084537">https://vimeo.com/1084537</a></span>
  105. </td>
  106. </tr>
  107. </tbody>
  108. </table>
  109. </figure>
  110. <h2>Code blocks in the table</h2>
  111. <figure class="table">
  112. <table style="border-bottom:2px dashed hsl(0, 0%, 60%);border-left:2px dashed hsl(0, 0%, 60%);border-right:2px dashed hsl(0, 0%, 60%);border-top:2px dashed hsl(0, 0%, 60%);">
  113. <tbody>
  114. <tr>
  115. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Language</span></td>
  116. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Code snippet</span></td>
  117. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Language</span></td>
  118. <td style="text-align: center"><span class="text-big" style="font-weight: bold">Code snippet</span></td>
  119. </tr>
  120. <tr>
  121. <td style="text-align: center;vertical-align:top">CSS</td>
  122. <td style="vertical-align:top">
  123. <pre><code class="language-css">body {
  124. color: red;
  125. }
  126. p {
  127. font-size: 10px;
  128. }</code></pre></td>
  129. <td style="text-align: center;vertical-align:top">PHP</td>
  130. <td style="vertical-align:top"><pre><code class="language-php">&lt;?php
  131. function dump( array ...$args ) {
  132. foreach ( $args as $item ) {
  133. var_dump( $item );
  134. }
  135. die;
  136. }</code></pre></td>
  137. </tr>
  138. <tr>
  139. <td style="text-align: center;vertical-align:top">JavaScript</td>
  140. <td style="vertical-align:top">
  141. <pre><code class="language-javascript">function foo() {
  142. console.log( 'indented using 1 tab' );
  143. }
  144. function bar() {
  145. console.log( 'indented using spaces' );
  146. }</code></pre></td>
  147. <td style="text-align: center;vertical-align:top">Plaintext</td>
  148. <td style="vertical-align:top"><pre><code class="language-plaintext">Plain text</code></pre></td>
  149. </tr>
  150. </tbody>
  151. </table>
  152. </figure>
  153. </div>
  154. <style>
  155. #print-data-container {
  156. position: absolute;
  157. width: 1px;
  158. height: 1px;
  159. margin: -1px;
  160. border: 0;
  161. padding: 0;
  162. white-space: nowrap;
  163. clip-path: inset(100%);
  164. clip: rect(0 0 0 0);
  165. overflow: hidden;
  166. }
  167. .custom-class {
  168. margin-top: 100px;
  169. margin-left: 100px;
  170. margin-bottom: 100px;
  171. width: 450px;
  172. }
  173. </style>