tablemocking.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <style>
  2. body {
  3. font-family: Helvetica, Arial, sans-serif;
  4. font-size: 14px;
  5. }
  6. textarea#model-data {
  7. white-space: pre;
  8. font-family: monospace;
  9. display: block;
  10. width: 100%;
  11. height: 100px;
  12. box-sizing: border-box;
  13. margin: 10px 0;
  14. }
  15. pre, code {
  16. font-size: 11px;
  17. font-family: Menlo, Consolas, Lucida Console, Courier New, dejavu sans mono, monospace;
  18. }
  19. #table-tools pre {
  20. background: hsl( 0, 0%, 95% );
  21. max-height:300px;
  22. overflow: auto;
  23. padding: 10px;
  24. }
  25. .diff-add {
  26. color: hsl( 120, 70%, 35% );
  27. }
  28. .diff-del {
  29. color: hsl( 0, 80%, 45% );
  30. }
  31. #input-status {
  32. color: hsl( 0, 90%, 50% );
  33. }
  34. #tools {
  35. margin-bottom: 10px;
  36. }
  37. #tools input[type="checkbox"] {
  38. vertical-align: middle;
  39. }
  40. #tools label > span {
  41. vertical-align: middle;
  42. display: inline-block;
  43. }
  44. </style>
  45. <div id="tools">
  46. <label for="model-data">Table data as expected by <a href="https://github.com/ckeditor/ckeditor5-table/blob/1004f9106110be9de125825afd491a1618b71271/tests/_utils/utils.js#L48">modelTable</a> helper function:</label>
  47. <textarea id="model-data">
  48. [
  49. [ '00', '01', '02', '03', '04' ],
  50. [ '10', '11', '12', '13', '14' ],
  51. [ '20', '21', '22', '23', '24' ],
  52. [ '30', '31', '32', '33', '34' ],
  53. [ '40', '41', '42', '43', '44' ]
  54. ]
  55. </textarea>
  56. <button type="button" id="clear-content">Clear editor</button>
  57. <button type="button" id="set-model-data">↓ Set model data ↓</button>
  58. <button type="button" id="get-model-data">↑ Get model data ↑</button>
  59. <button type="button" id="renumber-cells">Renumber cells</button>
  60. <label><input type="checkbox" id="use-letters" checked="false"><span>Use letters</span></label>
  61. <span id="input-status"></span>
  62. </div>
  63. <div id="editor">
  64. </div>
  65. <div id="table-tools">
  66. <pre id="ascii-art"></pre>
  67. <h3>Clipboard preview:</h3>
  68. <pre id="clipboard"></pre>
  69. </div>