projects / perso / Immae / Projets / packagist / connexionswing-ckeditor-component.git / blame
| Commit | Line | Data |
|---|---|---|
| 7adcb81e IB |
1 | CKEditor Image Browser plugin |
| 2 | ============================= | |
| 3 | ||
| 4 | **imagebrowser** is a `CKEditor <http://ckeditor.com/>`_ plugin that allows images on the server to be browsed and picked | |
| 5 | for inclusion into the editor's contents. | |
| 6 | ||
| 7 | This plugin integrates with the **image** plugin (part of CKEditor), | |
| 8 | by making it provide a **Browse Server** button in the Image dialog window (`screenshot here <http://ckeditor.com/sites/default/files/styles/large/public/image/image_manager.png>`_). | |
| 9 | ||
| 10 | The way you use it is very similar to `imageGetJson <http://imperavi.com/redactor/docs/settings/#set_imageGetJson>`_ in `Redactor <http://imperavi.com/redactor/>`_ | |
| 11 | - you only need to provide a list of images in a JSON format, and the image browser will take care of the rest. | |
| 12 | ||
| 13 | In fact, it uses the same data format as Redactor, allowing for an easy transition between the two editors. | |
| 14 | ||
| 15 | Installation | |
| 16 | ------------ | |
| 17 | ||
| 18 | Copy the whole contents of this repository into a new ``plugins/imagebrowser`` directory in your CKEditor install. | |
| 19 | ||
| 20 | Make sure you're using the **Standard** or **Full** `CKEditor packages <http://ckeditor.com/download>`_. | |
| 21 | The **Basic** package lacks an in-built "File Browser" plugin, which this plugin depends on. | |
| 22 | You can also use a `Custom CKEditor package <http://ckeditor.com/builder>`_, if you build it with "File Browser" plugin support. | |
| 23 | ||
| 24 | Usage | |
| 25 | ----- | |
| 26 | ||
| 27 | Enable the plugin by adding it to `extraPlugins` and specify the `imageBrowser_listUrl` parameter:: | |
| 28 | ||
| 29 | CKEDITOR.replace('textareaId', { | |
| 30 | "extraPlugins": "imagebrowser", | |
| 31 | "imageBrowser_listUrl": "/path/to/images_list.json" | |
| 32 | }); | |
| 33 | ||
| 34 | The **imageBrowser_listUrl** configuration parameter points to a URL that lists the server's images in a JSON format. | |
| 35 | ||
| 36 | Example:: | |
| 37 | ||
| 38 | [ | |
| 39 | { | |
| 40 | "image": "/image1_200x150.jpg", | |
| 41 | "thumb": "/image1_thumb.jpg", | |
| 42 | "folder": "Small" | |
| 43 | }, | |
| 44 | { | |
| 45 | "image": "/image2_200x150.jpg", | |
| 46 | "thumb": "/image2_thumb.jpg", | |
| 47 | "folder": "Small" | |
| 48 | }, | |
| 49 | ||
| 50 | { | |
| 51 | "image": "/image1_full.jpg", | |
| 52 | "thumb": "/image1_thumb.jpg", | |
| 53 | "folder": "Large" | |
| 54 | }, | |
| 55 | { | |
| 56 | "image": "/image2_full.jpg", | |
| 57 | "thumb": "/image2_thumb.jpg", | |
| 58 | "folder": "Large" | |
| 59 | } | |
| 60 | ] | |
| 61 | ||
| 62 | The above says that there are 2 image directories ("Small" and "Large") with 2 files in each of them. | |
| 63 | ||
| 64 | The **image** field is the relative/absolute path being used when the image gets put into the editor's contents. | |
| 65 | ||
| 66 | The **thumb** field is *optional*. It specifies the relative/absolute path to the image's thumbnail (for preview purposes). | |
| 67 | If omitted, the value of **image** is used as a thumbnail. | |
| 68 | ||
| 69 | The **folder** field is *optional*. If omitted, the image list will not be split into folders. |