8
0

tableclipboard.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <style>
  2. body {
  3. font-family: Helvetica, Arial, sans-serif;
  4. font-size: 14px;
  5. }
  6. .print-selected {
  7. background: #b8e3ff;
  8. }
  9. </style>
  10. <div style="display:flex">
  11. <div style="flex:1;">
  12. <h3>A "content" test editor</h3>
  13. <div id="editor-content">
  14. <p>Jelly-o topping chocolate danish. Powder donut dragée cupcake sesame snaps cotton candy. Cotton candy pudding apple pie liquorice
  15. sugar plum cookie. Powder gummi bears macaroon. Gingerbread soufflé liquorice jelly-o marzipan pudding. Toffee sweet candy canes danish
  16. macaroon cotton candy fruitcake. Sesame snaps cake cookie chocolate cupcake. Ice cream pie apple pie sweet. Wafer ice cream gingerbread
  17. fruitcake donut jelly sweet. Sugar plum chocolate gummi bears. Jelly-o oat cake wafer brownie gingerbread pie dragée. Marshmallow
  18. marzipan candy canes. Cotton candy liquorice cake soufflé pie candy.</p>
  19. <figure class="table" style="width:60%;">
  20. <table
  21. style="background-color:hsl(0,0%,90%);border-bottom:2px solid hsl(30, 75%, 60%);border-left:2px solid hsl(30, 75%, 60%);border-right:2px solid hsl(30, 75%, 60%);border-top:2px solid hsl(30, 75%, 60%);">
  22. <thead>
  23. <tr>
  24. <th>0</th>
  25. <th>1</th>
  26. <th>2</th>
  27. <th>3</th>
  28. <th>4</th>
  29. </tr>
  30. </thead>
  31. <tbody>
  32. <tr>
  33. <td>a</td>
  34. <td>b</td>
  35. <td style="border-bottom:4px dashed hsl(0, 75%, 60%);border-left:4px dashed hsl(0, 75%, 60%);border-right:4px dashed hsl(0, 75%, 60%);border-top:4px dashed hsl(0, 75%, 60%);height:30px;text-align:right;vertical-align:top;width:30px;">
  36. c
  37. </td>
  38. <td>d</td>
  39. <td><i><strong>e</strong></i></td>
  40. </tr>
  41. <tr>
  42. <td style="background-color:hsl(210,75%,60%);">f</td>
  43. <td style="background-color:hsl(210,75%,60%);">g</td>
  44. <td style="background-color:hsl(210,75%,60%);">h</td>
  45. <td style="background-color:hsl(210,75%,60%);">i</td>
  46. <td style="background-color:hsl(210,75%,60%);"><i><strong>j</strong></i></td>
  47. </tr>
  48. <tr>
  49. <td>k</td>
  50. <td>l</td>
  51. <td>m</td>
  52. <td>n</td>
  53. <td><i><strong>o</strong></i></td>
  54. </tr>
  55. <tr>
  56. <td>p</td>
  57. <td>q</td>
  58. <td>r</td>
  59. <td>s</td>
  60. <td>t</td>
  61. </tr>
  62. </tbody>
  63. </table>
  64. </figure>
  65. </div>
  66. <h3>A "geometry" test editor</h3>
  67. <div id="editor-geometry">
  68. <figure class="table">
  69. <table>
  70. <thead>
  71. <tr>
  72. <th>a</th>
  73. <th>b</th>
  74. <th>c</th>
  75. <th>d</th>
  76. <th>e</th>
  77. <th>f</th>
  78. <th>g</th>
  79. <th>h</th>
  80. <th>i</th>
  81. </tr>
  82. </thead>
  83. <tbody>
  84. <tr>
  85. <td>00</td>
  86. <td>01</td>
  87. <td rowspan="4">02</td>
  88. <td>03</td>
  89. <td colspan="2" rowspan="7">04</td>
  90. <td>07</td>
  91. <td>07</td>
  92. <td>08</td>
  93. </tr>
  94. <tr>
  95. <td>10</td>
  96. <td>11</td>
  97. <td>13</td>
  98. <td>17</td>
  99. <td>17</td>
  100. <td>18</td>
  101. </tr>
  102. <tr>
  103. <td>20</td>
  104. <td>21</td>
  105. <td>23</td>
  106. <td colspan="3">27</td>
  107. </tr>
  108. <tr>
  109. <td>30</td>
  110. <td>31</td>
  111. <td>33</td>
  112. <td>37</td>
  113. <td colspan="2">37</td>
  114. </tr>
  115. <tr>
  116. <td colspan="4">40</td>
  117. <td>47</td>
  118. <td>47</td>
  119. <td>48</td>
  120. </tr>
  121. <tr>
  122. <td>50</td>
  123. <td>51</td>
  124. <td>52</td>
  125. <td>53</td>
  126. <td rowspan="4">57</td>
  127. <td>57</td>
  128. <td>58</td>
  129. </tr>
  130. <tr>
  131. <td>60</td>
  132. <td colspan="3">61</td>
  133. <td>67</td>
  134. <td>68</td>
  135. </tr>
  136. <tr>
  137. <td>70</td>
  138. <td rowspan="2">71</td>
  139. <td>72</td>
  140. <td>73</td>
  141. <td>74</td>
  142. <td>75</td>
  143. <td>77</td>
  144. <td>78</td>
  145. </tr>
  146. <tr>
  147. <td>80</td>
  148. <td>82</td>
  149. <td>83</td>
  150. <td>84</td>
  151. <td>85</td>
  152. <td>87</td>
  153. <td>88</td>
  154. </tr>
  155. </tbody>
  156. </table>
  157. </figure>
  158. </div>
  159. </div>
  160. <div style="padding-left: 2em;flex: 1;">
  161. <h3>Content editable to test paste</h3>
  162. <div contenteditable="true" class="ck-content" style="padding: 1em;border: 1px dotted #333;">
  163. paste here
  164. </div>
  165. </div>
  166. </div>