tablemocking.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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. .diff-add {
  20. color: hsl( 120, 70%, 35% );
  21. }
  22. .diff-del {
  23. color: hsl( 0, 80%, 45% );
  24. }
  25. #input-status {
  26. color: hsl( 0, 90%, 50% );
  27. }
  28. </style>
  29. <div style="margin-bottom: 10px;">
  30. <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>
  31. <textarea id="model-data">
  32. [
  33. [ '00', '01', '02', '03', '04' ],
  34. [ '10', '11', '12', '13', '14' ],
  35. [ '20', '21', '22', '23', '24' ],
  36. [ '30', '31', '32', '33', '34' ],
  37. [ '40', '41', '42', '43', '44' ]
  38. ]
  39. </textarea>
  40. <button type="button" id="clear-content">Clear editor</button>
  41. <button type="button" id="set-model-data">↓ Set model data ↓</button>
  42. <button type="button" id="get-model-data">↑ Get model data ↑</button>
  43. <button type="button" id="renumber-cells">Renumber cells</button>
  44. <label><input type="checkbox" id="use-letters" checked="false">Use letters</label>
  45. <span id="input-status"></span>
  46. </div>
  47. <div id="editor">
  48. </div>
  49. <pre id="ascii-art"></pre>