markers.html 1.0 KB

1234567891011121314151617181920212223242526272829303132
  1. <head>
  2. <style>
  3. .h-red { display: inline-block; background: #FF0000; }
  4. .h-yellow { display: inline-block; background: #FFFF00; }
  5. </style>
  6. </head>
  7. <div id="editor">
  8. <p>Lorem ipsum dolor sit amet.</p>
  9. <p>Foobar.</p>
  10. </div>
  11. <br/>
  12. <div class="buttons">
  13. <button id="add-yellow">Add yellow</button>
  14. <button id="add-red">Add red</button>
  15. <button id="remove-marker">Remove marker</button>
  16. <br />
  17. <button id="move-to-start">Move selection to start</button>
  18. <button id="move-left">Move selection one char left</button>
  19. <button id="move-right">Move selection one char right</button>
  20. </div>
  21. <br /><br />
  22. <small>
  23. <em>
  24. Keep in mind that this is just a simple demo.<br />
  25. Highlighted markers do not merge (in model), remove button removes the first marker range which contains selection anchor.<br />
  26. Once highlighted, highlight cannot be overwritten.<br />
  27. Multi-element ranges are not supported<br />
  28. Moving to the start button works only for flat ranges<br />
  29. These are all known limitations of the demo.
  30. </em>
  31. </small>