Fetide68 Fetide68 - 2 months ago 20
Javascript Question

CKEditor with Simple Image Browser plugin

I'm trying to use CKEditor with the Simple Image Browser plugin on wampserver, but I'm sorry, I really do not understand what to put in this line:

CKEDITOR.config.simpleImageBrowserURL


In the video he putted a php file, what to put in this file ?
(video: https://www.youtube.com/watch?v=WB5Y8XNQlgE)

I'd like to show the pictures that are in a variable directory 'images/$id/'

Thanks for your help. 

Page of the plugin:
http://ckeditor.com/addon/simple-image-browser

Answer

For simpleImageBrowserURL you need to provide a URL (e.g. a php script) which delivers the content as JSON.

You can start with a URL to a static .txt file with a content like this:

[{"url": "/images/1234/image1.png"},{"url": "/images/1234/image2.png"}]

Or a very simple php script:

<?php
header('Content-Type: application/json');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>

UPDATE

With the above php script the simple image browser plugin does not load the images. This is caused by the jQuery $.get function the plugin uses. While jQuery already parses the JSON and passes objects to the function the plugin tries to parse the objects (here the images variable):

$.get(CKEDITOR.config.simpleImageBrowserURL, function(images) {
      var json;
      console.log(images);
      json = $.parseJSON(images); // this will not work if the images parameter contains objects

It may be that this worked that way with older versions of jQuery...

So to make this work the php script has to deliver a text/plain mime type:

<?php
header('Content-Type: text/plain');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>
Comments