resize.html 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <section id="resizer-options">
  2. <h1>Options</h1>
  3. <p>Use the options below to adjust resizer behavior.</p>
  4. <h2>Resizing strategy</h2>
  5. <p>
  6. <select name="strategy" id="strategy">
  7. <option value="center">Center</option>
  8. <option value="top-anchored" selected>Top-anchored center</option>
  9. <option value="side">Side</option>
  10. </select>
  11. </p>
  12. <h2>Visible resizers</h2>
  13. <ol>
  14. <li><input type="checkbox" name="handler[]" value="top-left" id="resizer-checkbox__top-left"> <label
  15. for="resizer-checkbox__top-left">top-left</label></li>
  16. <li><input type="checkbox" name="handler[]" value="top-right" id="resizer-checkbox__top-right"> <label
  17. for="resizer-checkbox__top-right">top-right</label></li>
  18. <li><input type="checkbox" name="handler[]" value="bottom-right" id="resizer-checkbox__bottom-right"> <label
  19. for="resizer-checkbox__bottom-right">bottom-right</label></li>
  20. <li><input type="checkbox" name="handler[]" value="bottom-left" id="resizer-checkbox__bottom-left"> <label
  21. for="resizer-checkbox__bottom-left">bottom-left</label></li>
  22. </ol>
  23. <p><input type="checkbox" name="resize-image" value="true" id="resize-image" checked> <label
  24. for="resize-image">Resize using image directly</label></p>
  25. </section>
  26. <style>
  27. .ck-content .image-style-side,
  28. .ck-content .image-style-align-left,
  29. .ck-content .image-style-align-center,
  30. .ck-content .image-style-align-right {
  31. max-width: 100%;
  32. }
  33. .fancyEditorWrapper figure
  34. {
  35. padding: 20px;
  36. }
  37. </style>
  38. <div id="editor">
  39. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
  40. et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
  41. leo interdum. </p>
  42. <figure class="image image-style-side">
  43. <img src="sample.jpg" alt="" height="60" />
  44. </figure>
  45. <figure class="image">
  46. <img src="sample.jpg" alt="" />
  47. </figure>
  48. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
  49. et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
  50. leo interdum. </p>
  51. </div>
  52. <div class="fancyEditorWrapper">
  53. <h2>Fancy editor</h2>
  54. <p>This is editor with fancier image styling. Images have some internal padding.</p>
  55. <div id="fancyEditor">
  56. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
  57. tellus
  58. et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
  59. lobortis
  60. leo interdum. </p>
  61. <figure class="image image-style-side">
  62. <img src="sample.jpg" alt="" height="60" />
  63. </figure>
  64. <figure class="image">
  65. <img src="sample.jpg" alt="" />
  66. </figure>
  67. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
  68. tellus
  69. et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
  70. lobortis
  71. leo interdum. </p>
  72. </div>
  73. </div>