all-features.html 5.8 KB

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