| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <section id="resizer-options">
- <h1>Options</h1>
- <p>Use the options below to adjust resizer behavior.</p>
- <h2>Resizing strategy</h2>
- <p>
- <select name="strategy" id="strategy">
- <option value="center">Center</option>
- <option value="top-anchored" selected>Top-anchored center</option>
- <option value="side">Side</option>
- </select>
- </p>
- <h2>Visible resizers</h2>
- <ol>
- <li><input type="checkbox" name="handler[]" value="top-left" id="resizer-checkbox__top-left"> <label
- for="resizer-checkbox__top-left">top-left</label></li>
- <li><input type="checkbox" name="handler[]" value="top-right" id="resizer-checkbox__top-right"> <label
- for="resizer-checkbox__top-right">top-right</label></li>
- <li><input type="checkbox" name="handler[]" value="bottom-right" id="resizer-checkbox__bottom-right"> <label
- for="resizer-checkbox__bottom-right">bottom-right</label></li>
- <li><input type="checkbox" name="handler[]" value="bottom-left" id="resizer-checkbox__bottom-left"> <label
- for="resizer-checkbox__bottom-left">bottom-left</label></li>
- </ol>
- <p><input type="checkbox" name="resize-image" value="true" id="resize-image" checked> <label
- for="resize-image">Resize using image directly</label></p>
- </section>
- <style>
- .ck-content .image-style-side,
- .ck-content .image-style-align-left,
- .ck-content .image-style-align-center,
- .ck-content .image-style-align-right {
- max-width: 100%;
- }
- .fancyEditorWrapper figure
- {
- padding: 20px;
- }
- </style>
- <div id="editor">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
- et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
- leo interdum. </p>
- <figure class="image image-style-side">
- <img src="sample.jpg" alt="" height="60" />
- </figure>
- <figure class="image">
- <img src="sample.jpg" alt="" />
- </figure>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
- et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
- leo interdum. </p>
- </div>
- <div class="fancyEditorWrapper">
- <h2>Fancy editor</h2>
- <p>This is editor with fancier image styling. Images have some internal padding.</p>
- <div id="fancyEditor">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
- tellus
- et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
- lobortis
- leo interdum. </p>
- <figure class="image image-style-side">
- <img src="sample.jpg" alt="" height="60" />
- </figure>
- <figure class="image">
- <img src="sample.jpg" alt="" />
- </figure>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
- tellus
- et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
- lobortis
- leo interdum. </p>
- </div>
- </div>
|