inline-widget.html 891 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  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. placeholder:before{
  18. content: '{'
  19. }
  20. placeholder:after{
  21. content: '}'
  22. }
  23. /* This will show box when the fake selection is active. */
  24. .ck.ck-content div[style*="left: -9999px;"]:before {
  25. background: hsla(9,100%,56%,.3);
  26. border: 1px dotted hsl(15, 100%, 43%);
  27. color: #333;
  28. content: 'fake selection set';
  29. display: block;
  30. height: 20px;
  31. left: calc(50% - 60px);
  32. line-height: 20px;
  33. padding: 2px 5px;
  34. position: fixed;
  35. top: 5px;
  36. z-index: 1;
  37. }
  38. </style>