1.html 1.1 KB

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