8
0

inline-widget.html 843 B

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