Browsing Image File in Ckeditor

As in previous article I have explained about the uploading of image file in editor.

For smooth progression , in this article I will help you by explaining the browsing of existing Image file on the server.

To integrate browsing Image file in editor you have to add extra plugin imagebrowser and add “imageBrowser_listUrl attribute in your editor config with the defined path where you have written your code to browse the file.


Download the imagebrowser  plugin from ckeditor repository or I have attached a zip folder of it .

Extract it into your plugins directory of ckeditor.


* Here /admin/upload/browse_editor_image is the path of php file from where it will returns all the images stored at the specified path in json format.

If you want to provide the path from script you can pass it in the query string along with the path as – ‘/admin/upload/browse_editor_image?path=/assets/images/editor/’.


As in previous article I have a created a file Upload.php under the admin folder . In the same file I have created a function  browse_editor_image as below :


$path is the path of the stored images . Now while creating array to be returned you have three options –

  1. The thumb field specifies the relative/absolute path to the image’s thumbnail (for preview purposes).
  2. The image field is the relative/absolute path being used when the image gets put into the editor’s contents.
  3. The folder field is optional. If omitted, the image list will not be split into categories.

After that , you find browse server button in the dialog of image icon. Click on that , select the previously uploaded image and enjoy 🙂


You can find imagebrowser plugin here. – imagebrowser_2.0.2_0

Please follow and like us:

Leave a Reply