virtualselection.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <style>
  2. span.virtual-selection-yellow {
  3. background-color: yellow;
  4. }
  5. span.virtual-selection-blue {
  6. background-color: blue;
  7. }
  8. span.virtual-selection-red {
  9. background-color: red;
  10. }
  11. .ck-widget.fancy-widget {
  12. background-color: black;
  13. color: white;
  14. text-align: center;
  15. height: 40px;
  16. line-height: 40px;
  17. }
  18. .ck-widget.fancy-widget.virtual-selection-yellow {
  19. background-color: yellow;
  20. color: black;
  21. }
  22. .ck-widget.fancy-widget.virtual-selection-blue {
  23. background-color: blue;
  24. color: black;
  25. }
  26. .ck-widget.fancy-widget.virtual-selection-red {
  27. background-color: red;
  28. color: black;
  29. }
  30. button {
  31. width: 200px;
  32. }
  33. </style>
  34. <div id="editor">
  35. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
  36. <figure></figure>
  37. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at diam quis justo imperdiet posuere non eu tortor. Mauris vel magna eu sem hendrerit varius. Ut imperdiet velit ut ante interdum convallis. Vestibulum vitae lacinia mi. </p>
  38. </div>
  39. <h2>Markers</h2>
  40. <button id="add-marker-yellow">Set yellow marker</button><button id="remove-marker-yellow">Remove yellow marker</button>
  41. <br />
  42. <button id="add-marker-red">Set red marker</button><button id="remove-marker-red">Remove red marker</button>
  43. <br />
  44. <button id="add-marker-blue">Set blue marker</button><button id="remove-marker-blue">Remove blue marker</button>
  45. <br />
  46. <button id="remove-markers">Remove all markers</button>