memory.html 898 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <p>
  2. <button id="destroyEditor">Destroy editor</button>
  3. <button id="initEditor">Init editor</button>
  4. </p>
  5. <h2>The toolbar</h2>
  6. <div class="toolbar-container"></div>
  7. <h2>The editable</h2>
  8. <div class="editable-container"></div>
  9. <style>
  10. .editable-container,
  11. .toolbar-container {
  12. position: relative;
  13. border: 1px solid red;
  14. }
  15. .editable-container::after,
  16. .toolbar-container::after {
  17. content: attr(class);
  18. position: absolute;
  19. background: red;
  20. color: #fff;
  21. top: 0;
  22. right: 0;
  23. font: 10px/2 monospace;
  24. padding: .1em .3em;
  25. }
  26. .toolbar-container{
  27. padding: 1em;
  28. }
  29. .editable-container {
  30. padding: 3em;
  31. overflow-y: scroll;
  32. max-height: 300px;
  33. }
  34. .editable-container .ck-editor__editable {
  35. min-height: 21cm;
  36. padding: 2em;
  37. border: 1px #D3D3D3 solid;
  38. border-radius: var(--ck-border-radius);
  39. background: white;
  40. box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  41. }
  42. </style>