| 1 | <!DOCTYPE html> |
|---|
| 2 | <!-- |
|---|
| 3 | Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. |
|---|
| 4 | For licensing, see LICENSE.html or http://ckeditor.com/license |
|---|
| 5 | --> |
|---|
| 6 | <html> |
|---|
| 7 | <head> |
|---|
| 8 | <title>Replace Textarea by Code — CKEditor Sample</title> |
|---|
| 9 | <meta charset="utf-8"> |
|---|
| 10 | <script src="../ckeditor.js"></script> |
|---|
| 11 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> |
|---|
| 12 | <link href="sample.css" rel="stylesheet"> |
|---|
| 13 | <style> |
|---|
| 14 | .content{ |
|---|
| 15 | background-color: #eee; |
|---|
| 16 | position: absolute; |
|---|
| 17 | top: 0px; |
|---|
| 18 | right: 100px; |
|---|
| 19 | bottom: 0; |
|---|
| 20 | left: 100px; |
|---|
| 21 | width : 600px; |
|---|
| 22 | overflow: scroll; |
|---|
| 23 | margin : 0 auto; |
|---|
| 24 | } |
|---|
| 25 | |
|---|
| 26 | .spacer{ |
|---|
| 27 | margin: 50px; |
|---|
| 28 | } |
|---|
| 29 | |
|---|
| 30 | .editor { |
|---|
| 31 | margin: 50px; |
|---|
| 32 | } |
|---|
| 33 | </style> |
|---|
| 34 | </head> |
|---|
| 35 | <body > |
|---|
| 36 | <div class="content"> |
|---|
| 37 | <div class="spacer"> |
|---|
| 38 | Paste something in the editor while this line of text is still visible. The editor will jump putting the pasted content on top of the editor. This will not happen when you scroll down before pasting. |
|---|
| 39 | </div> |
|---|
| 40 | <div class="editor"> |
|---|
| 41 | |
|---|
| 42 | <textarea id="editor1"> |
|---|
| 43 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue sagittis lorem ac vehicula. Duis varius ex ac nibh dictum laoreet. Nunc quis mi et purus aliquet molestie. Cras sit amet sem gravida, maximus tellus ut, scelerisque dolor. Ut consectetur ligula egestas leo ultrices, ut fermentum ante vehicula. Nulla dignissim pharetra elit, quis tincidunt nisl bibendum in. Nullam ut elit tristique, congue purus non, bibendum eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis aliquam congue mauris eu consectetur. Suspendisse eget leo quis sapien tincidunt suscipit vitae in dui.</p> |
|---|
| 44 | |
|---|
| 45 | <p>Pellentesque dapibus nulla diam, non dictum felis dignissim et. Donec purus ligula, venenatis faucibus tincidunt eget, facilisis eu mi. Morbi porttitor facilisis justo, sed volutpat odio facilisis in. Mauris eu magna vel lacus pharetra elementum sagittis pretium odio. Sed ac ex non diam viverra fermentum a a ipsum. Quisque semper lorem at hendrerit aliquam. Quisque leo enim, sagittis ut ante vel, malesuada facilisis lectus. Etiam mi est, vulputate ac pretium dictum, semper sed nisi. Phasellus sed nibh aliquet, tincidunt mi et, elementum odio. Phasellus posuere sagittis cursus. Aliquam semper sem non maximus rhoncus.</p> |
|---|
| 46 | |
|---|
| 47 | <p>In hac habitasse platea dictumst. Nulla facilisi. Nunc luctus consequat ligula ut euismod. Phasellus ut sapien volutpat sapien blandit ullamcorper. Nullam ultricies tortor velit, ut pharetra libero laoreet eu. Etiam tincidunt vestibulum dolor ac convallis. In hac habitasse platea dictumst. Nunc nec viverra sem. Etiam faucibus pretium iaculis. Aliquam erat volutpat. Integer quis semper ipsum. Morbi ac tortor a nisl pretium viverra quis accumsan sapien. Aliquam lobortis vitae arcu non finibus. Sed consequat sem magna, fringilla ultrices quam aliquet nec. Donec at ex vel felis bibendum eleifend. Fusce ornare augue in massa dictum sollicitudin.</p> |
|---|
| 48 | |
|---|
| 49 | <p>Etiam dignissim fermentum tincidunt. Nullam eu libero ante. Ut placerat eros cursus, convallis nunc id, ultrices velit. Fusce vitae volutpat enim, eget consectetur libero. Praesent non dui lacus. Cras ut lacus turpis. Vivamus bibendum sem eget dui rutrum, in gravida purus posuere. Integer commodo odio felis, ac fringilla enim ultrices vitae. Fusce pulvinar euismod est, sed ultrices elit convallis ut. Praesent efficitur magna dolor, eu fermentum metus aliquam nec. Nullam consequat, dui hendrerit eleifend egestas, nisl mauris cursus nulla, sed iaculis nunc dolor vel magna.</p> |
|---|
| 50 | |
|---|
| 51 | <p>Vestibulum imperdiet tristique velit ac imperdiet. Vivamus ut elit odio. Pellentesque sed est ac lacus porttitor pretium. Donec accumsan pharetra ligula, id lacinia elit dignissim nec. Nunc sollicitudin fermentum turpis, et vulputate enim tincidunt ut. Sed egestas lectus vel urna aliquet imperdiet. Nullam commodo urna dui, non semper lacus congue non. Donec non purus ex. Donec augue tortor, molestie sed aliquam at, hendrerit et turpis. In pretium vestibulum pellentesque. Aliquam consequat accumsan finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue sagittis lorem ac vehicula. Duis varius ex ac nibh dictum laoreet. Nunc quis mi et purus aliquet molestie. Cras sit amet sem gravida, maximus tellus ut, scelerisque dolor. Ut consectetur ligula egestas leo ultrices, ut fermentum ante vehicula. Nulla dignissim pharetra elit, quis tincidunt nisl bibendum in. Nullam ut elit tristique, congue purus non, bibendum eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis aliquam congue mauris eu consectetur. Suspendisse eget leo quis sapien tincidunt suscipit vitae in dui.</p> |
|---|
| 52 | |
|---|
| 53 | <p>Pellentesque dapibus nulla diam, non dictum felis dignissim et. Donec purus ligula, venenatis faucibus tincidunt eget, facilisis eu mi. Morbi porttitor facilisis justo, sed volutpat odio facilisis in. Mauris eu magna vel lacus pharetra elementum sagittis pretium odio. Sed ac ex non diam viverra fermentum a a ipsum. Quisque semper lorem at hendrerit aliquam. Quisque leo enim, sagittis ut ante vel, malesuada facilisis lectus. Etiam mi est, vulputate ac pretium dictum, semper sed nisi. Phasellus sed nibh aliquet, tincidunt mi et, elementum odio. Phasellus posuere sagittis cursus. Aliquam semper sem non maximus rhoncus.</p> |
|---|
| 54 | |
|---|
| 55 | <p>In hac habitasse platea dictumst. Nulla facilisi. Nunc luctus consequat ligula ut euismod. Phasellus ut sapien volutpat sapien blandit ullamcorper. Nullam ultricies tortor velit, ut pharetra libero laoreet eu. Etiam tincidunt vestibulum dolor ac convallis. In hac habitasse platea dictumst. Nunc nec viverra sem. Etiam faucibus pretium iaculis. Aliquam erat volutpat. Integer quis semper ipsum. Morbi ac tortor a nisl pretium viverra quis accumsan sapien. Aliquam lobortis vitae arcu non finibus. Sed consequat sem magna, fringilla ultrices quam aliquet nec. Donec at ex vel felis bibendum eleifend. Fusce ornare augue in massa dictum sollicitudin.</p> |
|---|
| 56 | |
|---|
| 57 | <p>Etiam dignissim fermentum tincidunt. Nullam eu libero ante. Ut placerat eros cursus, convallis nunc id, ultrices velit. Fusce vitae volutpat enim, eget consectetur libero. Praesent non dui lacus. Cras ut lacus turpis. Vivamus bibendum sem eget dui rutrum, in gravida purus posuere. Integer commodo odio felis, ac fringilla enim ultrices vitae. Fusce pulvinar euismod est, sed ultrices elit convallis ut. Praesent efficitur magna dolor, eu fermentum metus aliquam nec. Nullam consequat, dui hendrerit eleifend egestas, nisl mauris cursus nulla, sed iaculis nunc dolor vel magna.</p> |
|---|
| 58 | |
|---|
| 59 | <p>Vestibulum imperdiet tristique velit ac imperdiet. Vivamus ut elit odio. Pellentesque sed est ac lacus porttitor pretium. Donec accumsan pharetra ligula, id lacinia elit dignissim nec. Nunc sollicitudin fermentum turpis, et vulputate enim tincidunt ut. Sed egestas lectus vel urna aliquet imperdiet. Nullam commodo urna dui, non semper lacus congue non. Donec non purus ex. Donec augue tortor, molestie sed aliquam at, hendrerit et turpis. In pretium vestibulum pellentesque. Aliquam consequat accumsan finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue sagittis lorem ac vehicula. Duis varius ex ac nibh dictum laoreet. Nunc quis mi et purus aliquet molestie. Cras sit amet sem gravida, maximus tellus ut, scelerisque dolor. Ut consectetur ligula egestas leo ultrices, ut fermentum ante vehicula. Nulla dignissim pharetra elit, quis tincidunt nisl bibendum in. Nullam ut elit tristique, congue purus non, bibendum eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis aliquam congue mauris eu consectetur. Suspendisse eget leo quis sapien tincidunt suscipit vitae in dui.</p> |
|---|
| 60 | |
|---|
| 61 | <p>Pellentesque dapibus nulla diam, non dictum felis dignissim et. Donec purus ligula, venenatis faucibus tincidunt eget, facilisis eu mi. Morbi porttitor facilisis justo, sed volutpat odio facilisis in. Mauris eu magna vel lacus pharetra elementum sagittis pretium odio. Sed ac ex non diam viverra fermentum a a ipsum. Quisque semper lorem at hendrerit aliquam. Quisque leo enim, sagittis ut ante vel, malesuada facilisis lectus. Etiam mi est, vulputate ac pretium dictum, semper sed nisi. Phasellus sed nibh aliquet, tincidunt mi et, elementum odio. Phasellus posuere sagittis cursus. Aliquam semper sem non maximus rhoncus.</p> |
|---|
| 62 | |
|---|
| 63 | <p>In hac habitasse platea dictumst. Nulla facilisi. Nunc luctus consequat ligula ut euismod. Phasellus ut sapien volutpat sapien blandit ullamcorper. Nullam ultricies tortor velit, ut pharetra libero laoreet eu. Etiam tincidunt vestibulum dolor ac convallis. In hac habitasse platea dictumst. Nunc nec viverra sem. Etiam faucibus pretium iaculis. Aliquam erat volutpat. Integer quis semper ipsum. Morbi ac tortor a nisl pretium viverra quis accumsan sapien. Aliquam lobortis vitae arcu non finibus. Sed consequat sem magna, fringilla ultrices quam aliquet nec. Donec at ex vel felis bibendum eleifend. Fusce ornare augue in massa dictum sollicitudin.</p> |
|---|
| 64 | |
|---|
| 65 | <p>Etiam dignissim fermentum tincidunt. Nullam eu libero ante. Ut placerat eros cursus, convallis nunc id, ultrices velit. Fusce vitae volutpat enim, eget consectetur libero. Praesent non dui lacus. Cras ut lacus turpis. Vivamus bibendum sem eget dui rutrum, in gravida purus posuere. Integer commodo odio felis, ac fringilla enim ultrices vitae. Fusce pulvinar euismod est, sed ultrices elit convallis ut. Praesent efficitur magna dolor, eu fermentum metus aliquam nec. Nullam consequat, dui hendrerit eleifend egestas, nisl mauris cursus nulla, sed iaculis nunc dolor vel magna.</p> |
|---|
| 66 | |
|---|
| 67 | <p>Vestibulum imperdiet tristique velit ac imperdiet. Vivamus ut elit odio. Pellentesque sed est ac lacus porttitor pretium. Donec accumsan pharetra ligula, id lacinia elit dignissim nec. Nunc sollicitudin fermentum turpis, et vulputate enim tincidunt ut. Sed egestas lectus vel urna aliquet imperdiet. Nullam commodo urna dui, non semper lacus congue non. Donec non purus ex. Donec augue tortor, molestie sed aliquam at, hendrerit et turpis. In pretium vestibulum pellentesque. Aliquam consequat accumsan finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> |
|---|
| 68 | </textarea> |
|---|
| 69 | </div> |
|---|
| 70 | </div> |
|---|
| 71 | |
|---|
| 72 | <script> |
|---|
| 73 | |
|---|
| 74 | CKEDITOR.replace( 'editor1', { |
|---|
| 75 | extraPlugins: 'autogrow', |
|---|
| 76 | removePlugins: 'resize', |
|---|
| 77 | autoGrow_onStartup : true, |
|---|
| 78 | toolbar: [ |
|---|
| 79 | [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ], |
|---|
| 80 | [ 'FontSize', 'TextColor', 'BGColor' ] |
|---|
| 81 | ] |
|---|
| 82 | }); |
|---|
| 83 | |
|---|
| 84 | </script> |
|---|
| 85 | </body> |
|---|
| 86 | </html> |
|---|
