inline-widget.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  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. /* Set margins before and after the inline widget so the cursor between two instances is visible when one of them is focused.
  14. Optimized for Firefox due to bug in rendering selection in ZWS on Chrome. See ckeditor5#1607. */
  15. margin-right: 1px;
  16. margin-left: 3px;
  17. }
  18. placeholder::selection {
  19. display: none;
  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>