inline-widget.html 820 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <div id="editor">
  2. <h1>Hello <placeholder>{name}</placeholder>!</h1>
  3. <p>We would like to invite you to <placeholder>{place}</placeholder> that will take place on <placeholder>{date}</placeholder>.</p>
  4. </div>
  5. <h2>Model contents:</h2>
  6. <pre id="model"></pre>
  7. <style>
  8. placeholder {
  9. background: #ffff00;
  10. padding: 4px 2px;
  11. outline-offset: -2px;
  12. line-height: 1em;
  13. }
  14. placeholder::selection {
  15. display: none;
  16. }
  17. /* This will show box when the fake selection is active. */
  18. .ck.ck-content div[style*="left: -9999px;"]::before {
  19. background: hsla(9,100%,56%,.3);
  20. border: 1px dotted hsl(15, 100%, 43%);
  21. color: #333;
  22. content: 'fake selection set';
  23. display: block;
  24. height: 20px;
  25. left: calc(50% - 60px);
  26. line-height: 20px;
  27. padding: 2px 5px;
  28. position: fixed;
  29. top: 5px;
  30. z-index: 1;
  31. }
  32. </style>