decouplededitor-editable.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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">
  9. <div class="editor__editable">
  10. <h2>This element becomes the editable</h2>
  11. <p>It has the initial editor data. It should keep it after the editor is destroyed too.</p>
  12. </div>
  13. </div>
  14. <style>
  15. .editable-container,
  16. .toolbar-container {
  17. position: relative;
  18. border: 1px solid red;
  19. }
  20. .editable-container::after,
  21. .toolbar-container::after {
  22. content: attr(class);
  23. position: absolute;
  24. background: red;
  25. color: #fff;
  26. top: 0;
  27. right: 0;
  28. font: 10px/2 monospace;
  29. padding: .1em .3em;
  30. }
  31. .toolbar-container {
  32. padding: 1em;
  33. }
  34. .editable-container {
  35. padding: 3em;
  36. overflow-y: scroll;
  37. max-height: 300px;
  38. }
  39. .editable-container div.editor__editable {
  40. background: yellow;
  41. }
  42. .editable-container .ck-editor__editable {
  43. min-height: 21cm;
  44. padding: 2em;
  45. border: 1px #D3D3D3 solid;
  46. border-radius: var(--ck-border-radius);
  47. background: white;
  48. box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  49. }
  50. </style>