|
|
@@ -15,15 +15,35 @@
|
|
|
|
|
|
<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>
|
|
|
+ <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>
|
|
|
+ <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
|
|
|
@@ -39,13 +59,31 @@
|
|
|
<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>
|
|
|
|
|
|
- <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%;
|
|
|
- }
|
|
|
- </style>
|
|
|
+ <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>
|