ronheywood/ckeditor-imagebrowser

CKEditor Image Browser plugin

imagebrowser is a CKEditor plugin that allows images on the server to be browsed and picked for inclusion into the editor's contents., _(*1)

You can view the working demo HERE., _(*2)

, _(*3)

This plugin integrates with the image plugin (part of CKEditor), by making it provide a Browse Server button in the Image dialog window., _(*4)

The way you use it is very similar to imageGetJson in Redactor - you only need to provide a list of images in a JSON format, and the image browser will take care of the rest., _(*5)

In fact, it uses the same data format as Redactor, allowing for an easy transition between the two editors., _(*6)

Installation

Copy the whole contents of this repository into a new plugins/imagebrowser directory in your CKEditor install., _(*7)

Make sure you're using the Standard or Full CKEditor packages. The Basic package lacks an in-built "File Browser" plugin, which this plugin depends on. You can also use a Custom CKEditor package, if you build it with "File Browser" plugin support., _(*8)

Usage

Enable the plugin by adding it to extraPlugins and specify the imageBrowser_listUrl parameter:, _(*9)

<textarea id="my-textarea-id"></textarea>

<script type="text/javascript">
    CKEDITOR.replace('my-textarea-id', {
        "extraPlugins": "imagebrowser",
        "imageBrowser_listUrl": "/path/to/images_list.json"
    });
</script>

The imageBrowser_listUrl configuration parameter points to a URL that lists the server's images in a JSON format. Make sure to use an absolute path., _(*10)

Example:, _(*11)

[
    {
        "image": "/image1_200x150.jpg",
        "thumb": "/image1_thumb.jpg",
        "folder": "Small"
    },
    {
        "image": "/image2_200x150.jpg",
        "thumb": "/image2_thumb.jpg",
        "folder": "Small"
    },

    {
        "image": "/image1_full.jpg",
        "thumb": "/image1_thumb.jpg",
        "folder": "Large"
    },
    {
        "image": "/image2_full.jpg",
        "thumb": "/image2_thumb.jpg",
        "folder": "Large"
    }
]

The above says that there are 2 image directories ("Small" and "Large") with 2 files in each of them., _(*12)

• image - the absolute path being used when the image gets put into the editor's contents., _(*13)

• thumb (optional) - the relative path to the image's thumbnail (for preview purposes). (if omitted, the value of image is used as a thumbnail.), _(*14)

• folder field is optional. If omitted, the image list will not be split into folders., _(*15)

Another way to initiliaze

If you want the image browser plugin to work for all of your CKEditor textareas, you can edit CKEditor's config.js and add the 2 configuration lines:, _(*16)

config.extraPlugins = "imagebrowser";
config.imageBrowser_listUrl = "/path/to/images_list.json";