all-features.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  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. <hr>
  150. <h2>Link images + Link decorators</h2>
  151. <table>
  152. <tr>
  153. <td>Linked text</td>
  154. <td>Linked image (<code>figure > a > img</code>)</td>
  155. <td>Linked image (<code>a > img</code>)</td>
  156. </tr>
  157. <tr>
  158. <td>
  159. <p>
  160. <a href="https://cksource.com" target="_blank" rel="noopener noreferrer" download="download">https://cksource.com</a>
  161. </p>
  162. </td>
  163. <td>
  164. <figure class="image">
  165. <a class="gallery" href="https://cksource.com">
  166. <img src="sample.jpg" alt="bar">
  167. </a>
  168. <figcaption>Caption</figcaption>
  169. </figure>
  170. </td>
  171. <td>
  172. <a class="gallery" href="https://cksource.com" target="_blank" rel="noopener noreferrer" download="download">
  173. <img src="sample.jpg" alt="bar">
  174. </a>
  175. </td>
  176. </tr>
  177. </table>
  178. <div class="page-break" style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>
  179. <h2>HTML embed</h2>
  180. <h3><code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> tags as HTML snippet</h3>
  181. <div class="raw-html-embed">
  182. <details open>
  183. <summary>Details</summary>
  184. Something small enough to escape casual notice.
  185. </details>
  186. </div>
  187. <h3><code>&lt;video&gt;</code> tag as HTML snippet</h3>
  188. <div class="raw-html-embed">
  189. <video width="320" height="240" controls>
  190. <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  191. <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
  192. Your browser does not support the video tag.
  193. </video>
  194. </div>
  195. <h3><code>&lt;iframe&gt;</code> tag as HTML snippet</h3>
  196. <div class="raw-html-embed">
  197. <iframe src="http://techslides.com/demos/samples/sample.txt"></iframe>
  198. </div>
  199. <h2>Paste from Office</h2>
  200. <h3>Paste here: </h3>
  201. <p></p>
  202. </div>
  203. <style>
  204. #print-data-container {
  205. position: absolute;
  206. width: 1px;
  207. height: 1px;
  208. margin: -1px;
  209. border: 0;
  210. padding: 0;
  211. white-space: nowrap;
  212. clip-path: inset(100%);
  213. clip: rect(0 0 0 0);
  214. overflow: hidden;
  215. }
  216. </style>