| 1 | <!DOCTYPE html> |
|---|
| 2 | <!-- |
|---|
| 3 | Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved. |
|---|
| 4 | For licensing, see LICENSE.md or http://ckeditor.com/license |
|---|
| 5 | --> |
|---|
| 6 | <html> |
|---|
| 7 | <head> |
|---|
| 8 | <meta charset="utf-8"> |
|---|
| 9 | <title>New Image plugin — CKEditor Sample</title> |
|---|
| 10 | <script src="ckeditor.js"></script> |
|---|
| 11 | <script> |
|---|
| 12 | if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) |
|---|
| 13 | CKEDITOR.tools.enableHtml5Elements( document ); |
|---|
| 14 | </script> |
|---|
| 15 | <link href="samples/sample.css" rel="stylesheet"> |
|---|
| 16 | <meta name="ckeditor-sample-name" content="New Image plugin"> |
|---|
| 17 | <meta name="ckeditor-sample-group" content="Plugins"> |
|---|
| 18 | <meta name="ckeditor-sample-description" content="Using the new Image plugin to insert captioned images and adjust their dimensions."> |
|---|
| 19 | <meta name="ckeditor-sample-isnew" content="1"> |
|---|
| 20 | </head> |
|---|
| 21 | <body> |
|---|
| 22 | <h1 class="samples"> |
|---|
| 23 | <a href="../../../samples/index.html">CKEditor Samples</a> » New Image plugin |
|---|
| 24 | </h1> |
|---|
| 25 | |
|---|
| 26 | <div class="description"> |
|---|
| 27 | <p> |
|---|
| 28 | This editor is using the new <strong>Image</strong> (<code>image2</code>) plugin, which implements a dynamic <em>click-and-drag</em> resizing |
|---|
| 29 | and easy captioning of the images. |
|---|
| 30 | </p> |
|---|
| 31 | <p> |
|---|
| 32 | To use the new plugin, extend <code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraPlugins">config.extraPlugins</a></code>: |
|---|
| 33 | </p> |
|---|
| 34 | <pre class="samples"> |
|---|
| 35 | CKEDITOR.replace( '<em>textarea_id</em>', { |
|---|
| 36 | <strong>extraPlugins: 'image2'</strong> |
|---|
| 37 | } ); |
|---|
| 38 | </pre> |
|---|
| 39 | </div> |
|---|
| 40 | <textarea id="editor1" cols="10" rows="10"></textarea> |
|---|
| 41 | <script> |
|---|
| 42 | CKEDITOR.replace( 'editor1', { |
|---|
| 43 | extraPlugins: 'image2', |
|---|
| 44 | image2_alignClasses : [ 'text-editor-image-left', 'text-editor-image-center', 'text-editor-image-right' ], |
|---|
| 45 | contentsCss : 'contents2.css', |
|---|
| 46 | allowedContent : true, |
|---|
| 47 | height: 450 |
|---|
| 48 | } ); |
|---|
| 49 | </script> |
|---|
| 50 | <div id="footer"> |
|---|
| 51 | <hr> |
|---|
| 52 | <p> |
|---|
| 53 | CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> |
|---|
| 54 | </p> |
|---|
| 55 | <p id="copy"> |
|---|
| 56 | Copyright © 2003-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico |
|---|
| 57 | Knabben. All rights reserved. |
|---|
| 58 | </p> |
|---|
| 59 | </div> |
|---|
| 60 | </body> |
|---|
| 61 | </html> |
|---|
