PHPackages                             ronheywood/ckeditor-imagebrowser - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. ronheywood/ckeditor-imagebrowser

ActiveLibrary

ronheywood/ckeditor-imagebrowser
================================

040JavaScript

Since Jun 6Pushed 8y ago1 watchersCompare

[ Source](https://github.com/ronheywood/ckeditor-imagebrowser)[ Packagist](https://packagist.org/packages/ronheywood/ckeditor-imagebrowser)[ RSS](/packages/ronheywood-ckeditor-imagebrowser/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependenciesVersions (1)Used By (0)

CKEditor Image Browser plugin
=============================

[](#ckeditor-image-browser-plugin)

**imagebrowser** is a [CKEditor](http://ckeditor.com/) plugin that allows images on the server to be browsed and picked for inclusion into the editor's contents.

You can view the working demo [HERE](http://devture.com/projects/ckeditor-imagebrowser).

[![screenshot](https://camo.githubusercontent.com/e7371e32b839612407cce9527c37895036dc877c0c19872ea4ae88d2510f9db6/68747470733a2f2f726177322e6769746875622e636f6d2f7370616e74616c6565762f636b656469746f722d696d61676562726f777365722f64656d6f2f636b656469746f722d696d61676562726f777365722d73637265656e73686f742e6a7067)](https://camo.githubusercontent.com/e7371e32b839612407cce9527c37895036dc877c0c19872ea4ae88d2510f9db6/68747470733a2f2f726177322e6769746875622e636f6d2f7370616e74616c6565762f636b656469746f722d696d61676562726f777365722f64656d6f2f636b656469746f722d696d61676562726f777365722d73637265656e73686f742e6a7067)

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

The way you use it is very similar to `imageGetJson` in [Redactor](http://imperavi.com/redactor/)

- you only need to provide a list of images in a JSON format, and the image browser will take care of the rest.

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

Installation
------------

[](#installation)

Copy the whole contents of this repository into a new `plugins/imagebrowser` directory in your CKEditor install.

Make sure you're using the **Standard** or **Full** [CKEditor packages](http://ckeditor.com/download). The **Basic** package lacks an in-built "File Browser" plugin, which this plugin depends on. You can also use a [Custom CKEditor package](http://ckeditor.com/builder%3E), if you build it with "File Browser" plugin support.

Usage
-----

[](#usage)

Enable the plugin by adding it to `extraPlugins` and specify the `imageBrowser_listUrl` parameter:

```

	CKEDITOR.replace('my-textarea-id', {
		"extraPlugins": "imagebrowser",
		"imageBrowser_listUrl": "/path/to/images_list.json"
	});

```

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.**

Example:

```
[
	{
		"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.

- **image** - the absolute path being used when the image gets put into the editor's contents.
- **thumb** (optional) - the relative path to the image's thumbnail (for preview purposes). (if omitted, the value of **image** is used as a thumbnail.)
- **folder** field is *optional*. If omitted, the image list will not be split into folders.

Another way to initiliaze
-------------------------

[](#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:

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

```

###  Health Score

21

—

LowBetter than 19% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 62.5% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/e8479400f4973526b4e28848b085a68b850e3c1e6b35d0f96b1cb9d2829ab54f?d=identicon)[ronheywood](/maintainers/ronheywood)

---

Top Contributors

[![spantaleev](https://avatars.githubusercontent.com/u/388669?v=4)](https://github.com/spantaleev "spantaleev (15 commits)")[![beastafk](https://avatars.githubusercontent.com/u/1488217?v=4)](https://github.com/beastafk "beastafk (4 commits)")[![deant](https://avatars.githubusercontent.com/u/4946606?v=4)](https://github.com/deant "deant (4 commits)")[![ronheywood](https://avatars.githubusercontent.com/u/1688121?v=4)](https://github.com/ronheywood "ronheywood (1 commits)")

### Embed Badge

![Health badge](/badges/ronheywood-ckeditor-imagebrowser/health.svg)

```
[![Health](https://phpackages.com/badges/ronheywood-ckeditor-imagebrowser/health.svg)](https://phpackages.com/packages/ronheywood-ckeditor-imagebrowser)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)